Colour palette generator and contrast checker

From one colour to a palette

Start with one colour you already have: usually the main colour of your logo. Type or paste its code (#FFC800, rgb(255 200 0), hsl(47 100% 50%) or oklch(…) all work), press the round chip to pick one, or tap a quick colour. The palette appears straight away, and every swatch shows its code and its contrast. Tap a swatch to copy its code.

Choose what kind of palette you want:

• Shades gives 11 steps from 50 (almost white) to 950 (almost black), the scale Tailwind CSS uses, or 12 steps the way Radix Colors builds them, where each step has a job: 1–2 page backgrounds, 3–5 buttons and fields, 6–8 borders, 9–10 your solid colour, 11–12 text. Your own colour is marked “yours”.
• Matching adds colours from the colour wheel: the opposite colour, the two neighbours, a triad or a split, plus a light and a deep version for backgrounds and text.
• Brand set works out five colours a website needs: your primary, an accent, an ink for text, a paper for backgrounds and a muted tone for small print.

Below the swatches, a sample page shows the palette in use, with a background, heading, text, a button and a tag. Squares of colour can look fine together and still fail on a real page; this shows you before you build.

Why OKLCH

Most colour tools mix colours in RGB or HSL, where equal steps don’t look equal: a yellow at 50% lightness looks far brighter than a blue at 50%. This tool works in OKLCH, a colour space designed in 2020 so that equal steps in lightness look equal to the eye. That is why the shades step down evenly, and why Tailwind CSS uses OKLCH for its own palette. Colours that can’t be shown on a normal screen are pulled back just enough to fit, keeping their lightness and hue.

Contrast in plain words

Contrast is how much a text colour stands out from its background, written as a ratio from 1:1 (the same colour) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG 2.2) set the minimums most websites and many laws follow:

The ratios here are rounded down, never up: WCAG says 2.999:1 does not pass 3:1. The Every pair, checked card is a grid: each row is a text colour and each column a background, and every square shows that text on that background with its ratio, green when it passes for any text, amber for large text and buttons only, grey when it should not carry text. The grid always fits the screen: on a phone the squares get smaller and show a green or amber dot in the corner instead of the number. The chips above it (3+ large, 4.5+ any text, 7+ AAA) fade every pair below that level, and the counts say how many pairs pass. Click or tap a square to pick it: the panel under the grid shows that pair as a real heading, paragraph and button, with each WCAG check, both codes to copy and a Swap button.

Check two colours (step 3) tests any text colour on any background and marks normal text, large text and buttons as pass or fail. If it fails, Fix the text colour moves the text colour the shortest way lighter or darker, keeping its hue, until it reaches 4.5:1.

Yellow, and other light colours

Bright yellow, lime, sky blue and pink are light colours. Elathi’s own yellow, #FFC800, reaches only 1.55:1 as text on white, so it fails as text. On dark text it reaches 12.24:1. Light colours work best as backgrounds, buttons and highlights with dark text on them, and a darker shade (700 or 800) can carry text in the same hue.

Colour blindness

Under the swatches, See it as shows your palette through five pairs of eyes as small cards: normal vision, green-blind, red-blind, blue-blind and no colour. Pick one and the swatches and the sample page change with it. About 1 in 12 men and 1 in 200 women are colour blind, and red–green colour blindness is the most common kind. The view uses a published simulation model (Machado and others, 2009) at its strongest. If two of your colours turn into the same muddy tone, the Good to know card says so. The rule is simple: never let colour be the only way to tell two things apart. Add a word, an icon or an underline.

Lock, shuffle and your own colours

In Matching, Brand set and Your colours, every swatch has a lock. Lock the ones you like and press Shuffle (or the Space bar on a computer) to try new colours for the rest. Your own colours (step 4) takes the main colours out of a photo, a logo or a screenshot, or reads a list of codes you paste. The photo is read inside your browser and never uploaded. The photo then shows with a numbered point on each colour it found: drag a point (or tap the photo) to take the colour under it, use the arrow keys to nudge the picked point, and add or remove points (2 to 10).

Take it with you

Your code gives the palette as CSS variables, a Tailwind v4 @theme block (in OKLCH), a Tailwind v3 config, design tokens (JSON, the W3C draft format Figma plugins read) or a plain list of codes, under any name you choose. You can also download the swatches as an SVG or PNG for a mood board. The share link keeps your settings, so a client or teammate opens exactly the same palette.

Meena’s bakery website

Meena runs a bakery in Kallakurichi with a warm orange logo, #EA580C. In October 2026 she starts from that colour and picks Brand set: a deep brown ink for text, a cream paper for the background, a soft grey for small print and a teal accent. The check shows her orange reaches 3.55:1 with white text, enough for a large button but not for small text, so she puts dark text on the button instead. In the colour blindness view the orange and her red “sold out” tag look very alike, so she adds the words “Sold out” to the tag. She copies the CSS variables and sends the link to her web designer.