| Swatch | HEX | RGB | HSL | % |
|---|
Colour extraction for UK brand identity
UK marketing agencies and brand designers use colour palette extraction as a starting point for visual identity work. Whether you are building a brand from scratch or matching an existing logo, extracting the dominant colours from an image gives you the exact HEX codes needed for your style guide. The GOV.UK Design System itself defines a fixed palette (primary blue #1d70b8, black #0b0c0c, white) that public-sector teams must follow , this tool lets you compare your extracted palette against published standards quickly.
WCAG 2.2 colour contrast requirements apply to all UK public-facing websites. Once you have your palette, check each colour pair for the 4.5:1 ratio required for normal text (AA level). Use the Contrast Checker to validate combinations before committing to a design.
Extracted palette data
| Colour type | Typical use | Output format |
|---|---|---|
| Dominant | Primary brand colour | HEX, RGB, HSL |
| Secondary | Accent, CTA buttons | HEX, RGB, HSL |
| Neutral | Backgrounds, text | HEX, RGB, HSL |
| Percentage | Indicates visual weight in source image | % |
Limits and what this tool does not do
The extraction algorithm groups pixels into clusters , it returns the most frequent colour groups, not necessarily every colour visible in the image. Very small colour details (thin borders, tiny icons) may not appear in the palette. Gradients are averaged across pixels, so the extracted colour is a mid-point rather than the exact start or end value. For print work, you will still need to convert HEX to CMYK through a dedicated colour management tool, as screen and print colour spaces differ.
Workflow: from image to design system
Extract the palette from your source image, then paste the HEX codes into the Colour Palette Generator to build out a full set of tints and shades. This gives you the 50-900 scale common in Tailwind CSS or Material Design tokens. Copy the resulting CSS custom properties directly into your :root block for immediate use.