Design with a starting point

Color Palette Generator

Build a website palette from one color. Explore six color harmonies, keep the swatches you love, and check real text contrast before exporting your colors.

Accepts #ABC, #AABBCC, rgb(232, 111, 102), or hsl(4, 74%, 65%). Opaque colors only; maximum 80 characters.

Analogous: neighboring hues, with varied saturation and lightness.

The seed anchors color 1. Locked colors survive generation. Changing the color count takes effect when you generate. Undo keeps your last 20 palette changes in this tab.

Your starting palette appears here when JavaScript loads.

Your palette

Import an existing palette

Paste 2–8 supported colors, one per line (maximum 800 characters). Import replaces the palette and clears its locks. Duplicate colors are allowed. Undo can restore the previous palette.

Check a text pair

Make every word count.This is 16px body text in your selected colors.

Large text is at least 24px regular or about 18.67px bold. Ratios below are truncated to two decimals; pass/fail uses full precision. A passing pair does not certify the whole design.

All palette pairs

Highest contrast first. Each unordered pair appears once. “Pass” means at least 4.5:1 for AA normal text. Preview a pair for all four text thresholds.

Palette contrast pairs
ColorsRatioAA textView

Use your palette

If browser copying is unavailable, select this text and press Ctrl+C or Command+C. Exports contain opaque sRGB colors. Downloading creates a file only on your device.

Build a palette that works on a website

  1. Start with a brand color, choose a harmony and generate 2–8 swatches. Random seed explores a new starting hue. Generate keeps the seed and varies the supporting colors.
  2. Lock favorites to preserve them, edit a color value or use its picker, and reorder colors with the left/right buttons. Editing a locked color is intentional and keeps it locked. Moving a color into position 1 makes it the new seed.
  3. Choose which color will be text and which will be its background. Check the pair table for workable combinations. A dark text color and a light surface are often useful additions to a brand palette.
  4. Copy or download CSS variables, SCSS, JSON, a hex list or an SVG sheet. Give colors meaningful roles in your project, such as text, surface and accent.

What the harmony modes mean

Analogous uses nearby hues. Complementary alternates a hue and its opposite. Split-complementary uses the hues 150° and 210° from the seed; triadic uses 120° and 240°; square uses 90° steps. Monochromatic keeps one hue and varies lightness. These relationships use the CSS HSL wheel, not a painter’s RYB wheel. Extra swatches repeat the harmony’s hues with different saturation and lightness.

How to read the contrast results

The calculation follows WCAG 2.2 relative luminance for opaque sRGB colors. AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1 respectively. The W3C contrast guidance explains the thresholds and exceptions. Black or white on each swatch is chosen by the higher measured ratio.

Limits and privacy

Harmony is a design starting point, not a guarantee of legibility or suitability for color-vision differences. HSL lightness is not perceptually uniform. Grayscale seeds stay neutral; black and white have no defined hue. This tool does not model transparency, gradients, photos, CMYK, Pantone, color-vision deficiencies or display calibration. HSL/RGB conversions are rounded to 8-bit sRGB.

Color parsing, generation, contrast checks and exports run in your browser. This tool sends no color values to a service, stores no palette in cookies or browser storage, and requests no browser permissions. The site’s shared analytics may still record page visits. Refreshing or closing the tab loses the palette; export it first. Reset restores the starting palette and clears the undo history and imported text.