PalettePilot

Are your brand colours website-ready?

Add your colours. We’ll show what works, what needs fixing, and the closest accessible alternatives.

1

Add your colours

Paste a HEX value such as #1F5AA6 or an RGBA value such as rgba(31, 90, 166, 0.8).

Brand colours

Your core identity colours. Only Primary is required.

Required

Backgrounds & surfaces

Colours used behind page content and inside cards or panels.

Required

Typography & links

Text colours for paragraphs, headings and clickable links.

Required

Buttons

Optional custom background and text colours for primary and secondary buttons.

Primary button

Secondary button

Optional colours use sensible fallbacks when disabled: cards use the page background, headings use body text, links use Primary, and button text automatically uses the most readable black or white.

2

Your result

0out of 100
Website readiness

Checking your palette…

3

What should be fixed?

Only problems that need your attention appear here.

4

WCAG level suggestions

See the closest colour suggestion for Level AA and AAA. Level A guidance checks that meaning is not shown by colour alone.

ADo not rely on colour alone
AARecommended for most websites
AAAEnhanced text contrast
5

Possible colour combinations

See where each brand colour can be used. Failed combinations include the closest darker and lighter accessible shades.

How levels work: WCAG has no Level A contrast ratio. AA requires 4.5:1 for normal text and AAA requires 7:1. The “A” column reminds you not to use colour alone to communicate meaning.
6

See it on a website

Your preview updates immediately as colours change.

New collection

Clear design starts with readable colours.

This sample shows your palette across navigation, buttons, body copy and cards.

Content card

Readable text helps more people comfortably use your website.

Sample text link
7

Use these colours

Copy ready-to-use CSS variables for your website.

Advanced WCAG details

AA means suitable for normal website text. “Large only” means the combination is safer for large headings or interface elements, not regular paragraph text.

PreviewUseContrastResult