Search DevTools

Jump to any tool or page

Color Palette Generator

Create beautiful color palettes for your designs from a base color and a harmony rule.

Settings

Swatch count
Copy palette

Palette

4 colors — click a value to copy

Understanding color harmonies

Monochromatic

Creates a cohesive look using various shades, tones, and tints of a single base color. Perfect for minimalistic designs and creating subtle, sophisticated palettes.

Analogous

Combines colors that sit next to each other on the color wheel, creating serene and comfortable designs. Ideal for creating harmonious, natural-looking color schemes.

Complementary

Pairs colors from opposite sides of the color wheel for high contrast and vibrant effects. Great for creating visual interest and making elements stand out.

Triadic

Uses three colors evenly spaced around the color wheel, offering strong visual contrast while maintaining harmony. Provides more variety than complementary schemes.

Tetradic

Employs four colors arranged into two complementary pairs, offering rich color variety. Best used when you want to use multiple colors in your design.

Split Complementary

A variation of complementary that uses a base color plus two adjacent colors to its complement. Offers strong visual contrast with less tension than straight complementary.

Visual Creation

About Color Palette Generator

Build colour palettes from a base colour, generate tints and shades, and check pairings for readable contrast. HSL is the trap here: two colours at identical lightness can differ enormously in perceived brightness, because HSL's L is an arithmetic construct over RGB rather than a model of how human vision responds to light.

Related Visual Creation tools

Resume BuilderChart GeneratorSVG AnimatorIndian MapOpen Graph Image Generator

Frequently asked questions

What contrast ratios does WCAG actually require?
For AA, body text needs 4.5:1 against its background and large text 3:1, where large means 18.66px bold or 24px regular and above. AAA raises those to 7:1 and 4.5:1. Non-text elements — form field borders, icons carrying meaning, focus indicators — need 3:1 under WCAG 2.1. The ratio is computed from relative luminance with a fixed offset, ranging from 1:1 to 21:1. Note that it ignores hue entirely, so two colours can pass while remaining indistinguishable to a colour-blind reader.
Why does HSL lightness not match perceived lightness?
HSL derives L as the midpoint between the largest and smallest RGB channel, which is arithmetic on gamma-encoded values, not a perceptual measurement. Human vision is far more sensitive to green than to blue, so hsl(60 100% 50%) yellow and hsl(240 100% 50%) blue share an L of fifty percent while differing by roughly a factor of ten in luminance. This is why a palette built by holding L constant across hues produces some swatches that look washed out and others that read almost black.
What does OKLCH fix, and can I use it now?
OKLCH is a perceptually uniform space where L genuinely tracks perceived lightness and C tracks chroma independently of hue. Holding L fixed while rotating H yields swatches that look equally bright, so a tonal ramp built by stepping L produces even visual spacing — something impossible in HSL. It also covers colours outside sRGB for wide-gamut displays. Browser support has been broad since 2023, and a hex fallback via a preceding declaration covers older engines with no build step.
Why does my palette fall apart in dark mode?
Contrast is not symmetric in perception. Light text on a dark ground appears to bloom outward, so a weight and saturation that read well on white look heavy and glaring inverted. Pure white on pure black technically scores 21:1 yet causes visible halation for many readers, particularly those with astigmatism. Saturated colours also shift: a mid-blue with adequate contrast on white often fails against dark grey. Build the dark palette as its own set of tokens rather than programmatically inverting the light one.
How do I check a palette for colour vision deficiency?
Around eight percent of men have some form, most commonly deuteranomaly, which compresses red and green towards a shared yellow-brown. So a red-versus-green status pair — the most common encoding in dashboards — collapses to two similar swatches. Simulate with a CVD filter, but the durable fix is redundant encoding: pair colour with an icon, a label, or a pattern so the colour is reinforcement rather than the sole channel. Differences in lightness survive every deficiency type; differences in hue alone do not.