Turn an image colour into a readable brand palette.

A colour that works in a logo may need a different partner when you use it behind text. Start with one sampled colour, choose its job, then test the pairs people will read.

Worked example using an illustrative orange palette. No account or image upload needed.

1. Pick the colour, not the closest name

Open the image colour picker and choose your logo or screenshot. Tap inside a solid area, away from softened edges, shadows and highlights. Copy the HEX code. A closest colour name is a useful description; its reference colour may differ from the pixel you selected.

For an existing brand, use its original design file or published colour specification when available. Compression, transparency and screenshots can change pixel values. Sampling a photograph cannot reliably identify a physical paint or print colour.

2. Give each colour a job

In this example, the starting colour is #F97316. We keep it as the bright accent, add a darker orange for buttons, choose dark brown for body text, and use a pale background. A palette is a set of roles: colours do not all need to work as text on every other colour.

Open these five colours in the palette generator →

3. Test the actual text and background

For WCAG AA, normal text needs at least 4.5:1 contrast; large text needs at least 3:1. Large means at least 24 CSS pixels at regular weight, or about 18.67 pixels in bold. These are text-contrast checks, not a complete accessibility assessment. See the W3C explanation of text contrast.

There are two useful fixes here: keep the background and change the text, or keep the text and change the background. Choose the version that fits the colour’s role. Increasing font weight alone does not make a failing normal-size pair pass.

4. Check the difficult cases

• Transparency: test the colour after it is composited on its real background. Our checker composites a translucent background on white; enter the actual solid background if your design uses another surface.
• Photographs and gradients: a pass for two endpoints does not prove that text is readable everywhere. Check every background area behind the text, or give the text a solid backing.
• Hover, focus and dark mode: check each displayed state. Keep keyboard focus visible, and use labels or shapes as well as colour to communicate meaning.
• Near the threshold: use the full result. A ratio below 4.5 still fails normal-text AA even if a rounded display looks close.

5. Use the roles in your CSS

This example uses the passing dark-orange button pair above. The body text on the pale surface has 14.74:1 contrast. Select and copy the CSS, or open the palette to export the colour values.

:root {
  --brand-accent: #F97316;
  --brand-button: #C2410C;
  --brand-text: #431407;
  --brand-surface: #FFF7ED;
  --brand-on-button: #FFFFFF;
}

.brand-panel {
  color: var(--brand-text);
  background: var(--brand-surface);
}

.brand-button {
  color: var(--brand-on-button);
  background: var(--brand-button);
}

Keep a record of the pairs you checked. In the contrast checker, use “Copy link to this pair” to reopen the colours and opacity, or download the text report. A saved pair is a starting point: retest when its background, opacity or text size changes.