Giới thiệu Tạo thang màu
Màu bất kỳ → thang 50–950, xuất CSS
Cách sử dụng
Biến một màu nền thành thang 50 đến 950 đầy đủ với CSS và Tailwind sẵn sàng dán.
Giới hạn
Các bậc dùng khoảng sáng cố định; màu gốc quá bão hoà sẽ bị cắt ở hai đầu.
Tạo thang màu
Vì sao cần thang 50–950
Một thang màu giúp một sắc độ phủ đủ nền, viền, chữ và trạng thái. Bậc 50 là màu nhạt nhất, 950 là đậm nhất, và 500 thường mang màu thương hiệu.
Các bậc đều nhau giúp hệ thống dễ bảo trì: khoảng cách giữa hai giá trị lân cận luôn dễ đoán trên mọi màn hình.
Cách tạo các bậc
Mỗi bậc nhắm tới một độ sáng trong OKLCH, nên thang giữ được độ đều về cảm nhận thay vì bị nén ở vùng tối. Độ bão hòa giảm ở hai đầu để màu nhạt sạch và màu đậm giàu hơn.
Câu hỏi thường gặp
Vì sao bậc 500 không đúng màu gốc?
500 nằm giữa thang và là mặc định an toàn cho nút, liên kết. Màu nhập vào có thể sáng hoặc tối hơn nên rơi vào bậc gần đó.
Có dùng CSS xuất ra ngay được không?
Có. Khối CSS định nghĩa --brand-50 đến --brand-950. Đổi tiền tố cho khớp hệ thống trước khi dán.
Màu xám có tạo được thang không?
Có. Màu ít bão hòa tạo thang trung tính gần như không lệch sắc, phù hợp cho chữ, viền và trạng thái vô hiệu.
Đường cong tương phản của thang
Lấy “藍 #104E8B” làm ví dụ: mười một bậc 50–950 được đo với chữ trắng và chữ đen. Màu xanh là đạt 4,5:1 — đủ chỗ cho chữ nội dung.
50
Chữ trắng 1.1
Chữ đen 17.2
100
Chữ trắng 1.2
Chữ đen 15.9
200
Chữ trắng 1.4
Chữ đen 13.3
300
Chữ trắng 1.8
Chữ đen 10.7
400
Chữ trắng 2.3
Chữ đen 8.1
500
Chữ trắng 3.4
Chữ đen 5.5
600
Chữ trắng 4.8
Chữ đen 4.0
700
Chữ trắng 6.7
Chữ đen 2.8
800
Chữ trắng 9.4
Chữ đen 2.0
900
Chữ trắng 13.0
Chữ đen 1.5
950
Chữ trắng 16.2
Chữ đen 1.2