Color Palette Generator
Generate harmonious color palettes from one base color: monochromatic, analogous, complementary, triadic and tints & shades. Click any swatch to copy its HEX value.
How to use
- Pick a base color in the color picker, or type a hex value such as #4f46e5 or #345 into the text box.
- Five palettes are generated around your base color: monochromatic, analogous, complementary, triadic, plus tints & shades.
- Click any swatch to copy its HEX value to the clipboard: the value is shown right inside the swatch.
- To grab everything at once, click "Copy all HEX values": one color per line, ready to paste into design docs or code.
- Monochromatic keeps hue and saturation while shifting lightness; tints & shades instead mix the base color toward pure white and black.
FAQ
What do the five palette types mean?
How are the generated colors calculated?
Why is my entered color not recognized?
Where can I use the copied values?
How to use
- Set the base color
Pick a color in the picker, or type a hex value like #4f46e5 or #345 into the text box. The leading hash is optional, and the palettes update instantly.
- Browse the five palettes
The tool derives monochromatic, analogous, complementary, triadic and tints & shades rows from your base color. Each group has its own visual character.
- Click a swatch to copy
Every swatch shows its HEX value inside. Clicking one copies that single color, ready to paste into CSS, Figma or any design tool.
- Copy all HEX at once
Need the whole set? Press Copy all HEX values to place every color on its own line, ready for style guides or code variables.
About this tool
Color Palette Generator expands one base color into five ready-made, harmonious palettes. It first converts your hex value to the HSL model. Monochromatic rows vary only lightness for a unified look. Analogous colors rotate the hue within about 30 degrees for a soft feel. Complementary takes the color opposite yours for maximum contrast. Triadic places three hues 120 degrees apart. Tints & shades blends the base linearly toward pure white and black. Results are converted back to HEX for easy reuse.
It is aimed at web and app UI work. Derive button, hover, border and background colors from a single brand hue without guessing. Poster, slide and dashboard design benefit the same way. The output is a mechanical rotation of the color wheel. Before finalizing any text-on-color combination, run it through a contrast checker and confirm it meets your accessibility target.
How it works
The five palettes are fixed geometry on the color wheel: analogous rotates roughly 30 degrees, complementary 180, triadic 120. These angles come from Itten's color theory of the early twentieth century, which still anchors interface palettes today. The tool converts your HEX to HSL and rotates only the hue channel. Saturation and lightness stay untouched, so every generated color carries the same intensity as your base. For a calmer interface, lower the saturation across the board and fine-tune from there.
Tints and shades are linear interpolation toward pure white and black. Each channel moves toward 255 for tints and scales by (1-t) for shades. Linear mixing reads slightly gray, because human lightness perception follows a gamma-like curve rather than a straight line. That is why design systems often build scales in a perceptual space such as OKLCH. The linear output here is fine for quick layering; refine it by hand when you polish a theme.
When to use it
- Reverse-engineer a brand
All you have is a logo and no style guide? Sample its dominant color and generate the five palettes. The complementary row supplies accents, and the ladder supplies background layers.
- Set the tone of a deck
Presentations need one strong color plus two light backgrounds. Take the palest two steps of the tints ladder for section and content slides, and the whole deck holds together.
- Draft theme variables
Paste the copied HEX values into code renamed as primary, surface and border. That gives you the skeleton of a theme file to iterate on, instead of a blank page.
Tips & tricks
- The text box accepts only 3- or 6-digit HEX. Values with alpha, such as 8-digit #RRGGBBAA, are not supported.
- Use the complementary row for strong accents and the tints & shades ladder to build background, card and divider layers.
- Generated light tints often fail WCAG thresholds. Verify any text pairing with a contrast checker before shipping.
Things to watch
- The angles are fixed
Analogous is always 30 degrees and triadic is always 120. When a generated color collides with an existing brand color, treat the output as a starting point and adjust by hand.
- Large complementary areas clash
Complementary contrast suits buttons and small accents. Spread across a background, the two colors fight each other. Desaturate before using them at scale, or switch to an analogous scheme.
- Dark bases break the shade row
When the base color is already deep, the shade ladder collapses toward black with no usable steps. Build hierarchy from the tint row, and reserve dark tones for borders and shadows.