Phối màu bằng bánh xe màu sắc
Bấm vào vòng màu để đổi sắc độ của màu gốc.
Bảng phối màu
- ≈ Xanh hoàng gia #2F6FE0 rgb(47, 111, 224)
- ≈ Vàng nghệ #E09F2E rgb(224, 159, 46)
Bấm ổ khoá trên màu muốn giữ, rồi “Phối ngẫu nhiên” phần còn lại (hoặc nhấn phím cách).
Mở bảng này trong: Gradient · Kiểm tra tương phản
Bảng quá chói? Giảm độ bão hoà hoặc chọn kiểu “5 màu cho giao diện”.
Xem trước trên giao diện mẫu
-
Nền
-
Bề mặt
-
Chữ
-
Màu chính
-
Màu nhấn
Vai trò lấy theo tên biến (background, surface, text, primary, accent); màu chưa đặt tên được đoán theo độ sáng và độ rực.
- – Chữ trên nền: Tìm màu đạt chuẩn
- – Chữ trên bề mặt: Tìm màu đạt chuẩn
- – Link (màu chính) trên nền: Tìm màu đạt chuẩn
- – Chữ trên nút chính: Tìm màu đạt chuẩn
- – Chữ trên nhãn màu nhấn: Tìm màu đạt chuẩn
Chỉnh bảng màu
Sửa từng màu, đổi thứ tự, thêm bớt (tối đa 10 màu) và đặt tên biến như primary, text, surface để xuất CSS/JSON đúng tên.
Nhận danh sách HEX, rgb(), hsl(), biến CSS (--tên: màu) hoặc JSON — ví dụ chép từ Figma, file CSS hay bảng màu của đồng nghiệp.
Bộ phối màu đẹp có sẵn
Bấm vào một bộ phối để đưa lên bảng phía trên, rồi sao chép từng mã hoặc xuất cả bảng. Tên chủ đề chỉ là gợi ý phong cách, không phải bảng màu chính thức của nền tảng hay thương hiệu nào.
Bánh xe màu sắc là gì?
Bánh xe màu sắc (vòng tròn màu) sắp xếp các sắc độ theo một vòng 360°: đỏ ở 0°, vàng 60°, xanh lá 120°, xanh lơ 180°, xanh dương 240°, hồng tím 300°. Quan hệ vị trí giữa các màu trên vòng tròn là cơ sở của mọi quy tắc phối màu: hai màu càng xa nhau càng tương phản, càng gần nhau càng hài hoà.
Cách dùng công cụ phối màu
- Nhập mã màu gốc (thường là màu thương hiệu hoặc màu chủ đạo), hoặc bấm thẳng lên vòng màu. Chưa có màu gốc? Có thể hút màu từ một bức ảnh bạn thích.
- Chọn một quy tắc phối. Các chấm tròn trên bánh xe cho thấy vị trí từng màu.
- Chưa có ý tưởng? Bấm Phối ngẫu nhiên, hoặc chọn một trong 16 bộ phối có sẵn bên dưới công cụ.
- Bấm vào ô màu để sao chép từng mã, hoặc sao chép cả bảng dưới dạng danh sách HEX, biến CSS, mảng JSON hay khối
@themecủa Tailwind v4.
Sáu quy tắc phối màu
| Quy tắc | Vị trí trên bánh xe | Cảm giác | Nên dùng khi |
|---|---|---|---|
| Bổ túc (tương phản) | Hai màu đối diện, cách 180° | Mạnh, nổi bật | Cần nút kêu gọi hành động thật nổi trên nền màu chủ đạo |
| Tương đồng | Ba màu liền kề, cách nhau 30° | Êm, tự nhiên | Nền, minh hoạ, giao diện thư giãn |
| Bộ ba | Ba màu cách đều 120° | Sinh động, cân bằng | Thiết kế cho trẻ em, infographic nhiều hạng mục |
| Bổ túc xẻ | Màu gốc và hai màu kề màu đối diện (150°, 210°) | Tương phản nhưng dịu hơn bổ túc | Người mới phối màu: khó sai hơn cặp bổ túc |
| Bộ bốn | Bốn màu cách đều 90° | Phong phú, dễ rối | Biểu đồ, bảng điều khiển cần nhiều màu phân biệt |
| Đơn sắc | Một sắc độ, đổi độ sáng | Tinh tế, thống nhất | Giao diện tối giản, thang màu cho hệ thống thiết kế |
Màu tương phản với một màu là màu nào?
Màu tương phản (màu bổ túc) nằm đối diện trên bánh xe, tức cộng 180° vào sắc độ: tương phản với đỏ là xanh lơ, với xanh dương là vàng, với xanh lá là hồng tím. Công cụ này dùng bánh xe RGB/HSL của màn hình. Trong hội hoạ truyền thống (bánh xe RYB), các cặp quen thuộc hơi khác: đỏ – xanh lá, vàng – tím, xanh dương – cam.
Mẹo dùng bảng phối: quy tắc 60 – 30 – 10
Đừng chia đều các màu. Dành khoảng 60% diện tích cho màu chủ đạo (thường là màu trung tính hoặc màu nhạt nhất), 30% cho màu phụ và 10% cho màu nhấn — thường chính là màu bổ túc. Sau khi chọn màu chữ và nền, hãy kiểm tra độ tương phản để bảo đảm dễ đọc.
