Tên Màu và Mã Hex

Mã màu hex hoạt động thế nào

Mã hex chỉ là ba con số viết theo hệ cơ số 16: bao nhiêu đỏ, bao nhiêu lục và bao nhiêu lam, mỗi giá trị từ 00 đến FF. Vậy #FFD700 nghĩa là đỏ ở mức tối đa, lục ở mức 215 trên 255, và hoàn toàn không có lam, điều mà mắt ta đọc thành màu vàng kim. Chỉ các cặp hai chữ số mới có ý nghĩa, và đó là lý do #FFF và #FFFFFF đều là màu trắng.

So sánh hex, RGB và HSL

Cả ba đều mô tả cùng những màu ấy, chỉ mang thông tin khác nhau. Hex gọn gàng và là lựa chọn quen thuộc trong CSS. RGB là những con số ấy ở hệ thập phân, dễ tính toán hơn. HSL tách tông màu khỏi độ bão hòa và độ sáng, nên dựng bảng màu bằng tay dễ hơn nhiều: giữ nguyên tông, đổi độ sáng, và bạn có ngay một sắc độ hài hòa.

Vì sao tương phản lại quan trọng

Chữ phải nổi bật khỏi nền đủ nhiều để người thị lực kém hoặc người xem trên màn hình tối vẫn đọc được. Hướng dẫn về khả năng tiếp cận đặt tỷ lệ 4,5 trên 1 cho chữ thường (mức AA) và 7 trên 1 cho mức AAA nghiêm ngặt hơn. Chữ cỡ lớn được phép 3 trên 1. Công cụ này tính tỷ lệ với cả trắng lẫn đen, nên bạn thấy ngay nên đặt màu nào lên trên.

Nên biết

• CSS có 148 màu được đặt tên, và vài màu bị trùng: grey với gray, cũng như aqua với cyan, là giống hệt nhau.
• Cách viết hex rút gọn chỉ dùng được khi mỗi cặp lặp lại, nên #FFCC00 có thể viết là #FC0 nhưng #FFD700 thì không rút gọn được.
• Thêm hai chữ số hex nữa sẽ đặt độ trong suốt, nên #FFD70080 là màu vàng kim ở khoảng một nửa độ đục.
• Để dựng bảng màu, hãy giữ nguyên tông trong HSL và chỉ thay đổi độ sáng. Các màu sẽ luôn trông cùng một họ.