Cách lấy đúng màu từ ảnh: HEX, RGB và HSL

Để lấy đúng màu từ ảnh, hãy đọc giá trị của một điểm ảnh thay vì ước lượng bằng mắt. Mở ảnh trong công cụ lấy màu, di chuột đến vị trí cần lấy, nhấp chuột và sao chép mã HEX. Kết quả là giá trị được lưu sẵn của điểm ảnh đó, nên mỗi lần bạn lấy cùng một vị trí trong cùng một tệp sẽ cho ra cùng một màu.

Lấy màu từ ảnhCần mã màu chính xácDùng miễn phí

Điểm ảnh lưu trữ gì

Mỗi điểm ảnh là một ô vuông nhỏ có màu. Trên màn hình hoặc trong tệp ảnh, nó được lưu bằng ba số cho đỏ, xanh lá và xanh dương, mỗi số từ 0 đến 255. Màu đỏ thuần là 255, 0, 0. Ba số này mang cùng một thông tin ở mọi định dạng, nên một màu có thể được viết theo nhiều cách.

HEX, RGB và HSL

• HEX viết mỗi số ở dạng thập lục phân, hai ký tự cho mỗi kênh. #FF0000 là màu đỏ thuần. Trang web, CSS và hầu hết công cụ thiết kế đều dùng dạng này.
• RGB viết các số đó ở dạng thập phân, như rgb(255, 0, 0). Đây là cùng màu với mã HEX.
• HSL mô tả màu theo cách con người thường nói về màu. Sắc độ là góc trên vòng màu, độ bão hòa là độ đậm nhạt của màu, còn độ sáng là mức sáng hay tối. hsl(0, 100%, 50%) là màu đỏ thuần.

Dùng HEX khi dán màu vào mã, RGB khi công cụ yêu cầu, và HSL khi bạn muốn một phiên bản sáng hơn hoặc tối hơn của cùng sắc độ. Chỉ thay đổi độ sáng trong HSL sẽ giữ nguyên sắc độ, việc này khó làm hơn khi chỉnh tay mã HEX. Để kiểm tra độ tương phản giữa hai màu, xem HEX, RGB, HSL, CMYK và độ tương phản.

Đây là một màu được dùng trong stylesheet:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Vì sao mã màu có thể không khớp với màn hình

• Ảnh đã được nén. JPEG tiết kiệm dung lượng bằng cách làm mịn các chi tiết nhỏ, nên các điểm ảnh gần cạnh có thể khác đôi chút so với màu bạn thấy ở giữa một vùng.
• Cạnh bị pha trộn. Chỗ hai màu tiếp giáp, các điểm ảnh ở giữa là hỗn hợp của cả hai. Chúng không phải là một màu riêng.
• Hồ sơ màu khác nhau. Công cụ đọc các giá trị mà trình duyệt giải mã, tức là theo sRGB. Ảnh được lưu với hồ sơ gam màu rộng có thể trông khác khi mở ở các chương trình khác.
• Việc co giãn làm trộn điểm ảnh. Ảnh chụp màn hình ở kích thước đã được thu phóng có thể có các điểm ảnh bị trộn. Nếu có thể, hãy chụp ở kích thước gốc.
• Ảnh rất lớn được đọc từ bản sao. Ảnh có cạnh dài hơn 6000 điểm ảnh sẽ được đọc từ bản sao 6000 điểm ảnh, nên một điểm ảnh có thể khác đi một chút so với tệp gốc.

Lấy màu ở giữa vùng phẳng

Tìm một vùng có cùng một màu, rồi di chuyển đến tâm của vùng đó. Kính lúp hiển thị 11 x 11 điểm ảnh xung quanh con trỏ, giúp bạn thấy vị trí đó là pha trộn hay đồng nhất. Khi dùng bàn phím, hãy di chuyển con nhắm từng điểm ảnh một bằng phím mũi tên, hoặc mười điểm mỗi lần khi giữ Shift, rồi nhấn Enter để lấy màu. Kiểm tra kết quả hiển thị trước khi sao chép.

Dùng bảng màu để tạo phối màu

Một bức ảnh hiếm khi chỉ có một màu bạn quan tâm. Bảng màu liệt kê tối đa sáu màu chính của ảnh. Cách hoạt động là làm tròn mỗi điểm ảnh về 16 mức cho mỗi kênh, đếm các nhóm, và giữ lại những nhóm phổ biến nhất khác biệt nhau. Mỗi ô màu hiển thị giá trị trung bình của nhóm. Nhấn vào một ô màu để sao chép mã HEX của nó. Hãy xem bảng màu như điểm xuất phát, vì nó là giá trị trung bình chứ không phải màu thương hiệu đo đạc chính xác.

Chuyển đổi giữa các định dạng

Nếu công cụ thiết kế yêu cầu một định dạng khác, hãy dán mã HEX vào công cụ chuyển đổi màu. Công cụ này chuyển đổi giữa HEX, RGB và HSL mà không làm thay đổi màu, nên kết quả khớp với mã bạn đã lấy.

Lịch sử lấy màu và quyền riêng tư

Công cụ giữ các lần lấy màu gần nhất của bạn trên trang để bạn so sánh. Chúng chỉ tồn tại trong bộ nhớ của thẻ này và sẽ biến mất khi bạn đóng thẻ. Bản thân ảnh được đọc ngay trong trình duyệt của bạn và không bao giờ được gửi lên máy chủ.

Cách thực hiện với fixmint

1. Mở công cụ lấy màu từ ảnh và kéo thả ảnh vào.
2. Di chuột đến vị trí cần lấy. Hoặc chọn ảnh rồi dùng phím mũi tên để di chuyển con nhắm từng điểm ảnh một, giữ Shift để di chuyển mười điểm ảnh.
3. Nhấp chuột, hoặc nhấn Enter, để lấy màu. Kiểm tra kết quả hiển thị trước khi sao chép.
4. Dùng nút Sao chép bên cạnh HEX, RGB hoặc HSL để sao chép giá trị bạn cần.
5. Nếu công cụ thiết kế yêu cầu định dạng khác, hãy dán giá trị vào công cụ chuyển đổi màu.

Câu trả lời nhanh

Vì sao màu trên màn hình của tôi trông khác? Màn hình của bạn hiển thị một phiên bản đã được quản lý màu và thu phóng của tệp. Hãy lấy màu ở giữa một vùng phẳng và so sánh mã HEX với một ô màu chuẩn đã biết.

Tôi nên sao chép định dạng nào? HEX cho trang web và hầu hết công cụ thiết kế. Dùng RGB hoặc HSL khi công cụ yêu cầu những định dạng đó.

Công cụ có tải ảnh của tôi lên không? Không. Ảnh được giải mã và đọc ngay trong trình duyệt của bạn.