How to Generate a Color Palette for Your Design

Color is one of the first things people notice about a website, app, or design. A well-chosen palette creates a cohesive, professional look. A poorly chosen one makes even good content feel off, and accessibility problems can quietly exclude millions of users. You do not need to be a designer to pick good colors. Color theory gives you reliable formulas, and tools that combine those formulas with accessibility checks make a usable palette a five-minute job.

A short history of color theory

Isaac Newton built the first color wheel around 1666, mapping the visible spectrum into a circle by bending the linear rainbow back on itself. Johann Wolfgang von Goethe expanded the idea in 1810 with his Theory of Colours, focusing on how colors feel rather than how they are physically composed. Albert Munsell systematised it in 1905 by separating hue, value, and chroma, giving designers a vocabulary for "darker red" vs "more saturated red."

The 20th century added perceptual color spaces. CIE Lab (1976) was the first to make "equal numerical distance equals equal perceived difference" a real goal. HSL and HSV (1978) gave programmers easier abstractions. Modern web design has moved toward OKLCH (2020) and OKLAB, perceptually-uniform color spaces that finally make "lightness 50%" actually look 50% bright, regardless of hue. The progression matters because it lets palette generators produce shades and tints that look consistent across colors, not just numerically related.

Color harmony modes

Harmony modes are based on the relationships between colors on the color wheel. Each one creates a different feeling:

Complementary, two colors directly opposite each other (e.g., blue and orange, red and green). High contrast, energetic. Good for call-to-action elements that need to stand out, but use sparingly because the tension can feel loud.

Analogous, three colors next to each other on the wheel (e.g., blue, blue-green, green). Harmonious and calming. Good for backgrounds, nature-themed designs, and palettes where everything should feel related.

Triadic, three colors evenly spaced around the wheel (e.g., red, yellow, blue). Vibrant and balanced. Good for playful, creative, or children's designs.

Split-complementary: a color plus the two colors adjacent to its complement. Similar contrast to complementary but with less tension; often more usable in interfaces.

Tetradic (or rectangle): four colors arranged as two complementary pairs. Rich and varied, but hard to balance; usually one color dominates and the others act as accents.

Square: four colors evenly spaced around the wheel. Maximum variety, equal emphasis. Difficult to use well unless three of the four are kept as small accents.

Monochromatic: different shades, tints, and tones of a single color. Always harmonious, sophisticated, but can lack visual interest if overused. Excellent for editorial layouts and minimalist brand systems.

Achromatic: black, white, and gray only. The classic newspaper or high-contrast magazine look. Often paired with a single bright accent.

How to generate a palette

1. Choose a harmony mode: select Random, Analogous, Complementary, Triadic, Split-complementary, Tetradic, or Monochromatic to set the relationships between colors.
2. Pick a starting color: enter a brand color, pull a color from a reference image, or let the generator pick one.
3. Lock colors you like: when you find a color you want to keep, lock it and regenerate the others until the full palette works together.
4. **Adjust lightness and saturation: most generators let you tune each color's lightness and saturation independently to make sure the palette has enough variation in brightness for UI work.
5. **Run an accessibility check: verify text-on-background combinations meet WCAG AA (4.5:1) or AAA (7:1) contrast.
6. **Export, copy the HEX codes, CSS variables, Tailwind config, ASE swatches, or save the palette as an image for design tools like Figma, Sketch, or Canva.

Building a usable palette

A palette is more than a set of pretty colors. For a real project, you usually need:

A common modern pattern is a 10-step lightness scale (50, 100, 200, ..., 900) for each colour, giving you enough nuance for buttons, hover states, disabled states, and dark-mode equivalents without manual fiddling.

Color spaces and how they affect palettes

The space you generate in shapes how the colors relate. Modern palette tools let you switch.

For most web work in 2024, generate in OKLCH and export to HEX for compatibility. CSS now accepts oklch() natively in modern browsers, so you can also keep the OKLCH values directly in your stylesheet for richer color manipulation.

