Color Palette Generator
Explore color theory palettes, match hex swatches, and audit WCAG contrast accessibility scores.
Dynamic Palettes
Press spacebar on page to randomize colors. Hover and lock/unlock columns.Trending Colors
Curated popular palette collections. Click any palette to load it into the active generator workspace (respects locks).
Palette logic handles calculations entirely inside JavaScript variables. Dials process parameters locally.
How to use color palettes?
Step 1: Explore dynamic theory presets
Browse color harmonies using the Category presets (Monochromatic, Analogous, Complementary, Triadic). Use the refresh keys to randomize and generate trending color schemes.
Step 2: Customize hex and swatch parameters
Click any color slot to activate the Tuner controls. Use the color sliders (Hue, Saturation, Lightness) to customize the hex values and inspect WCAG accessibility contrast ratios instantly.
Step 3: Extract swatches from image assets
Upload or drop image files into the Image Swatch Extractor area. The canvas processor reads the pixel coordinates to automatically isolate and compile the dominant color palette offline.
Can I export palettes for CSS or Tailwind?
Yes! The Export panel on the right allows copying your current color palette as a JSON array, CSS Variables stylesheet block, or a Tailwind CSS configuration object.