Color Palette Generator
Tạo bộ màu hài hoà cho thương hiệu
Sinh palette từ màu nền tảng — 4 mode harmony · export CSS variables
:root {
--color-1: #C20C8D;
--color-2: #C20C32;
--color-3: #C2410C;
--color-4: #C29C0C;
--color-5: #8DC20C;
}Hướng dẫn color palette
Chọn màu cho một cửa hàng nhỏ hay một bộ nhận diện đơn giản thường bị kẹt ở bước "chọn xong 1 màu chủ đạo rồi không biết phối thêm màu nào cho hợp". Công cụ này giải quyết đúng bước đó: chọn 1 màu gốc, chọn 1 kiểu phối màu, ra ngay 5 mã màu đi cùng nhau theo nguyên tắc bánh xe màu (color wheel), copy mã hex hoặc xuất luôn thành biến CSS để dán vào file thiết kế.
Toàn bộ phép tính chạy ngay trong trình duyệt bằng công thức chuyển đổi màu HSL chuẩn — không có bước gửi màu hay ảnh lên máy chủ nào, mở trang là dùng được ngay cả khi mất mạng giữa chừng (miễn trang đã tải xong).
Công cụ không kiểm tra độ tương phản chữ/nền theo chuẩn WCAG — nó chỉ sinh ra các màu hài hoà về sắc độ (hue) với màu gốc. Nếu cần chữ đọc rõ trên nền màu, anh/chị vẫn nên tự kiểm tra độ tương phản riêng trước khi dùng cho văn bản quan trọng.
4 kiểu phối màu công cụ hỗ trợ
Mỗi kiểu lệch góc hue (sắc độ, 0-360°) khác nhau quanh màu gốc, giữ nguyên độ bão hoà và độ sáng của màu gốc (trừ Monochromatic đổi độ sáng).
| Kiểu phối | Cách sinh 5 màu | Phù hợp khi |
|---|---|---|
| Analogous | Lệch hue −60°, −30°, 0°, +30°, +60° so với màu gốc | Muốn bộ màu êm, gần nhau, ít tương phản |
| Complementary | Lệch hue 0°, +30°, +180°, +210°, +240° | Muốn có 1-2 màu đối lập nổi bật để làm điểm nhấn |
| Triadic | Lệch hue 0°, +60°, +120°, +180°, +240° | Muốn bộ màu cân bằng, dàn đều quanh bánh xe màu |
| Monochromatic | Giữ nguyên hue và độ bão hoà, đổi độ sáng L = 85%, 70%, gốc, 30%, 15% | Muốn 1 tông màu duy nhất, chỉ khác đậm nhạt |
Cách dùng nhanh
- Chọn màu gốc bằng bảng màu (color picker) hoặc gõ trực tiếp mã hex, ví dụ #2563EB.
- Bấm 1 trong 4 nút kiểu phối — bảng 5 ô màu cập nhật ngay, không cần bấm nút tính.
- Bấm vào từng ô màu để copy mã hex của riêng ô đó vào clipboard.
- Bấm "Copy CSS" để lấy nguyên khối `:root { --color-1: ...; }` dán thẳng vào file CSS.
Khi bộ màu ra không như kỳ vọng
Vì công thức tính theo hue tuyệt đối trên bánh xe màu, một số màu gốc có độ bão hoà thấp (gần xám) hoặc quá tối/quá sáng sẽ sinh ra bộ 5 màu trông na ná nhau. Đó không phải lỗi — chỉnh lại độ bão hoà và độ sáng của màu gốc (kéo thanh trong color picker) trước khi chọn kiểu phối sẽ ra bộ màu rõ nét hơn.
Ví dụ: màu gốc #2563EB, chọn kiểu Complementary
- Màu gốc (HSL ≈ 221°, 83%, 53%): #2563EB
- Màu 1 — lệch hue +0°: #2563EB
- Màu 2 — lệch hue +30°: #4A25EB
- Màu 3 — lệch hue +180° (màu đối lập): #EBAD25
- Màu 4 — lệch hue +210°: #C6EB25
- Màu 5 — lệch hue +240°: #63EB25
Nhập đúng #2563EB và chọn Complementary trong công cụ sẽ ra đúng 5 mã hex trên (làm tròn theo công thức HSL→hex đang chạy trong code).
Lỗi thường gặp khi tính tay
- Dùng cả 5 màu của 1 bộ Complementary/Triadic làm màu nền văn bản như nhau — các màu này để phối tổng thể (nền, nút, điểm nhấn), không phải để dùng đồng đều cùng lúc trên 1 màn hình.
- Bỏ qua kiểm tra độ tương phản chữ/nền khi lấy màu nổi bật (ví dụ vàng #EBAD25) làm nền cho chữ trắng — công cụ không tự cảnh báo việc này.
- Đổi màu gốc liên tục nhưng quên đổi lại kiểu phối — với màu gốc gần xám, cả 4 kiểu phối cho kết quả gần giống nhau nên dễ tưởng công cụ không hoạt động.
- Copy mã hex xong dán thẳng vào phần mềm in ấn — mã hex là chuẩn màu hiển thị màn hình (RGB), in ấn cần quy đổi sang CMYK riêng, không dùng thẳng số hex.
Bạn có thắc mắc về Color Palette?
Công cụ tạo bảng màu này có gửi màu hoặc dữ liệu lên máy chủ không?+
Không. Toàn bộ phép tính chuyển đổi màu (HSL/hex) chạy ngay trong trình duyệt, không có bước gửi màu hay dữ liệu nào ra ngoài máy đang dùng.
Công cụ có kiểm tra độ tương phản WCAG cho chữ trên nền không?+
Không. Công cụ chỉ sinh 5 màu hài hoà theo sắc độ (hue) với màu gốc, không có bước kiểm tra độ tương phản — cần dùng riêng đủ nếu bắt buộc chuẩn tương phản cho văn bản.
4 kiểu phối màu Analogous/Complementary/Triadic/Monochromatic khác nhau thế nào?+
Khác ở góc lệch hue quanh màu gốc: Analogous lệch gần (±30-60°), Complementary có màu đối lập 180°, Triadic dàn đều 3 hướng, Monochromatic giữ nguyên hue chỉ đổi độ sáng.
Có xuất được bộ màu ra định dạng dùng trong code không?+
Có. Nút "Copy CSS" xuất nguyên khối biến CSS `:root { --color-1: ...; }` với đủ 5 mã màu, dán thẳng vào file CSS của dự án.
Mã hex xuất ra từ công cụ có dùng được cho in ấn không?+
Mã hex là chuẩn màu hiển thị màn hình (RGB). In ấn dùng hệ màu khác (CMYK), cần quy đổi riêng — không nên dán thẳng mã hex vào phần mềm thiết kế in mà không kiểm tra lại.
Vì sao chọn màu gốc gần xám thì 4 kiểu phối cho ra màu na ná nhau?+
Vì công thức phối theo hue, còn màu gần xám có độ bão hoà thấp nên dù đổi hue vẫn ra sắc thái nhạt tương tự. Tăng độ bão hoà của màu gốc trước khi chọn kiểu phối sẽ cho kết quả rõ nét hơn.
Web cho doanh nghiệp của bạn?
Webchốt là studio thiết kế web Next.js. Tools miễn phí. Service chuyên nghiệp khi cần.