Cách sử dụng
- Chọn Màu gốc bằng bảng chọn màu hoặc gõ mã HEX, ví dụ #3B82F6.
- Chọn Kiểu phối màu: Bổ sung, Bộ ba, Tương tự, Bổ sung chia, Bộ bốn hoặc Đơn sắc.
- Xem mã HEX và HSL của từng ô màu. Bấm vào một ô để sao chép mã HEX của nó.
- Bấm Sao chép tất cả HEX để lấy cả bảng màu, dán vào CSS, Figma, Canva hay tài liệu nhận diện thương hiệu.
Các kiểu phối màu hoạt động thế nào
Mỗi kiểu phối bắt đầu từ vị trí của màu gốc trên vòng tròn màu (sắc độ, từ 0 đến 360 độ) rồi thêm các màu ở những góc cố định. Độ bão hòa và độ sáng giữ nguyên như màu gốc nên các màu trông cùng một họ. Riêng Đơn sắc giữ nguyên sắc độ và chỉ thay đổi độ sáng.
Ví dụ, màu xanh mặc định #3B82F6 nằm ở sắc độ khoảng 217°. Màu bổ sung của nó là cam #F6AF3C, cách 180°; bộ ba gồm hồng #F63C83 và xanh lá #83F63C, mỗi màu cách nhau 120°.
| Kiểu phối | Số màu | Góc so với màu gốc | Cảm giác |
|---|---|---|---|
| Bổ sung | 2 | +180° | Tương phản mạnh, hợp làm một màu nhấn |
| Bổ sung chia | 3 | +150°, +210° | Tương phản nhưng dịu hơn |
| Bộ ba | 3 | +120°, +240° | Tươi, vui mắt |
| Tương tự | 4 | −30°, +30°, +60° | Êm dịu, tự nhiên |
| Bộ bốn | 4 | +90°, +180°, +270° | Phong phú; cần một màu chủ đạo |
| Đơn sắc | 5 | Cùng sắc độ, độ sáng −40 đến +40 | Gọn gàng, nhất quán |
Biến bảng màu thành thiết kế
Bảng màu là các lựa chọn, không phải quy định phải dùng mọi màu như nhau. Cách phổ biến là 60-30-10: khoảng 60% diện tích dùng màu trung tính hoặc màu sáng nhất, 30% dùng màu phụ và 10% dùng màu nhấn, thường là màu gốc hoặc màu bổ sung của nó. Dành màu mạnh nhất cho nút bấm và đường link để chúng nổi bật.
Bảng Đơn sắc giúp có ngay các sắc độ đồng bộ cho nền, viền, trạng thái khi rê chuột và chữ. Lưu ý bậc sáng nhất có thể thành trắng hẳn (#FFFFFF) và bậc tối nhất gần như đen khi màu gốc đã rất sáng hoặc rất tối; hãy chọn màu gốc có độ sáng vừa phải để có đủ năm sắc độ dùng được.
Kiểm tra độ tương phản trước khi dùng
Phối màu nói về việc các màu trông hợp nhau, không bảo đảm chữ đặt lên màu đó đọc được. Các màu có cùng độ sáng, như bộ ba ở trên, thường không đủ tương phản khi đặt chữ màu này lên nền màu kia. Trước khi dùng một cặp màu cho chữ và nền, hãy thử trong công cụ Kiểm Tra Tương Phản: WCAG yêu cầu tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn.
Câu hỏi thường gặp
Màu bổ sung là gì?
Là màu nằm đối diện trên vòng tròn màu, cách 180°. Xanh dương với cam, đỏ với xanh lơ là các cặp bổ sung. Chúng tạo tương phản sắc độ mạnh nhất.
Vì sao mã HEX của màu gốc thay đổi một chút?
Bảng màu được tính theo HSL với số nguyên, nên đổi ngược sang HEX có thể lệch một bậc ở một kênh màu, ví dụ #3B82F6 thành #3C83F6. Mắt thường không thấy khác biệt.
Dùng các màu này trong Tailwind hay CSS được không?
Được. Sao chép mã HEX để dùng làm biến CSS hoặc màu trong cấu hình Tailwind. Giá trị HSL cũng dán thẳng vào CSS dưới dạng hsl() được.
Có gì bị tải lên không?
Không. Bảng màu được tính trong trình duyệt của bạn.
