Colour palette from a photo
The colours come out of the picture. They are named, checked on black and white, and given roles that meet WCAG AA.
Start from a sample
Or drop it here, or paste. JPEG, PNG, WebP, AVIF, GIF. Nothing is uploaded.
Drop a picture here, or use one of the samples above.
The picture stays on this device.
The preview is a model of the deficiency, drawn on the swatches and the picture. It is not what a person with that vision sees.
Exports use the colours above. Make a web palette first if you want named roles.
What the chat window cannot finish.
A picture of a colour palette is the wrong way round. Start from the photograph, the still, or the object, and let the colours come out of it. Five is the default. Lock the ones you meant, re-roll the rest, and only then give them jobs: page, surface, text, accent.
An assistant can invent a plausible hex list. It cannot see the picture without you uploading it, and the upload is the part this tool refuses. The reading happens here, on the photograph you already have, and the same picture returns the same palette.
What it still will not do is decide the brand. A web palette that clears contrast is a starting set. Carrying it through type, image and a whole identity is the studio's Brand & Identity work.
A palette for a website
Name the roles before you fall in love with the swatches.
- Page and text
- One background, one text colour, body contrast at 4.5:1
- Surface
- The page, one step down. Cards and wells, not a second brand colour
- Accent
- Large type, a rule, a button. It may fail as a paragraph, and that is fine
- How many
- Five roles cover most marketing sites. Eight colours is usually three jobs wearing aliases
A palette for a logo
A mark has to survive one ink.
- Stop early
- Two or three colours. A logo that needs eight swatches is a poster
- One ink
- If the mark only works in the red, it is not finished. Draw the one-colour version first
- Ground
- Decide the colour it sits on. A vermilion mark on white and on near-black are two marks
- Name
- Call the colours by the role, not by the hex. People extend a role. They misuse a swatch
A palette for an app
Interface colour is a system, not a moodboard.
- Text
- Default text and muted text both have to clear 4.5:1. Muted is not an excuse
- Primary
- The action. 3:1 against the page so the control is visible, and 4.5:1 for the label on it
- States
- Hover, error and success need a second signal. Colour alone will fail some of your users
- Both themes
- Extract again from a dark still, or build the dark roles on purpose. Do not invert the hex
These constants are published under CC BY 4.0. Quote them, cite them, put them in your own documentation. Attribution to Original Design Studio is the only condition.
The principles behind what this tool tells you.
Does the photo leave my browser?
No. The file is drawn to a canvas on this device, reduced to about 200 pixels on the long side, and read there. Closing the tab drops it. The share link stores the hex values only.
Will the same photo always give the same palette?
Yes. Clustering runs in OKLab and splits at the widest gap, so a small accent is not swallowed by the background. There is no random seed. Lock a swatch and re-roll if you want a different supporting cast. The locked colour stays.
What does the web palette change?
It assigns the colours to background, surface, text, muted, primary, secondary and accent. If text misses 4.5:1, or the primary misses 3:1 on the page and 4.5:1 for its label, only the lightness moves. Hue stays, and the page says what moved.
How many colours should a website use?
Start with five roles: page, surface, text, muted and one accent. Add a second accent when a real second job appears, not because the slider goes to ten.
Can I start from one colour instead of a photo?
Yes. From a colour builds complementary, analogous, triadic and split-complementary sets in OKLCH. Pick one set, then make the web palette the same way.
What does the nearest name mean?
It is the closest CSS colour name in OKLab, from a fixed list. It is a label so the swatch can be told apart without relying on the chip. It is not a brand name.
How do I check contrast for the whole palette?
Check this palette opens the colour accessibility checker with these colours filled in. Pairs, including text on a photograph, are that tool's job.
Why is the accent hard to read as small text?
Saturated colour often clears 3:1, which is enough for a button, an icon or large type, and fails 4.5:1 for a sentence. Keep the hue. Use the text colour for the sentence.
Next tool
Markdown to PDF
Want this run across your whole product?
A written plan against the ten disciplines.