Bộ chọn màu HEX
Các mẫu phổ biến
Chọn màu bằng bộ chọn trực quan của trình duyệt hoặc nhập giá trị HEX gồm ba hay sáu ký tự. Công cụ chuyển sang RGB, HSL và CMYK ước tính, sau đó tính độ chói tương đối cùng tỷ lệ tương phản chính xác với trắng và đen. Màu được xử lý trong trình duyệt này và không được thêm vào URL của các bước.
Cách chọn màu
-
1
Bắt đầu với màu mẫu hoặc bộ chọn màu
Chọn một màu mẫu hoặc mở bộ chọn màu tích hợp của trình duyệt.
-
2
Nhập giá trị HEX chính xác
Gõ ba ký tự như #F60 hoặc sáu ký tự như #FF6600; dạng rút gọn được mở rộng chính xác.
-
3
Xem các định dạng đã tính
Xem chung HEX, RGB, HSL, CMYK ước tính và độ chói tương đối sRGB.
-
4
Kiểm tra tương phản và sao chép
So sánh màu với trắng và đen rồi sao chép giá trị HEX, RGB hoặc HSL cần dùng.
Các ký hiệu màu trong thực tế
Mỗi mô hình màu trả lời một câu hỏi hơi khác nhau.
Bảng tham chiếu ký hiệu
| Ký hiệu | Thành phần | Nơi thường dùng |
|---|---|---|
| HEX | #RRGGBB | CSS, công cụ thiết kế, cẩm nang thương hiệu |
| RGB | đỏ 0–255, xanh lá 0–255, xanh dương 0–255 | CSS rgb(), trình chỉnh sửa ảnh |
| HSL | sắc độ 0–360°, độ bão hòa %, độ sáng % | CSS hsl(), hệ thống thiết kế |
| CMYK | cyan %, magenta %, vàng %, key/đen % | In ấn, chế bản trước in |
Độ tương phản cho khả năng tiếp cận
WCAG 2.2 quy định tỷ lệ tương phản tối thiểu giữa văn bản và nền:
- AA cho văn bản thường: ≥ 4,5:1
- AA cho văn bản lớn (18 pt hoặc 14 pt đậm): ≥ 3:1
- AAA cho văn bản thường: ≥ 7:1
Bộ chọn tính tỷ lệ so với nền trắng và nền đen theo thời gian thực. Nếu màu chữ tùy chỉnh là yếu tố quan trọng, hãy kiểm tra từng cặp màu bằng công cụ kiểm tra tương phản chuyên dụng.
Mẹo
- HEX là định dạng mặc định trong hầu hết công cụ thiết kế, nhưng HEX rút gọn ba ký tự (
#F60) tương đương#FF6600, không phải#F06060. - HSL thuận tiện khi xây dựng bảng màu: cố định sắc độ, rồi thay đổi độ sáng để tạo tông sáng và tông tối.
- CMYK và RGB không thể chuyển đổi hoàn hảo cho nhau, kết quả CMYK khi in phụ thuộc vào hồ sơ máy in. Luôn in thử trên giấy thật.
- Nếu thiết kế cho CSS hiện đại, hãy cân nhắc OKLCH để có các bước độ sáng đồng đều hơn theo cảm nhận thị giác.
Câu hỏi thường gặp
Photoshop áp dụng hồ sơ màu, thường là sRGB cho màn hình và có thể là hồ sơ khác cho in ấn. Trình duyệt hiển thị giá trị HEX không gắn hồ sơ như sRGB. Nếu tài liệu dùng Adobe RGB hoặc ProPhoto, giá trị điểm ảnh vẫn giống nhau nhưng màu bạn cảm nhận sẽ thay đổi.
Có. Cả hai đều biểu thị màu đỏ thuần: đỏ là 255, xanh lá và xanh dương là 0. HEX chỉ là cách viết thập lục phân hai ký tự cho từng giá trị kênh từ 0 đến 255.
Chọn màu chính rồi sao chép giá trị HSL. Trong CSS hoặc công cụ thiết kế, giữ nguyên sắc độ và độ bão hòa khi điều chỉnh độ sáng. Hãy kiểm tra riêng từng cặp màu chữ và nền.
Màu hiện tại được giữ tối đa 30 phút trong thẻ trình duyệt này để dùng qua các bước hướng dẫn. Màu không được thêm vào URL hay gửi qua máy chủ của chúng tôi. Bắt đầu lại, đóng thẻ, xóa dữ liệu trình duyệt hoặc hết hạn sẽ xóa màu.
Công cụ liên quan
Bảng tham chiếu ASCII
Bảng ASCII đầy đủ từ 0 đến 127 với giá trị thập phân, thập lục phân, bát phân, nhị phân và ký hiệu tham chiếu ký tự số HTML, gồm NUL, LF và DEL.
Bộ chuyển đổi Base64 sang Hex
Chuyển chuỗi Base64 thành các byte nền tảng được biểu diễn dưới dạng hệ thập lục phân (hex). Hữu ích để kiểm tra token, khóa, chứng chỉ và JWT.
Trình tạo bảng màu ngẫu nhiên
Tạo bảng màu ngẫu nhiên từ 2 đến 15 mẫu màu, chọn phong cách rực rỡ, pastel, dịu hoặc tối, rồi sao chép mã HEX hoặc biến CSS.
Trình tạo bảng màu
Tạo bảng màu đơn sắc, tương đồng, bổ túc, bộ ba hoặc bộ bốn từ màu HEX gốc và xuất các biến CSS sẵn sàng sao chép.
Trình chuyển đổi Binary sang Hex
Chuyển input binary thành giá trị hexadecimal chữ hoa đơn giản. Ký tự không phải 0 hoặc 1 bị bỏ qua và số 0 ở đầu không được giữ lại.
Trình rút gọn đại số Boolean
Rút gọn biểu thức Boolean bằng Karnaugh maps và thuật toán Quine-McCluskey. Hiển thị từng bước tối thiểu hóa và dạng SOP/POS cuối cùng.