How to use the colour picker
Drag the circle in the large square to choose saturation and brightness, and use the rainbow slider for hue and the chequered slider for opacity. The square also works from the keyboard: focus it and use the arrow keys, holding Shift for bigger steps. System picker opens your operating system's own colour dialog, and in Chrome, Edge and Opera Pick from screen turns your cursor into an eyedropper that can sample any pixel on your display, even outside the browser. Firefox and Safari don't offer screen picking to web pages, so there the button explains the alternative: load a screenshot under Palette from an image and click it.
Every format box is editable. Type or paste a colour into any of them and the rest update as you type — and each box accepts any CSS Color 4 colour, so you can paste rgb(31, 42, 68) or rgb(255 0 0 / 50%) into the HEX field, lab(50% 40 59.5) or color(display-p3 1 0 0) anywhere, or type a CSS name like rebeccapurple. Bare numbers are read in the box's own format, and unitless saturation and lightness follow the modern CSS rule — hsl(200 1 50) means 1% saturation. You can also paste a colour or an image anywhere on the page. The name under the swatch is the nearest of the 148 CSS named colours, measured in the perceptual OKLab space so it matches what you see.
Your recent colours and palette are kept in this browser only, and the address bar carries the current colour (?c=ff4f1f) so you can bookmark or share it.
HEX, RGB, HSL, HWB, CMYK, LAB, LCH, OKLCH and P3 explained
| Format | What it describes | Use it for |
|---|---|---|
HEX #ff4f1f | Red, green and blue as two hexadecimal digits each (00–ff); eight digits add opacity. | CSS, design tools, brand guides |
RGB rgb(255, 79, 31) | The same three channels in decimal, 0–255. | CSS, code, image editors |
HSL hsl(13, 100%, 56%) | Hue angle, saturation and lightness — easy to adjust by hand. | CSS themes, quick tweaks |
| HSB / HSV | Hue, saturation and brightness, the model behind most picker squares. | Photoshop, Figma, Procreate |
| CMYK | Cyan, magenta, yellow and black ink percentages. | A starting point for print |
HWB hwb(13 12% 0%) | Hue plus how much white and black are mixed in — the way painters think. | CSS Color 4, quick tints and shades |
LAB / LCH lab(62% 66 66) | CIE lightness with red–green and yellow–blue axes (LAB), or chroma and hue (LCH), D50 white as CSS specifies. | Print, colour science, CSS |
OKLCH / OKLab oklch(67% 0.21 36) | Perceptual lightness, chroma and hue, a modern refinement of LCH. | Modern CSS, consistent palettes |
Display P3 color(display-p3 …) | Red, green and blue on the wider gamut of Apple and most recent phone screens. | Vivid colours on wide-gamut displays |
Two cautions. The CMYK figures here are a simple mathematical conversion; real print colour depends on the paper and the printer's ICC profile, so ask your printer for a proof before relying on them. And LAB, LCH, OKLCH and Display P3 can describe colours no ordinary sRGB screen can show — if you type one, the picker clips it to the nearest sRGB colour and tells you; the P3 box shows where every sRGB colour sits in the wider P3 space. OKLCH's advantage is that equal steps in lightness look equal, which HSL can't promise: yellow and blue at the same HSL lightness look nothing alike.
HEX to RGB and RGB to HEX
HEX and RGB describe exactly the same colour; they just write the numbers differently. To go from HEX to RGB, split the six digits into three pairs — red, green, blue — and convert each pair from base 16 to base 10. The letters a–f stand for 10–15, so 4f is 4 × 16 + 15 = 79. For #ff4f1f that gives rgb(255, 79, 31). A three-digit code is shorthand with each digit doubled, so #f40 is #ff4400, and an eight-digit code adds a fourth pair for opacity, where 80 is roughly 50%.
Going from RGB to HEX is the reverse: divide each channel by 16, write the whole number and the remainder as hex digits, and join the three pairs. 255 is 15 remainder 15, or ff; 79 is 4 remainder 15, or 4f; 31 is 1 remainder 15, or 1f. Always pad single digits with a leading zero — 9 becomes 09, not 9 — or the code shifts and you get a different colour.
In practice you don't need to do any of this by hand: paste a value into either box above and the other updates instantly, along with HSL, HSB, CMYK and OKLCH. The converter accepts codes with or without the #, in upper or lower case, and ignores spaces around the value, so you can paste straight from a design file or a stylesheet.
Checking contrast for accessibility
The Web Content Accessibility Guidelines (WCAG 2.2) measure contrast as a ratio between the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white). The checker shows your colour against white, black and a background of your choice, with a preview each way round, and marks each threshold as passed or failed:
- AA — 4.5:1 for normal body text. This is the level most laws and public-sector guidelines, including the UK's, require.
- AA large — 3:1 for large text: at least 24 px, or 18.66 px bold.
- AAA — 7:1 for normal text and 4.5:1 for large text, the enhanced level.
- UI — 3:1 for icons, input borders, focus rings and chart elements that need to be seen.
Ratios are rounded down, never up, so 4.499:1 shows as 4.49 and fails AA, exactly as an auditor's tool would. If your colour is semi-transparent, it is blended onto each background before measuring, because that is the colour people actually see. A classic surprise: the popular orange #ff4f1f passes only for large text on white, while white text on it fails AA — reach for a darker shade from the strip above, or press Use next to Nearest AA pass, which keeps the hue and chroma and moves only OKLCH lightness until the colour reaches 4.5:1.
Each card also shows the APCA lightness contrast (Lc), the method in the draft WCAG 3. It accounts for polarity — light text on dark reads differently from dark on light — so the two directions get different scores, and negative values mean light text on a dark background. It isn't a legal requirement yet; treat Lc 75 or more as comfortable for body text, 60 for other text and 45 for large headings. Below, the colour-vision preview shows your colour, its harmonies and your palette as people with protanopia, deuteranopia, tritanopia or achromatopsia would see them, using the Machado (2009) simulation, so you can check that red and green states don't collapse into the same brown.
Harmonies, shades and palettes from images
Harmonies rotate the hue around the colour wheel while keeping saturation and lightness: complementary sits opposite (180°), analogous uses neighbours 30° either side, triadic spaces three colours 120° apart, split-complementary pairs your colour with the two either side of its complement, and the tetradic schemes use four. They're starting points, not rules — a good palette usually has one dominant colour, one supporting colour and a small accent.
Shades mix your colour with black, tints with white and tones with grey, in 10% steps. They are the quickest way to build hover states, borders and backgrounds that belong with a brand colour. Click any swatch to make it the current colour, or Shift-click to copy its HEX.
Palette from an image reads a photo, screenshot or logo on your own device — it is never uploaded — and groups its pixels with k-means clustering to find the main colours, listed with the share of the image each one covers. Click the picture itself to sample an exact pixel. Transparent areas are ignored. Export your palette as CSS custom properties, SCSS, JSON or plain text. The Tailwind export builds a proper 50–950 shade scale from the current colour using a fixed OKLCH lightness ladder, with chroma eased towards the light and dark ends and clipped to sRGB, and adds your palette alongside. With an empty palette, a grey exports a darker and lighter shade rather than three identical copies. If you're checking a monitor rather than a colour, the dead pixel test fills the screen with solid colours, and screen resolution tells you what your display reports.
Frequently asked questions
How do I convert HEX to RGB?
Paste the HEX code into the HEX box and read the RGB box, or do it by hand: split the code into three pairs and convert each from hexadecimal. For #ff4f1f, ff is 255, 4f is 79 and 1f is 31, so the colour is rgb(255, 79, 31). Three-digit codes double each digit, so #f40 means #ff4400.
What contrast ratio do I need for text?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA, the level most accessibility regulations require. AAA asks for 7:1 and 4.5:1 respectively. Icons, form borders and focus indicators need 3:1 against what surrounds them. The checker rounds down, so a borderline colour shows as failing rather than passing.
Can I pick a colour from my screen or an image?
Yes. In Chrome, Edge and Opera the Pick from screen button samples any pixel on your display. In other browsers, take a screenshot and load it under Palette from an image, then click the picture to sample a pixel. The image is read on your device and never uploaded.
Why don't the CMYK values match my printer's?
Screens make colour with light and printers with ink, and exact CMYK depends on the paper, inks and colour profile. The values here are a standard mathematical conversion, useful as a starting point. For brand print work, use your printer's ICC profile in design software and ask for a proof.
Can I convert to LAB, LCH or Display P3?
Yes. The LAB and LCH boxes use CIE Lab with a D50 white point, exactly as CSS Color 4 defines lab() and lch(), so the values paste straight into a stylesheet. The P3 box shows the colour as color(display-p3 …) for wide-gamut screens. You can type any of these, plus hwb(), oklab() and oklch(); colours outside sRGB are clipped to the nearest displayable colour and flagged.
What is APCA and should I use it?
APCA is the Accessible Perceptual Contrast Algorithm proposed for WCAG 3. It models how we perceive lightness contrast, including the difference between dark-on-light and light-on-dark text. WCAG 3 is still a draft, so WCAG 2.2's ratios remain the legal benchmark in the UK and elsewhere. Use the 4.5:1 ratio to comply, and APCA as a second opinion for readability.
What is OKLCH and why use it?
OKLCH describes colour by perceived lightness, chroma (colourfulness) and hue. Unlike HSL, colours with the same OKLCH lightness actually look equally light, which makes consistent palettes and accessible shade scales easier. Modern browsers support it in CSS, for example oklch(67% 0.21 36). Some OKLCH values fall outside what screens can show, and the picker warns you when that happens.
Is my palette saved, and is anything uploaded?
Nothing is uploaded. Your palette, recent colours and custom contrast background are saved in your own browser's local storage so they're there next time. Images are processed on your device. Clear them with the Clear button or by clearing site data, and use Copy link to share a single colour.