Bảng màu

Công cụ tạo sắc độ màu

Chọn một màu và xem ngay toàn bộ sắc độ của nó, từ nhạt nhất đến đậm nhất. Chạm vào một sắc độ để sao chép mã HEX.

Thang màu từ 50 đến 950

Mười một sắc độ cùng một họ màu, đánh số giống Tailwind. Màu của bạn được đánh dấu ở bậc phù hợp nhất.

Sắc nhạt (pha trắng)

Chạm vào một sắc độ để sao chép mã HEX.

Sắc đậm (pha đen)

Sắc trầm (pha xám)

Xuất thang màu

Sắc độ màu là gì

Đó là chuỗi các sắc độ đi ra từ cùng một màu: từ gần như trắng đến gần như đen. Tất cả có chung một sắc màu gốc, nên luôn phối với nhau rất dễ.

Sắc nhạt, sắc đậm và sắc trầm

Sắc nhạt là màu pha với trắng: sáng và dịu hơn. Sắc đậm là màu pha với đen: tối và sâu hơn. Sắc trầm là màu pha với xám: nhẹ nhàng và thanh lịch hơn.

Cách dùng thang màu trong thiết kế

Dùng các bậc nhạt (50 đến 200) cho nền, bậc giữa (400 đến 600) cho nút và liên kết, bậc đậm (700 đến 950) cho chữ và viền. Chỉ một thang màu là đủ để giao diện gọn gàng và nhất quán.

Câu hỏi thường gặp

Thang màu được tính như thế nào?

Chúng tôi dùng không gian màu OKLCH, mô phỏng cách mắt người cảm nhận độ sáng. Nhờ vậy các bậc trông đều nhau, không bị nhảy đột ngột.

Các số từ 50 đến 950 nghĩa là gì?

Đó là thang mà Tailwind CSS và nhiều hệ thống thiết kế dùng: 50 là sắc nhạt nhất và 950 là sắc đậm nhất. Màu của bạn nằm ở số phù hợp nhất.

Tôi có dùng thang màu trong Tailwind hoặc CSS được không?

Được. Nhập tên, chọn định dạng và sao chép mã: biến CSS dán vào là dùng được, hoặc khối colors cho cấu hình Tailwind.

Thang màu và bảng màu khác nhau thế nào?

Thang màu là các sắc độ của một màu. Bảng màu kết hợp nhiều màu khác nhau hợp với nhau. Nhiều bảng màu dùng một thang màu cho nền và chữ, thêm một hai màu nhấn.

Hướng dẫn và công cụ khác