Color Palette Generator

Generate color combinations, lock your favorites, and refine your palette.

All color tools
Hydrogen Blue
Palace Intrigue
Frosted Jade
Savon de Provence
Tint of Earth

Lock favorites, edit a shade, or move it into place. Press Space to generate.

See colors in use
Your paletteGood things.
Thoughtfully made.

A quiet place for your next idea. See how this palette carries a headline, a paragraph, and a call to action.

Explore the collection
Interface studyYour next chapter
Shape the first ideaReady for review
Project name A fresh perspective
How these roles work together
  • Body text6.65:1 · AA text
  • Accent on background2.15:1 · Below AA text
  • Button label5.00:1 · AA text
Sample text pair · 6.65:1. Roles are suggested; check your final design.
Background #EDD9B6Text #34486BAccent #7C9AAA
FORM & FIELDJournal · Studio
A fresh perspective

Make room
for good things.

Thoughtful ideas, everyday objects, and a little space to create.

Explore the collection
Background #EDD9B6Text #34486BAccent #CD927C

Readability

Body text4.5:1 target6.65:1 Pass
Accent on background3:1 target1.90:1 Needs work
Button label4.5:1 target5.66:1 Pass

Some sample pairs need more contrast. Improve contrast adjusts unlocked colors.

Checks apply to the sample pairs shown. Check your final text sizes and layout.

Download

A palette image for sharing.

Saved work (0)

Save your first palette above. Its colors and settings will be ready to reopen.

Saved on this device with its settings. Download a project to keep a backup or import it on another device.

Refine palette

Explore freely, or choose a website to generate colors for specific roles.

Edit color

Paste a HEX, RGB, or HSL color.

Start with your colors

This replaces the palette and clears its locks. Undo restores your previous palette.

How to generate a color palette
  1. Generate or press Space to explore the full palette. Choose 2–10 colors and a direction in the toolbar above the palette. Styles explore a look; color harmonies use the same RGB color wheel as Color Wheel. Lock a base color to generate around it. The first locked color with a hue sets the harmony; other locked colors stay exact. Under Refine palette, choose Light website or Dark website to generate background, text, accent, and surface colors with measured contrast. Your locked colors take priority.
  2. Edit a color using HEX, RGB, HSL, or the picker. On phones, the numbered overview strip also opens each color for editing. Lock favorites to keep them exact. Remix changes one unlocked color. Under Refine palette, Subtle variation stays close to your colors; Paste colors accepts HEX lists or CSS variables.
  3. Compare options shows three alternatives using your direction and locked colors. See colors in use opens design examples and readability checks below the palette. Improve contrast adjusts unlocked colors for the sample pairs.
  4. Undo and Redo restore colors, locks, direction, and website settings. Download PNG, SVG, PDF, ASE, CSV, CSS, Tailwind CSS v4, or JSON from the area below the palette. Copy design CSS in the preview includes the sample background, text, accent, and button-label colors.
  5. Below the palette, name and save your work on this device, or use Share to create a link with the same settings. Download a project JSON for an editable backup you can import later.

For a light website with an existing blue accent, choose Light website, edit the third color, and lock it. Generate a background, text, and supporting shades. Compare the design previews, check any flagged pairs, and use Subtle variation to refine a promising result. The checks cover the displayed pairs; check your final layout too.