Generate color palettes from any hex - 5 harmony modes, WCAG AA/AAA contrast checker, lock individual colors, export as CSS, Tailwind, or JSON. Free.
Who Uses Color Picker / Palette Generator
Graphic designers exploring color harmonies for brand identity projects and client presentations. Web developers generating accessible color schemes that pass WCAG contrast requirements. Interior decorators visualizing complementary palettes for room mood boards. Startup founders building consistent brand guidelines with exportable CSS and Tailwind tokens.
Color Picker / Palette Generator Features
- 5 Harmony Modes: Analogous, Complementary, Triadic, Split-Complementary, and Tetradic palettes
- WCAG Contrast Checker: Check every color pair against AA (4.5:1) and AAA (7:1) accessibility standards
- CSS, Tailwind & JSON Export: Export palettes as CSS variables, Tailwind config, or JSON with one click
- Random Inspiration: Generate random palettes with one click when you need fresh ideas
- Click-to-Copy: Copy any HEX code instantly by clicking on a color swatch
How to Use Color Picker / Palette Generator
Create beautiful color palettes in three steps
- Pick Base Color: Use the visual picker or type a HEX code to set your starting color
- Choose Harmony: Select from 5 modes: Analogous, Complementary, Triadic, Split-Comp, or Tetradic
- Export & Use: Copy color codes, check WCAG contrast, or export as CSS/Tailwind/JSON
Frequently Asked Questions
Is the Color Palette Generator free?
Yes, generate unlimited palettes across all 5 harmony modes with no signup. CSS, Tailwind, and JSON exports plus WCAG contrast checking are all included free.
What harmony modes are available?
5 modes: Analogous (similar hues), Complementary (opposite), Triadic (3 equidistant), Split-Complementary, and Tetradic (4 colors). Each creates a different visual feel.
What is the WCAG Contrast Checker?
It checks every pair of colors in your palette against WCAG accessibility standards. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1. Passing makes text readable for more people.
Can I export for Tailwind CSS?
Yes, export your palette as a ready-to-paste Tailwind config with named color tokens (primary, secondary, tertiary, accent, muted).
How do I use the random palette feature?
Tap 'Random palette' (or press the space bar) to get a completely new base color with harmonious variations. Great for creative exploration.
Is my data safe?
Yes. Color calculations and palette generation run entirely via JavaScript in your browser. Your color selections, exported palettes, and WCAG contrast results are never sent to any server.
Related: color palette generator, color scheme generator, complementary color generator, wcag contrast checker, tailwind color palette, accessible color palette