Color Picker
Pick a colour and get every notation for it — RGB, HSL, HSV, CMYK, CIE — plus its shades, tints, harmonies, contrast ratios and ready-to-paste CSS. Everything is computed in the browser, and the colour is kept in the address bar so the page can be linked.
RGB
HSL
Palette
Every CSS named colour, ordered by hue band and ramped light to dark. Hover a cell for its name, band and hex, click to use it.
Light to dark
The colour as a scale — the same hue at eleven lightnesses, evenly spaced to the eye. The ringed rung is your colour itself, at its own lightness. Click any rung to switch to it.
50
100
200
300
400
500
600
700
800
900
950
Nearest CSS names
The named colours closest to this one, nearest first. Click one to switch to it.
Colour spaces
Mainly blue.
| HEX | #4f46e5 | |
|---|---|---|
| RGB | rgb(79, 70, 229) | |
| RGB %share of the three channels | 20.90, 18.52, 60.58 | |
| HSL | hsl(243.4, 75.4%, 58.6%) | |
| HSV | hsv(243.4, 69.4%, 89.8%) | |
| CMYK | cmyk(66%, 69%, 0%, 10%) | |
| XYZ | 19.5575, 11.6997, 75.3562 | |
| Yxy | 11.6997, 0.1834, 0.1097 | |
| CIE-LabD65, 2° | 40.7348, 50.6385, -79.0902 | |
| Hunter Lab | 34.2049, 42.2032, -106.6775 | |
| Decimal | 5195493 | |
| Inverse | #b0b91a | |
| Web safenearest of the 216 | #6633cc |
Base numbers
Each channel written out, for when a format wants octal or a bitmask.
| Base | Red | Green | Blue |
|---|---|---|---|
| Binary | 01001111 | 01000110 | 11100101 |
| Octal | 117 | 106 | 345 |
| Decimal | 79 | 70 | 229 |
| Hex | 4F | 46 | E5 |
Shades
Stepped towards black. Click any swatch to make it the current colour.
Tints
Stepped towards white.
Harmonies
The hue rotated by the usual amounts, saturation and lightness held.
Contrast
WCAG 2 ratios for this colour used as text. AA needs 4.5:1 for body copy and 3:1 for large text; AAA needs 7:1.
CSS
Copy the line you need, or the whole block.
| Background | background-color: #4f46e5; | |
|---|---|---|
| Text | color: #4f46e5; | |
| Border | border: 3px solid #4f46e5; | |
| Translucent background | background-color: rgb(79 70 229 / 60%); | |
| Text shadow | text-shadow: 4px 4px 2px rgb(79 70 229 / 80%); | |
| Box shadow | box-shadow: 1px 1px 3px 2px #4f46e5; | |
| Custom property | --brand: #4f46e5; --brand-hsl: 243.4, 75.4%, 58.6%; |
Instructions
Turns one colour into every notation, palette and CSS snippet you are likely to want for it.
- Pick a cell from Palette, use the swatch picker, or type a colour into the field —
#bea78c,bea78c,rgb(190, 167, 140), a bare190, 167, 140,hsl(32, 28%, 65%)or a CSS name liketan. - Nudge it with the RGB or HSL rows — drag the track, or type the number into the box beside it. Random starts you somewhere new.
- Read off the notation you need and copy it, or click any shade, tint or harmony swatch to make that colour the current one.
Tips
- The colour lives in the address bar as
?c=4f46e5, so the page can be bookmarked or pasted to someone else. - Light to dark is the one to use when a colour is nearly right. It is the scale the colour belongs to — same hue, eleven lightnesses, numbered the way a design system numbers them, with your colour ringed at the rung it actually occupies. The steps are even in CIE L* rather than in HSL, so each one looks a step darker instead of merely measuring as one.
- The Palette is all 139 CSS named colours in one grid, running through the hue bands in order — reds to pinks, then the neutrals — and ramped light to dark inside each. Hover or tab to a cell and it names itself and its band above the grid; the one in use is ringed.
- RGB % is each channel as a share of the three added together — the figure the colour reference sites print — not
r / 255. - Contrast is the WCAG ratio for this colour used as text. A colour that fails on white often passes on black, so check both before settling on a link or label colour.
- Nothing is uploaded or stored — every value is computed in the browser.
- Hit Example, then click the colour field or Random to load a sample colour.