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.
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.