🎨

Color Palette Generator (HSL Harmony)

Sinh bảng màu hài hoà từ màu chính dùng HSL color theory. 6 hệ chuẩn: Monochromatic, Analogous, Complementary, Triadic… + 10 shades & tints.

Màu chính

Hệ màu

Hiển thị shades & tints (10 bước)

Sinh bảng màu hài hoà từ màu chính dùng HSL color theory. Phù hợp design system, branding, UI mockup. 6 hệ màu chuẩn.

Color theory cơ bản

Color wheel (vòng màu) chia 360° thành các hue (sắc). Hai màu hài hoà khi đứng ở vị trí có quan hệ toán học với nhau.

Monochromatic (đơn sắc): 1 hue, đổi lightness. An toàn, minimal — dùng cho UI tinh giản.
Analogous (tương cận): 3-5 màu kề bên (±30°). Êm dịu, tự nhiên — dùng cho landing page calm.
Complementary (bổ túc): 2 màu đối diện (180°). Tương phản cao, draw attention — dùng cho CTA, alert.
Split-complementary: 3 màu — 1 chính + 2 màu cạnh đối diện. Mềm hơn complementary nhưng vẫn nổi bật.
Triadic (tam giác): 3 màu cách 120°. Cân bằng, vibrant — dùng cho game UI, kid app.
Tetradic (tứ giác): 4 màu cách 90°. Rich nhưng khó dùng — phải có 1 màu dominant.

Tool sinh thêm 10 sắc độ từ màu chính (như Tailwind 50-900):

Có thể dùng làm scale design system: --brand-50 → --brand-900.

60-30-10 rule: 60% màu chính, 30% màu thứ cấp, 10% màu nhấn. Đừng dùng tetradic 4 màu đều.
Brand color: chọn 1 màu mạnh (analogous với màu logo) làm primary. Còn lại neutral.
Verify contrast: pair palette text + bg → check qua Color Contrast Checker để pass WCAG.
Tools designer xài: Adobe Color, Coolors, Paletton. Tool này nhanh hơn cho dev cần palette tạm.