FREE TOOL
Colour palette generator
Choose your brand’s main colour. Get its HEX, RGB, HSL and CMYK codes, a shade scale from light to dark and matching colours, and see how readable each colour is with text.
Example colours
COLOUR CODES
- HEX
- #1E40AF
- RGB
- rgb(30, 64, 175)
- HSL
- hsl(226, 71%, 40%)
- CMYK
- 83, 63, 0, 31
- OKLCH
- oklch(42.4% 0.181 265.6)
CMYK is an approximation without a colour profile; for print, your printer’s profile takes precedence.
Aa Readability
White text
8.72 : 1 · AAA
Aa Readability
Black text
2.41 : 1 · —
Contrast ratio per WCAG 2.2: normal text needs 4.5 for AA and 7 for AAA; large text needs 3 for AA.
Shade scale
The main colour is at the marked step. Tap a swatch to copy its code.
Matching colours
Complementary
Analogous
Triadic
Neutral
Code for your website
CSS variables
:root {
--brand-50: #F3F7FF;
--brand-100: #E2EBFF;
--brand-200: #C5D8FF;
--brand-300: #9FBDFF;
--brand-400: #749DFF;
--brand-500: #4C7CFB;
--brand-600: #345FDB;
--brand-700: #1E40AF;
--brand-800: #173491;
--brand-900: #0C2269;
--brand-950: #041144;
}Tailwind CSS v4
@theme {
--color-brand-50: #F3F7FF;
--color-brand-100: #E2EBFF;
--color-brand-200: #C5D8FF;
--color-brand-300: #9FBDFF;
--color-brand-400: #749DFF;
--color-brand-500: #4C7CFB;
--color-brand-600: #345FDB;
--color-brand-700: #1E40AF;
--color-brand-800: #173491;
--color-brand-900: #0C2269;
--color-brand-950: #041144;
}Everything runs in your browser. The colour is written to the address, so you can share the link to show the same palette.
Colour is the first thing people read
Visitors see the colour before they read the logo. When the same main colour is used with the same code on the website, social media, quotes and business cards, the brand becomes recognisable; a different red in every place makes it look scattered.
Make your site icon in the same colour with the favicon generator, and your email signature with the email signature generator.
Common questions
A colour code is the numeric form of a colour on screen. RGB writes it as amounts of red, green and blue from 0 to 255, for example rgb(30, 64, 175). HEX writes the same three values in hexadecimal: #1E40AF. Websites use both; print uses CMYK, and design systems increasingly use OKLCH.
Start from one main colour and derive lighter and darker shades: light ones for backgrounds and highlights, dark ones for text and buttons. Add a complementary or analogous colour and a neutral series for text and backgrounds. The generator builds shades in the OKLCH colour space, where steps look evenly spaced to the eye.
Low contrast between text and background makes text hard to read, and harder still on a phone in sunlight. WCAG 2.2 sets 4.5:1 for normal text and 3:1 for large text as the AA level. The generator shows each colour’s ratio with white and black text.
Not exactly. Screen colour is made of light, print colour of ink, and the conversion depends on your printer’s colour profile. The CMYK value here is an approximation without a profile; for brand print work, ask for a proof or use a Pantone match.
Copy the code at the bottom of the page: CSS variables work on any site, and the Tailwind CSS v4 block works in Tailwind projects. The colour is also written to the page address, so you can send the link to your designer to show the same palette.
LET'S TALK
Make your brand colour consistent and readable everywhere.
On the first call we look at how your brand comes across online, from colour and type to logo and website.
- Domain, accounts and source code in your name
- Scope and price in a written quote
- Design, development and ads with one contact