mockstack.

Color Palette Generator

HARMONIES · RAMP ← Web & Brand

Harmonies, a tint and shade ramp, and the CSS variables to paste.

Harmony
From image Pulls the dominant colors out of a logo or photo

Dots are your palette; the shape they make is the harmony. Drag the gold-ringed dot to move the base, or drag any secondary to adjust it.

Dragging a secondary

Palette

Tint and shade ramp

Status colors

Success, warning, danger and info, pulled toward your base's saturation and lightness so alerts belong to the brand instead of fighting it.

Neutrals

Grays with a whisper of your base hue. Pure gray reads dead next to a strong brand color; tinted neutrals are what shipped design systems actually use.

Color blindness preview

About 1 in 12 men and 1 in 200 women see color differently. Each strip below is your palette as someone with that type of color blindness sees it, so the strips will not match the wheel. That is the point: what matters is whether your colors still look different from each other.

Same base, other directions

Saved Palettes

Saved in this browser only. Click one to load it.

Pairings

CSS variables 



    
Tailwind 

    

  

      

    

  


  

    READY
    
    PALETTE SAVED TO URL · SHARE THE LINK
    
    RUNS LOCALLY
  











  
About the Color Palette Generator

  
Builds a working color palette in your browser: pick a base on the wheel or pull one from an image, choose a harmony, and leave with tints, shades, status colors and the exact variables to paste into a stylesheet.

  
Every Setting

  

    
Base
The anchor color. Drag it on the wheel, type a hex, or press Random for a defensible starting point.

    
Harmony
How the companion colors relate to the base: complementary, analogous, triadic, tetradic, split complement or monochrome. Every generated color stays draggable afterward.

    
From Image
Drop a photo or logo and its dominant colors become the working palette.

    
Tint and Shade Ramp
Each palette color expanded into the light-to-dark steps a design system actually needs.

    
Status Colors
Success, warning and danger tuned to sit next to your palette. The hues are convention: green means done, red means stop.

    
Color Blindness Preview
The palette rendered through three kinds of color vision deficiency, so you can spot pairs that collapse into the same color.

    
Export
Copy the palette as stylesheet variables or utility-class config, download it as a PNG swatch sheet, or click any chip to copy its hex. The share link carries the whole state.

    
Saved Palettes
Palettes saved in your browser, restorable with a click.

  

  
Common Questions

  

    
Can I extract colors from a photo?
Yes. Drop an image and the dominant colors become the working palette.

    
What formats does it export?
Stylesheet variables and utility-class config to copy, a PNG swatch sheet to download, and single hex values from any chip.

  

  
Related: Contrast Checker, Gradient Generator.