Trình tạo sắc độ tối

Sắc độ tối, sắc độ sáng và tông trầm

• Sắc độ tối (shade): màu + đen → đậm hơn.
• Sắc độ sáng (tint): màu + trắng → nhạt hơn.
• Tông trầm (tone): màu + xám → ít bão hòa hơn.

Trình tạo này tạo cả sắc độ tối và sắc độ sáng từ cùng một màu gốc. Cặp sắc độ sáng và sắc độ tối thường tạo thành một bảng màu của hệ thống thiết kế (ví dụ brand-100 đến brand-900, trong đó 500 là màu cơ bản).

Thang ví dụ: #3B82F6 (Tailwind blue-500)

Bảng trên là thang 5 bước: mỗi bước đi được một phần sáu quãng đường đến màu đen.

Cách các bước được tính

Công cụ nhân các kênh đỏ, lục và lam của màu gốc với cùng một hệ số ở mỗi bước. Điều đó tương đương với việc trộn với màu đen ở dải sắc độ tối và với màu trắng ở dải sắc độ sáng, theo bước đều nhau. Với 10 bước, mỗi bước tối hoặc sáng hơn bước trước khoảng 9 %.

Vì mọi kênh được nhân bằng nhau, tông màu của màu gốc được giữ chính xác: nền xanh dương vẫn xanh dương, nền xanh lục vẫn xanh lục. Trộn với màu đen cũng làm giảm độ bão hòa cùng lúc với độ sáng, nên các bước tối trông tự nhiên thay vì phát sáng. Chỉ giảm độ sáng mà không đụng đến độ bão hòa sẽ khiến màu tối bị bão hòa quá mức.

Dùng sắc độ tối trong giao diện

• Nút: dùng màu cơ bản cho trạng thái nghỉ, tối hơn 1-2 bước khi di chuột, tối hơn 2-3 bước khi kích hoạt/nhấn.
• Chữ nội dung: tối hơn màu cơ bản 2-3 bước để dễ đọc trên nền trắng; sáng hơn cho chữ phụ.
• Đường viền/đường phân cách: tối hơn nền 1-2 bước, đủ để phân định mà không quá lấn át.
• Bóng đổ: dùng bước tối nhất (hoặc tối hơn nữa) với độ alpha giảm thay vì một màu xám mới.
• Trực quan hóa dữ liệu: dùng các sắc độ tối của một tông màu duy nhất cho thang tuần tự (độ lớn giá trị), hoặc ghép sắc độ tối của hai tông màu cho thang phân kỳ (giá trị dương và âm).

Những lỗi thường gặp

• Quá nhiều bước sẽ dồn lại thành những dải không phân biệt được. Thang 10 bước hoạt động tốt vì mỗi bước tối hơn khoảng 9 %; với 20 bước, khác biệt trở nên tinh tế. Muốn tương phản mạnh, hãy dùng 3-5 bước.
• Không thể lệch tông màu ở đây: mỗi bước nhân đều mọi kênh, nên màu đỏ vẫn là đỏ, màu xanh lục vẫn là xanh lục. Lệch tông xảy ra khi nội suy giữa hai màu khác nhau, điều công cụ này không làm.
• Bỏ qua khả năng tiếp cận: các sắc độ trông hài hòa vẫn có thể không đạt độ tương phản WCAG so với nền. Luôn kiểm tra độ tương phản ở từng bước.
• Thang chỉ gồm sắc độ tối tạo cảm giác nặng nề trên nền tối. Hãy ghép với một thang sắc độ sáng để có chế độ tối dùng được.