How to build a color palette from a photo

Step 2: extract a handful of colors

Extraction groups similar pixels and picks one representative color for each group. Five to eight colors is the useful range. Fewer is a tight scheme, and more starts to repeat.

Opalite does this from a photo or from a website address. You choose how many colors, from 3 to 8. It groups pixels with k-means clustering in the OKLab color space, keeps colors that are clearly separated, and orders them from dark to light. The same image gives the same palette each time. You can also sample single colors from a photo with the image picker, and choose which extracted colors to keep before saving them as a palette.

Step 3: assign roles

A palette is not a list of nice colors. It is a set of jobs. Give each color one:

• Background: usually the lightest, or the darkest for dark mode.
• Surface: a card or panel color slightly different from the background.
• Text: the darkest or lightest color, chosen for contrast.
• Primary: the main brand or action color.
• Accent: a smaller, brighter color for highlights.

You will probably find some roles missing. A photo of a sunset has no neutral gray, for example. Add one, tinted slightly toward the palette’s dominant hue.

Step 4: build lightness steps

Interfaces need several shades of each color: a pale tint for backgrounds, a mid-tone for fills, a dark shade for text. Build them by keeping the hue and chroma and changing only lightness, in even steps. This works best in OKLCH, where L is perceived lightness from 0 to 1, C is chroma, and H is hue in degrees.

Opalite’s Scale tool generates 11 steps named 50, 100, 200 through 900, and 950. They keep the base color’s OKLCH hue and chroma while lightness moves in even steps from 0.97 down to 0.17, 0.08 apart. When a vivid color cannot reach a step inside sRGB, it reduces the chroma to fit.

Step 5: check contrast

Now test the roles against each other. Text on background needs 4.5:1 for normal text, 3:1 for large text, and 3:1 for borders and icons. Photo colors often fail, because the nicest-looking pairs are close in lightness. Move one color along its lightness scale until the pair passes. The palette contrast guide covers the whole grid, and the color blindness guide covers pairs that rely on hue alone.

Step 6: save and hand off

Name the colors by role, not by appearance. Opalite saves the result as a palette that syncs through your private iCloud, and exports it for code, Adobe, GIMP, or Procreate. The export guide covers the code side.

The short version

1. Choose a photo. Pick an image with a few clear color areas rather than a busy scene.
2. Extract 5 to 8 colors. Use a palette extractor, or sample the dominant colors by hand.
3. Assign roles. Give each color a job: background, surface, text, primary, or accent, and add a neutral if one is missing.
4. Build lightness steps. Keep each color’s hue and chroma and change lightness in even steps to get tints and shades.
5. Check contrast. Test text and non-text pairs against WCAG thresholds and adjust lightness where they fail.