Color Palette Generator (HSL Harmony)

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.

6 hệ màu chuẩn

• 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.

Shades & Tints

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

• Tints: trộn với trắng → nhạt hơn. Dùng cho background, hover state.
• Shades: trộn với đen → đậm hơn. Dùng cho text, dark mode.

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

Tip thực tế

• 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.