About This Colour Picker
A colour picker is the bridge between the colour you see in your head and the numbers your code needs. Every colour on screen is made of three channels — red, green and blue — and every design tool, code editor and stylesheet expects that colour in a specific format. This picker gives you all of the common ones at once, plus the extras designers reach for every day: harmonies, tints, shades and accessibility checks.
Everything runs in your browser. No files, no uploads, no tracking.
The five colour formats
| Format | Example | Where it's used |
|---|---|---|
| HEX | #2563EB | HTML, CSS, SVG, design tools |
| RGB | rgb(37, 99, 235) | CSS, JavaScript, Canvas |
| HSL | hsl(221, 83%, 53%) | CSS, design systems |
| HSV / HSB | hsv(221, 84%, 92%) | Design tools (Photoshop, Figma) |
| CMYK | cmyk(84%, 58%, 0%, 8%) | Print design, print-ready PDFs |
Why HSL is easier than RGB
RGB describes a colour by how much red, green and blue light it emits — which is how screens work, but not how humans think. Want a slightly lighter version of a blue? In RGB you'd have to raise all three channels carefully, keeping the hue intact. In HSL you just move the L slider up.
- Hue — the colour family (0° = red, 120° = green, 240° = blue).
- Saturation — how vivid or washed out the colour is (0% = grey, 100% = full colour).
- Lightness — how close to white or black (0% = black, 50% = pure hue, 100% = white).
Colour harmonies explained
A harmony is a set of colours chosen from specific positions on the colour wheel so they naturally look good together. The five classics:
| Harmony | Rule | Best for |
|---|---|---|
| Complementary | Opposite on the wheel (180°) | High-contrast CTA buttons, badges |
| Analogous | Neighbours (±30°) | Calm, cohesive palettes, gradients |
| Triadic | Evenly spaced thirds (120°) | Playful, balanced multi-colour designs |
| Split-complementary | 180° ±30° | Softer alternative to complementary |
| Tetradic | Rectangle: 0°, 60°, 180°, 240° | Rich, varied palettes |
Tints and shades
A tint is your colour mixed with white — lighter and softer. A shade is your colour mixed with black — darker and richer. Together they form the "ramp" that design systems use for hover states, borders, backgrounds and text. A typical design system has 9 or 10 steps from near-white to near-black, all derived from a single brand hue.
WCAG contrast and accessibility
The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios between text and its background so that content stays readable for people with low vision or colour blindness:
- AA normal text — at least 4.5:1
- AA large text (18pt+ or 14pt bold) — at least 3:1
- AAA normal text — at least 7:1
- AAA large text — at least 4.5:1
The ratio runs from 1:1 (no contrast, e.g. grey on grey) to 21:1 (black on white). The picker shows both white text on your colour and black text on your colour, with AA/AAA badges so you can see instantly whether a design is accessible.
Common use cases
Brand colours
Lock in the exact HEX for a logo or palette.
CSS / Tailwind
Copy values into stylesheets and design tokens.
Design systems
Build a 10-step colour ramp from one hue.
Accessibility audit
Verify contrast before shipping UI.
Print production
Get the CMYK equivalent for print work.
Colour matching
Find the nearest CSS named colour to any value.
Privacy and accuracy
This colour picker runs entirely in your browser. All conversions happen locally in JavaScript. Colours you pick are never transmitted, stored or logged.