Accessibility, not just aesthetics

A palette that looks gorgeous is useless if part of your audience cannot read it. Three checks turn a pretty palette into an inclusive one.

WCAG contrast ratios measure how distinguishable text is from its background. The standard thresholds:

Color blindness simulation: 8% of men and 0.5% of women have some form of color-vision deficiency, most commonly red-green. Run your palette through a simulator (deuteranopia, protanopia, tritanopia) to ensure information is not conveyed by color alone.

APCA (Advanced Perceptual Contrast Algorithm) is the candidate replacement for WCAG contrast in WCAG 3.0. It models perception better than the old formula and matters for text on subtly different backgrounds; use it as a second opinion alongside WCAG 2.x.

Tips for getting the best results

• **Start with one color, pick a primary color you like, then use a harmony mode to find colors that complement it. This is easier than trying to pick 5 colors independently.
• **Test on real content, a palette that looks great as swatches might not work when applied to actual text, buttons, and backgrounds. Always test with real UI.
• **Generate lightness scales, instead of choosing a single "blue," generate a 10-step scale from very light to very dark. Use the lighter steps for backgrounds, the darker ones for text, and the mid-range for accents.
• **Less is more, a design with 3 well-chosen colors looks more professional than one with 7. Use neutrals for most of the interface and save bold colors for what matters.
• **Pull from photography, eyedropper colours from a reference photo to get palettes that feel grounded in the real world. Tools like Coolors, Color Hunt, and dedicated photo extractors do this in a click.
• **Mind the dark mode, generate light and dark variants together. A primary color that works on white may glow uncomfortably on black; OKLCH lets you adjust just the lightness without shifting hue.
• **Save the rationale, document why each color is what it is (brand alignment, accessibility constraint, mood). Future-you will thank present-you.

Common pitfalls

• **Choosing colors in HSL but rendering in HSL, equal lightness values in HSL look unequal because the colour space does not match human perception. Yellow at 50% lightness looks much brighter than blue at 50%. Switch to OKLCH for uniform tints.
• **Relying on the color wheel alone, the wheel is a starting point, not a guarantee. Always check contrast with real text before committing.
• **Ignoring cultural meaning, red signals luck in China and warning in the West. White means purity in the West and mourning in parts of Asia. If you ship globally, research locally.
• **Too many shades of grey, four or five neutral steps usually cover everything from text to subtle borders. Twelve confuses everyone, including future you.
• **Pure black on pure white, the extreme contrast can cause eye strain. Use a near-black (#1A1A1A) on near-white (#FAFAFA) for long-form reading.
• **Untested combinations, a colour that passes contrast against the background does not automatically pass against every other surface. Test each pairing your design actually produces.
• **Single accent on a single page, one bold accent that pulls focus is good. Two accents fighting for attention is bad. Pick the one most important call-to-action.
• **Brand colours that fail accessibility, the company logo may use a low-contrast pairing for emotional reasons; the website cannot. Generate accessible variants for the UI and reserve the brand pairing for the logo lockup.
• **Forgetting links and visited states, both need to be distinguishable from body text and from each other. Test all three.
• **Letting the generator pick semantic colours, success/warning/error colours have cultural and accessibility expectations. Pick them by convention (green/amber/red) and verify they look right against your palette.

Alternative tools and approaches

For polished brand work, combine a palette generator with a contrast checker and a colour-blindness simulator. Tools that do all three in one place save the most time.

Privacy and the palette generator

The palette generator runs entirely in your browser. Any source image you upload for colour extraction is read with the FileReader API, sampled on an offscreen canvas, and discarded once the colours are extracted. Nothing is uploaded, nothing is logged, and the palette you build is not associated with you. For unannounced brand work, leaked mood-board imagery, or client photographs, that local-only flow keeps everything on your machine where it should be. For a task as routine as picking colours, the privacy default should be: nothing leaves the page, nothing is stored, nothing is shared.