PALColor Palette Generator
Generate complementary, analogous, triadic, tetradic, and monochromatic palettes from any base color with HEX/RGB/HSL output
Color Theory Complete Guide
From a single base color, instantly generate harmonious palettes — complementary, analogous, triadic, tetradic, monochromatic, and more — ready for your design system. Built on color wheel theory; HEX, RGB, and HSL output for every swatch with one-click copy to CSS or design tools.
Color Theory Basics — RGB / HSL / Color Wheel
- RGB: Red, Green, Blue — additive color mixing for digital screens. Each channel ranges 0–255.
- HSL: Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Far more intuitive than RGB for adjusting colors.
- Color Wheel: HSL Hue values arranged in a circle. Complementary = 180° apart; analogous = 30–60° adjacent; triadic = 120° apart.
Palette Types — Complementary / Analogous / Triadic Full Comparison
| Palette | Angle | Feel | Best For |
|---|---|---|---|
| Complementary | 180° | Strong contrast | CTA buttons, focal emphasis |
| Analogous | 30–60° | Soft, unified | Backgrounds, overall layouts |
| Triadic | 120° | Vibrant, balanced | Children's apps, game UI |
| Tetradic | 90° | Rich, complex | Art, advertising, illustration |
| Split-Complementary | 150°+30° | Contrast + harmony | Refined emphasis |
| Monochromatic | Same hue | Refined, minimal | Premium brands, enterprise UI |
Applying Palettes — Figma / CSS Variables
- Figma: Copy each HEX value → register as Color Styles. Use Color Variables for design token management.
- CSS Variables:
:root { --color-primary: #3b82f6; }for global use. Override values in[data-theme='dark']for dark mode. - Tailwind CSS: Register HEX values in
tailwind.config.jsunderextend.colors.
Accessibility — WCAG Contrast Standards
WCAG 2.1 contrast requirements:
- AA: 4.5:1 for normal text; 3:1 for large text (18pt+)
- AAA: 7:1 for normal text (highest accessibility)
- Default to dark text on light backgrounds (Lightness 50%+) and light text on dark backgrounds.
- Monochromatic palettes are especially prone to low contrast — always verify ratios.
FAQ
Use complementary for emphasis and CTAs; use analogous for backgrounds and layouts where harmony matters. Complementary causes faster visual fatigue — use it sparingly.
Yes. Copy each HEX value from the color cards and paste into Figma Color Styles. Managing them as Variables (semantic tokens like --color-primary) is even more efficient.
HSL lets you adjust hue, saturation, and lightness independently, making color tweaks far more intuitive. Changing just the L value adjusts brightness while keeping the same hue.
Currently you can copy the full HEX list to clipboard using the copy button. Paste those values directly into a CSS file or text document to save them.