Lấy Mã Màu Từ Ảnh
Trích xuất mã màu chính xác từ ảnh ngay lập tức.
Tự động phân tích bảng màu chủ đạo và lấy màu bằng phím mũi tên.
Kéo thả ảnh vào đây
hoặc click để chọn file / Ctrl+V để dán
* Hình ảnh được xử lý cục bộ trên trình duyệt của bạn và không bao giờ bị tải lên máy chủ.
* Click vào ảnh để chọn màu. Có thể điều chỉnh vi chỉnh từng pixel bằng các phím mũi tên (↑↓←→) trên bàn phím.
Thông tin màu
Bạn cũng có thể thích
Giới thiệu Công cụ Lấy mã màu từ ảnh
Công cụ Lấy Mã Màu Từ Ảnh (Image Color Picker) là một tiện ích trực tuyến miễn phí cho phép bạn trích xuất thông tin màu cụ thể từ hình ảnh, ảnh chụp và hình minh họa, cung cấp cho bạn các mã màu như HEX, RGB, HSL, CMYK và OKLCH. Với việc xử lý hoàn toàn trên máy khách (client-side) sử dụng Canvas API của trình duyệt, hình ảnh tải lên không bao giờ được gửi đến các máy chủ bên ngoài, đảm bảo an toàn và riêng tư tuyệt đối.
Công cụ cực kỳ hữu ích đối với các nhà thiết kế web và lập trình viên front-end khi cần tìm kiếm màu chủ đạo của các thiết kế tham khảo hoặc tạo các bảng màu phù hợp với tâm trạng của bức ảnh. Ngoài tính năng trích xuất chính xác theo từng pixel bằng tay, công cụ còn có tính năng tự động phân tích để xuất ra các màu sắc đại diện (dominant colors) của toàn bộ bức ảnh.
Cách sử dụng
Tải ảnh lên
Kéo và thả ảnh bạn muốn trích xuất màu vào khu vực trên cùng, hoặc click để chọn file. Cũng có thể dán ảnh từ clipboard (Ctrl+V). Việc tải ảnh diễn ra ngay lập tức và được xử lý hoàn toàn trên trình duyệt.
Chọn một màu cụ thể
Chọn tab "Lấy màu bằng tay" và click vào vùng ảnh bạn muốn kiểm tra. Một kính lúp sẽ xuất hiện giúp bạn ngắm chính xác các pixel nhỏ. Bạn có thể điều chỉnh từng pixel một bằng các phím mũi tên (↑↓←→).
Trích xuất màu chủ đạo
Chuyển sang tab "Tự động" để tự động phân tích và tạo một bảng màu gồm 8 màu đại diện (dominant colors). Bấm "Copy biến CSS" để copy nguyên danh sách và paste vào file stylesheet của dự án.
Thuật ngữ liên quan
- HEX (Hexadecimal Color Code)
- Phương pháp biểu diễn màu phổ biến nhất trong thiết kế web. Nó biểu thị các giá trị đỏ, xanh lá và xanh dương ở hệ thập lục phân từ 00 đến FF, được thể hiện dưới dạng chuỗi 6 ký tự như
#FF5733. Rất cần thiết khi chỉ định màu trong HTML và CSS. - OKLCH
- Phương pháp định nghĩa màu CSS hiện đại sử dụng không gian màu đồng nhất theo cảm nhận. Bao gồm độ sáng (Lightness), độ rực (Chroma) và sắc độ (Hue), nó khớp với đặc điểm thị giác của con người tốt hơn so với HSL truyền thống, mang lại lợi thế trong việc dễ dàng tạo ra các bảng màu với tỷ lệ tương phản nhất quán.
- Màu chủ đạo (Dominant Color)
- Màu chính nổi bật nhất trong hình ảnh hoặc thiết kế và xác định ấn tượng tổng thể của nó. Công cụ này sử dụng thuật toán Median Cut để phân tích hình ảnh và tự động trích xuất 8 màu có tỷ lệ xuất hiện nhiều nhất và tác động mạnh mẽ nhất đến thị giác.
- Thuật toán Median Cut
- Một loại thuật toán thường được sử dụng để lượng tử hóa màu hình ảnh (color quantization). Nó tạo ra một bảng màu đại diện một cách hiệu quả bằng cách đặt tất cả các pixel vào không gian màu RGB 3D và liên tục chia cắt không gian dọc theo trục màu có phương sai lớn nhất.
- Bảng màu (Color Palette)
- Sự kết hợp của các màu sắc được sử dụng trong một thiết kế. Đây là tập hợp các màu xác định màu cơ sở (base color), màu chính, màu nhấn (accent color), v.v. để đạt được một thiết kế hài hòa và thống nhất.
Câu hỏi thường gặp
- Q.Ảnh tải lên có bị lưu trên máy chủ không?
- Không, ảnh không bị lưu lại. Mọi thao tác xử lý hình ảnh và thuật toán trích xuất màu đều được thực thi bằng API Canvas trên trình duyệt của bạn (môi trường cục bộ). Dữ liệu hình ảnh không bao giờ được gửi tới máy chủ bên ngoài qua internet, vì vậy bạn có thể yên tâm sử dụng ngay cả với các hình ảnh có tính bảo mật cao.
- Q.Công cụ hỗ trợ những định dạng ảnh nào?
- Hỗ trợ các định dạng hình ảnh web phổ biến: JPG, PNG, GIF, WebP và SVG. Giới hạn dung lượng file lên tới 10MB, đảm bảo đủ sức chứa cho hầu hết các trường hợp sử dụng.
- Q.Màu được trích xuất có độ chính xác cao không?
- Do công cụ trực tiếp đọc dữ liệu pixel trên Canvas, bạn có thể nhận được màu chính xác 100% (trong không gian màu sRGB) ở cấp độ pixel. Hơn nữa, bằng cách sử dụng các phím mũi tên trên bàn phím sau khi click, bạn có thể chọn và trích xuất chính xác ngay cả những khác biệt màu sắc tinh tế của các pixel lân cận.
- Q.Màu CMYK có thể được sử dụng trực tiếp để in ấn không?
- Các giá trị CMYK mà công cụ này cung cấp là các số liệu lý thuyết dựa trên tính toán gần đúng từ giá trị RGB. Đối với in ấn chuyên nghiệp (DTP), kết quả phụ thuộc vào profile màu (như Japan Color), do đó bạn chỉ nên sử dụng chúng làm giá trị tham khảo và thực hiện kiểm tra lần cuối bằng các phần mềm chuyên dụng như Illustrator.
Ứng dụng thực tế
Thiết kế Web và Lập trình
Lấy chính xác màu thương hiệu (HEX/RGB) từ các ảnh chụp màn hình trang web tham khảo hoặc ảnh logo do khách hàng cung cấp và áp dụng chúng vào CSS. Với tính năng tự động trích xuất, bạn có thể nhanh chóng xác định các màu cơ sở và màu nhấn.
Phối màu UI phù hợp với ảnh
Trích xuất màu chủ đạo từ hình thu nhỏ của bài viết hoặc ảnh banner ở trang chủ. Bằng cách thiết lập các màu đó làm màu nền cho văn bản hoặc nút bấm, bạn có thể thiết kế giao diện sao cho hình ảnh và UI đồng nhất với nhau.
Tạo bảng màu từ tranh minh họa
Trích xuất các sự kết hợp màu sắc ấn tượng từ các tác phẩm của các họa sĩ yêu thích hoặc các bức ảnh phong cảnh đẹp. Copy hàng loạt dưới dạng biến CSS và tận dụng chúng làm ý tưởng phối màu cho các tác phẩm của bạn.
Tham chiếu cho việc chỉnh màu ảnh
Khi chỉnh sửa ảnh (Retouching), bạn có thể lấy chính xác thông tin màu của các khu vực cụ thể như tông màu da hoặc màu bầu trời ở cấp độ pixel để làm cơ sở cho việc điều chỉnh cân bằng trắng (White Balance) và phân loại màu sắc (Color Grading).
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.