Skip to content
PIXELVERSE

Color Palette Generator

Pick a base color or press the space bar. Lock the colors you like, keep rerolling the rest, and check every pair for contrast before you export.

Colors
5
16 42 67
W 14.64·B 1.43
46 111 149
W 5.49·B 3.82
156 197 161
W 1.92·B 10.91
233 238 242
W 1.16·B 17.97
242 177 52
W 1.88·B 11.11

Contrast between your colors

Text ↓ Bg →
–AAAAAAAAA
––AA–
AAA–––
AAAAA––
AAA–––

Each cell is the row color as text on the column color. AA is 4.5:1 for body text, Large is 3:1 for text 24px and up. Hover a cell for the exact ratio.

:root {
  --color-1: #102a43;
  --color-2: #2e6f95;
  --color-3: #9cc5a1;
  --color-4: #e9eef2;
  --color-5: #f2b134;
}
Share or save this paletteOpen as gradient

How to use the color palette generator

  1. Set a base color with the swatch, a HEX value or the eyedropper. Or press Space for a fresh palette.
  2. Choose a harmony: analogous for calm, complementary for tension, triadic or tetradic for range.
  3. Lock a color with the padlock. Space only rerolls the colors that are not locked. Ctrl+Z steps back.
  4. Read the contrast table to find which of your colors work as text on which backgrounds.
  5. Export as PNG or SVG for a mood board, or copy CSS variables, Tailwind @theme, SCSS or design tokens.

Why this generator works in OKLCH

Most palette tools rotate the hue in HSL. HSL is easy to compute but it is not how eyes work: a yellow and a blue with the same HSL lightness look nothing alike, so a rotated palette swings from glaring to murky. This generator rotates hue in OKLCH, a color space built so that equal steps look equal. Lightness stays where you expect, and the palette holds together.

Every palette is also spread across lightness on purpose: there is always something dark enough for text and something light enough for a background. That is what makes a palette usable in an interface rather than only pretty in a row of swatches.

The harmonies

  • Analogous: neighbours on the color wheel, about 25° apart. Quiet, natural, easy to use.
  • Complementary: the base and its opposite. High energy; let one dominate.
  • Split complementary: the base and the two colors beside its opposite. Contrast with less strain.
  • Triadic and tetradic: three or four hues evenly spaced. Rich; give one color most of the area.
  • Monochromatic: one hue across lightness and saturation. Safe for interfaces and data.

Check contrast before you commit

Under the palette, the contrast table shows every color as text on every other color, graded against WCAG 2.2: AA needs 4.5:1 for body text and 3:1 for large text. Each swatch also shows its ratio against white (W) and black (B). If a pair you need fails, open the contrast checker, which suggests the nearest color that passes.

Take the palette further

Press Keep all to put the palette on your Color Shelf, and every PIXELVERSE tool can use those colors: gradients, QR codes, shadows. To turn one brand color into a full set of shades, use the Tailwind scale generator. The address bar always holds the current palette, so copying the link shares exactly what you see.

Questions

Is the color palette generator free?

Yes. Every feature is free and there is no account. Palettes are saved in the link and, if you keep colors on the shelf, in your own browser.

How do I keep a color while generating new ones?

Click the padlock on that swatch. Pressing Space or Generate only replaces unlocked colors, and the first locked color becomes the base for the harmony.

Can I see how my palette looks to color-blind people?

Yes. Use 'Preview as' to view the palette with protanopia, deuteranopia, tritanopia or achromatopsia. Your exported values stay the real colors.

What export formats are there?

PNG (1600 × 900 with HEX, RGB and HSL labels), SVG, CSS custom properties, Tailwind v4 @theme, SCSS variables, W3C design tokens JSON and a plain array.