Hướng dẫn về màu sắc
Hướng dẫn ngắn, thực tế về màu sắc trên màn hình: định dạng, độ tương phản, bảng màu, chế độ tối và CSS. Mọi con số đều được tính toán, mọi ví dụ đều sao chép được.
- OKLCH là gì: định dạng màu cuối cùng cũng khớp với mắt ngườiOKLCH mô tả màu theo việc nó trông sáng đến đâu, rực đến đâu và thuộc sắc màu nào. Khác với HSL, cùng một giá trị độ sáng thì trông sáng như nhau ở mọi sắc màu, nhờ vậy bảng màu, trạng thái hover và độ tương phản đạt chuẩn tiếp cận đều dễ đoán trước.28 tháng 9, 20264 phút đọc
- APCA và WCAG 2: nên tin cách kiểm tra độ tương phản nàoTỷ lệ tương phản WCAG 2 là thứ luật pháp yêu cầu. APCA là mô hình mới hơn, dự đoán khả năng đọc tốt hơn nhiều, nhất là với giao diện tối và màu có độ bão hòa cao. Kiểm tra cả hai giúp chữ của bạn vừa đạt chuẩn vừa thật sự dễ đọc.28 tháng 9, 20263 phút đọc
- Gam màu là gì: sRGB, Display P3 và màu nằm ngoài gamGam màu (gamut) là tập hợp các màu mà một màn hình hay một không gian màu có thể hiển thị. Web được xây dựng trên sRGB, nhưng giờ đây phần lớn điện thoại và nhiều laptop hiển thị được Display P3, với màu đỏ, xanh lá và cam rực hơn thấy rõ.28 tháng 9, 20262 phút đọc
- Các định dạng màu: HEX, RGB, HSL, OKLCH và những định dạng khácCùng một màu có thể viết theo cả chục cách. Dưới đây là ý nghĩa của từng định dạng, khi nào nên dùng và cùng một màu trông ra sao ở tất cả các định dạng.28 tháng 9, 20262 phút đọc
- Mã màu hex là gì: cách #RRGGBB hoạt độngMột mã màu hex như #1e90ff gồm ba cặp chữ số thập lục phân: lượng ánh sáng đỏ, xanh lá và xanh dương, mỗi cặp từ 00 (không có) đến ff (tối đa, 255). Thêm cặp thứ tư để đặt độ mờ đục: 80 là khoảng 50%, ff là đục hoàn toàn.28 tháng 9, 20267 phút đọc
- Cách chọn bảng màu cho website hoặc ứng dụngBắt đầu từ một màu thương hiệu, tạo thang 50 đến 950 từ màu đó, thêm các màu xám hơi ngả màu và bốn màu ngữ nghĩa, rồi kiểm tra độ tương phản và mù màu cho từng cặp chữ và nền. Hãy chọn bậc theo độ sáng OKLCH, đừng chọn bằng mắt: trên nền trắng, chữ đạt WCAG AA khi độ sáng giảm xuống khoảng 0,55, với bất kỳ sắc độ nào.28 tháng 9, 20268 phút đọc
- Màu cho chế độ tối: cách chọn màu nền, màu chữ và màu nhấnHãy dùng nền xám đậm như #121212 thay cho đen tuyền, chữ trắng ngà như #e5e5e5 thay cho trắng tinh, cùng các phiên bản sáng hơn, ít rực hơn của màu thương hiệu. Kiểm tra chữ bằng cả APCA lẫn WCAG 2, vì WCAG 2 đánh giá độ tương phản trên nền tối cao hơn thực tế.28 tháng 9, 20267 phút đọc
- Phối màu hài hòa: bổ túc, tương đồng, bộ ba và các kiểu khácPhối màu hài hòa là chọn các tông màu cách nhau những góc cố định trên bánh xe màu: 180° với màu bổ túc, 30° với màu tương đồng, 120° với bộ ba. Hãy xoay tông màu trong OKLCH thay vì HSL, khi đó các màu sáng ngang nhau và không có tông nào vô tình nổi bật hẳn lên.28 tháng 9, 20267 phút đọc
- CSS color-mix() và màu tương đối: màu nhạt, hover và độ trong suốtcolor-mix() pha hai màu trong không gian màu bạn chọn, còn cú pháp màu tương đối cho phép sửa một kênh của màu có sẵn, chẳng hạn oklch(from var(--brand) calc(l - 0.1) c h). Cả hai chạy trong trình duyệt, dùng được với biến CSS và thay thế hầu hết hàm màu của Sass. Pha trong oklab cho màu nhạt và hover, trong srgb cho độ trong suốt.28 tháng 9, 20268 phút đọc
- Bảng màu thân thiện với người mù màu: cách kiểm tra và sửa màuBảng màu thân thiện với người mù màu giữ cho mọi cặp màu vẫn phân biệt được với protanopia, deuteranopia, tritanopia và thang độ xám. Cách sửa chắc chắn nhất không phải là một sắc màu đặc biệt mà là khoảng cách độ sáng: các màu chênh nhau khoảng 0,2 về độ sáng OKLCH vẫn tách biệt trong mọi lần mô phỏng chúng tôi đã chạy. Hãy kết hợp điều đó với biểu tượng hoặc nhãn chữ, vì chỉ dùng màu thì luôn có người không nhận ra.28 tháng 9, 20268 phút đọc
- Màu Tailwind CSS: bảng màu OKLCH của v4, màu tùy chỉnh và các bậc màuTailwind CSS v4 có 26 thang màu, mỗi thang 11 bậc từ 50 đến 950, tổng cộng 286 màu được định nghĩa bằng OKLCH dưới dạng biến CSS như --color-blue-500. Bạn thêm màu riêng bằng @theme { --color-brand-500: oklch(...) }. Cùng một số bậc không có nghĩa là cùng độ sáng: blue-600 là màu xanh dương sáng nhất đạt 4,5:1 trên nền trắng, trong khi yellow phải lên đến 700.28 tháng 9, 20268 phút đọc