Máy tạo màu

Ví dụ về thang màu từ #3B82F6

Bảng dưới đây cho thấy công cụ tạo ra gì với 10 bước mặc định:

Sắc độ nhạt + đậm = thang hệ thống thiết kế

Kết hợp các sắc độ nhạt (sáng hơn) và sắc độ đậm (tối hơn) quanh một màu nền duy nhất để tạo thành thang đầy đủ:

• 50, 100, 200, 300, 400: sắc độ nhạt (từ sáng nhất đến nhạt hơn một chút so với màu nền)
• 500: màu nền
• 600, 700, 800, 900: sắc độ đậm (từ đậm hơn một chút so với màu nền đến tối nhất)

Điều này phù hợp với Tailwind, Material, Open Color, Radix UI và hầu hết các hệ thống thiết kế phổ biến. Thang 10-11 bước là tiêu chuẩn.

Nơi sắc độ nhạt tỏa sáng trong giao diện người dùng

• Nền cảnh báo và huy hiệu: chữ error-500 trên nền error-50 = nhận biết tức thì mà không gây chói mắt.
• Trạng thái di chuột trên nền tối: các nút trên bề mặt tối sẽ sáng dần về phía sắc độ nhạt hơn khi di chuột.
• Thang tuần tự trong trực quan hóa dữ liệu: ánh xạ giá trị sang màu, trong đó giá trị lớn thì bão hòa còn giá trị nhỏ nhạt dần về phía màu trắng.
• Phần giữ chỗ danh mục hình đại diện / biểu đồ: màu chính khi không có hình ảnh/dữ liệu.
• Lớp bề mặt: nền thẻ nhuốm màu thương hiệu một chút để tạo sự hiện diện tinh tế cho thương hiệu.

Vì sao các sắc độ sáng nhất mất độ bão hòa

Trình tạo trộn trực tiếp trong không gian RGB. Càng thêm trắng, độ bão hòa giảm nhanh hơn mức độ sáng cảm nhận tăng, nên các bước trên cùng trông nhợt nhạt hoặc xám. Đây là hành vi bình thường của phép trộn RGB:

• Trộn RGB (công cụ này): đơn giản và dễ đoán. Độ bão hòa nhạt dần đều; các bước rất sáng trông bị nhạt màu.
• Nội suy OKLCH hoặc LAB: phần mềm thiết kế dùng để giữ độ tươi màu ổn định hơn khi làm sáng. Công cụ này không cung cấp các mô hình đó; nếu cần sắc độ có màu ổn định, hãy tạo chúng bằng phần mềm thiết kế hỗ trợ OKLCH.
• Tăng độ sáng trong HSL: nâng độ sáng mà không trộn trắng; kết quả có thể trông như màu phấn thay vì như sơn.

Ngưỡng sắc độ tối thiểu cho giao diện dùng được

Các tông màu rất nhạt (bước 8+) gần giống với màu trắng tinh khiết và trở nên không thể phân biệt được bằng mắt thường trên nền trắng. Hữu ích như:

• Lựa chọn tinh tế làm nổi bật phía sau văn bản.
• Các sọc hàng gần như vô hình trong các bảng dày đặc.

Nhưng không tốt cho các nút hoặc nhãn mà người dùng cần thấy một màu riêng biệt. Ghép nối các tông màu sáng với phần tử tối hơn (đường viền, văn bản) để làm nền cho chúng.