Palette generator
Build a color palette from one color, with matching colors, full shade scales and CSS variables.
Neighbors on the color wheel: calm and cohesive.
--color-1 · base #e879f9
--color-2 · base #b09cfc
--color-3 · base #fb7cb8
CSS variables
:root {
--color-1: #e879f9;
--color-1-50: #fcebff;
--color-1-100: #f4bffc;
--color-1-200: #ee8bfe;
--color-1-300: #d668e7;
--color-1-400: #b84ac9;
--color-1-500: #9b2bac;
--color-1-600: #7b1589;
--color-1-700: #590964;
--color-1-800: #380440;
--color-2: #b09cfc;
--color-2-50: #f2f0ff;
--color-2-100: #d5cdfd;
--color-2-200: #baabf9;
--color-2-300: #9f8be9;
--color-2-400: #8570cc;
--color-2-500: #6b55af;
--color-2-600: #533b92;
--color-2-700: #3d2176;
--color-2-800: #28025b;
--color-3: #fb7cb8;
--color-3-50: #ffecf3;
--color-3-100: #fbc2d9;
--color-3-200: #fa92c1;
--color-3-300: #e86ba7;
--color-3-400: #c94f8c;
--color-3-500: #aa3271;
--color-3-600: #8d0f58;
--color-3-700: #66053e;
--color-3-800: #410326;
}Color theory, briefly
Palettes that work together
Color harmonies are simple rules based on positions on the color wheel. They don't guarantee a beautiful result, but they give you a set of colors that belong together, which is most of the work:
- Complementary: Opposite on the color wheel: strong contrast.
- Analogous: Neighbors on the color wheel: calm and cohesive.
- Triadic: Three hues evenly spaced: vibrant but balanced.
- Split complementary: A hue and the two neighbors of its opposite.
- Tetradic: Two complementary pairs: rich, needs a dominant color.
- Monochromatic: One hue in different lightness: simple and elegant.
From palette to design
A practical approach many designers use is the 60-30-10 rule: one dominant color for large areas (often a light shade or a neutral), a secondary color for about 30%, and an accent for the remaining 10%, such as buttons and links.
Use the shade scales for everything else: light shades for backgrounds and hover states, the middle for buttons and badges, dark shades for text. Always check text colors with the contrast checker; not every pretty shade is readable.
Why OKLCH makes better palettes
Older palette tools rotate hue in HSL, where yellow at 50% lightness looks far brighter than blue at 50%. ColorPeekr works in OKLCH, a color space built around how we actually see, so every color in a palette and every step in a scale has consistent visual weight.
More tools
Work with your colors
Color picker and converterPick a color and get HEX, RGB, HSL, HSB, CMYK and OKLCH, plus shades and harmonies. Contrast checkerCheck text and background colors against WCAG AA and AAA, and fix failing ones.
Frequently asked questions
How are the palettes generated?
From your base color, ColorPeekr rotates the hue around the color wheel according to the harmony you pick, keeping lightness and intensity the same. It works in the OKLCH color space, so the resulting colors look equally bright instead of some glowing and others looking muddy.
Which harmony should I use?
Analogous and monochromatic palettes feel calm and are the easiest to use well. Complementary gives the strongest contrast, good for a highlight color. Triadic and tetradic palettes are lively but work best with one dominant color and the others as accents.
What are the numbered shades for?
Each palette color comes with a scale from 50 (lightest) to 800 (darkest), like the scales in Tailwind CSS and other design systems. Light shades suit backgrounds, middle ones buttons and illustrations, dark ones text.
How do I use the CSS variables?
Copy the block into your stylesheet and use the colors with var(), for example color: var(--color-1-700). Rename the variables to something meaningful, like --brand or --accent, once you settle on a palette.
Can I build a palette around my brand color?
Yes: type or paste your brand color as the base. The first row is built from your exact color (its value is shown under the row), and the other colors are arranged around it.