Photos are one of the best palette sources there is, for a simple reason: everything in a photo is lit by the same light. Golden-hour sun tints the sky, the brick and the skin with the same warmth, and that shared tint is why the colors feel like they belong together. A raw color extraction isn’t a palette yet, though. It gives you the photo’s proportions, not yours, it often contains near-duplicates, and it says nothing about whether the colors will hold up as values in a painting or as text on a screen.
Here’s the process we use, start to finish, with one example palette carried all the way through.
Pick a reference worth borrowing from
Look for a photo with one dominant light: a sunset, an overcast street, a room lit by a single lamp, a forest in shade. Mixed light sources, such as a window plus a fluorescent tube, pull colors in two directions and give you a palette that argues with itself.
Crop before you extract. Borders, sky you don’t care about and the white wall around a painting all count as pixels and will show up as swatches. If the photo went through a heavy filter, remember you are extracting the filter as much as the scene.
Extract more colors than you need, then cut
Load the image into the Image to Palette Extractor and ask for eight to ten colors rather than five. At five, a small accent — a red umbrella, a lit window — often merges into its neighbor and disappears. At ten you can see it, and cutting is easier than guessing what’s missing. The extraction runs in your browser, so your reference never leaves your device.
Then edit the list down:
- Merge near-duplicates. Two dark blues that are hard to tell apart side by side at thumbnail size are one color doing one job. Keep the cleaner one.
- Drop the accidents. JPEG noise, a stray logo, a lens flare. If you wouldn’t paint it, cut it.
- Keep one true neutral. A near-white or near-black gives the colorful swatches something to sit against.
Our example is a harbor at dusk: dark water, a blue-gray sky, a sandy quay and warm lamps coming on. After merging, five colors remain:
| Color | HEX | Share of the photo | L* |
|---|---|---|---|
| Deep teal (water) | #1F3A4D |
41% | 23.2 |
| Slate teal (sky) | #3E6B7A |
24% | 42.7 |
| Sand (quay) | #C9B79C |
18% | 75.3 |
| Off-white (sky glow) | #F4EDE1 |
11% | 94.0 |
| Lamp orange | #E8A15A |
6% | 71.8 |
L* is CIE lightness, from 0 for black to 100 for white. It’s the column that matters in the value check further down.
Assign roles: 60-30-10 as a starting point
The 60-30-10 split is a rule of thumb borrowed from interior design: one color covers about 60% of the area, a second about 30%, and accents take the last 10%. It’s not a law — plenty of good work ignores it — but it is a reliable first draft, because it forces you to decide which color leads.
The photo’s proportions are a hint, not the plan. The lamp orange covers only 6% of the photo, yet it’s the reason the photo is interesting, so it gets the accent role. A first draft for our dusk palette:
| Role | Colors | Share |
|---|---|---|
| Dominant | Deep teal | 60% |
| Secondary | Slate teal 20%, sand 10% | 30% |
| Accent | Lamp orange 7%, off-white 3% | 10% |
It helps to translate those percentages into real area. On an 18 × 24 in canvas (432 square inches), 60% is about 259 square inches, 30% about 130, and 10% about 43 — all the accent together would fit in a patch roughly 6.6 inches square. That is smaller than most people picture, and it’s why accents work: a saturated orange spread over a quarter of the canvas stops being an accent and starts competing with everything else. With a very intense accent color, try 5% or less and see whether it reads stronger.
On a website or a portfolio layout the same split maps neatly: background and large surfaces take the 60%, cards, sections and illustrations the 30%, and buttons, links and highlights the 10%.
Check the values before the hues
Squint at the palette, or read the L* column, and sort the colors into light, middle and dark. In the example:
- Dark: deep teal (23.2)
- Middle: slate teal (42.7)
- Light: lamp orange (71.8) and sand (75.3)
- Lightest: off-white (94.0)
Notice the orange and the sand: only 3.5 L* apart. In color they look completely different, but in a grayscale version — or to a viewer squinting across a room — they merge into one light shape. Their contrast ratio is just 1.11:1. That’s fine if they belong to the same light mass, such as lamplight falling on the quay. It’s a problem if the orange is meant to pop against the sand. In that case, push the sand down in value (a darker, duskier quay) or put the orange next to the deep teal, where the value jump does the work.
Also notice the gap between 42.7 and 71.8. The palette has no mid-light value, which gives it a dramatic, high-contrast feel. For a softer piece, you’d add a lighter version of the slate teal to bridge it.
Make it accessible if it’s going on a screen
If the palette is for a website, a shop banner or a portfolio, check the text pairs. WCAG, the web accessibility standard, asks for a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text (24 px, or about 19 px bold) and for buttons, icons and other interface shapes.
| Text or shape | On | Ratio | Result |
|---|---|---|---|
| Off-white | Deep teal | 10.19:1 | All text, even the stricter AAA level |
| Sand | Deep teal | 6.06:1 | All text |
| Lamp orange | Deep teal | 5.47:1 | All text |
| Slate teal | Off-white | 5.03:1 | All text |
| Slate teal | Deep teal | 2.03:1 | Fails — decoration only |
| Lamp orange | Off-white | 1.87:1 | Fails, even for buttons |
The dark background works beautifully: three of the palette’s colors can be text on it. The light background is where the trouble is. The lamp orange is a lovely accent but useless for links on off-white. The fix is a text-safe twin: #9E5A1E, a darker orange from the same family, reaches 4.59:1 on the off-white and 5.34:1 on pure white. Use the bright orange for large shapes and illustrations, and the twin for anything people need to read. The Contrast Checker suggests the nearest passing color when a pair fails, so you don’t have to hunt for the twin by hand.
Read the harmony, then nudge it
Put the hues on the Color Harmony Wheel and the structure of the example shows up immediately. The two teals sit at 195° and 205° on the HSL hue wheel; the orange at 30°, the sand at 36° and the off-white at 38°. That’s two families, 165–175° apart: a near-complementary scheme, with the warm neutrals sitting right next to the orange. Complementary pairs give the strongest color contrast you can get without changing value, which is why teal-and-orange dusk scenes feel so vivid.
Seeing the structure helps you edit. If a photo palette contains a hue that fits neither family — a green shop sign in our harbor, say — you can either nudge it toward one of the families or drop it. And if you need more colors than the photo offers, send the palette to the Color Palette Generator, lock the colors you extracted, and let it fill in the extra tints and shades around them in the same scheme.
Save it so you’ll actually reuse it
A palette that only exists in a browser tab is gone by next week. Save it in the form you’ll use:
- For digital painting and design: an Adobe
.aseswatch file for Photoshop, Illustrator or InDesign, a Procreate.swatchesfile for the iPad, or CSS variables for the web. - For painting: a printed swatch card, with the tube mix you found for each color written next to it. The mix is the part that saves time later.
- For yourself: name it (“Harbor dusk”), note the source photo, and write down the roles and proportions, not just the HEX codes. The 60-30-10 decisions are the actual design; five colors without roles are just five colors.
Reusing one palette across a series — a set of six small paintings, a run of prints, a whole portfolio site — is one of the simplest ways to make separate pieces look like they belong together.