Color picker
Choose a colour and get its HEX, RGB, HSL, HSV and OKLCH codes, check its contrast with white and black, or pick a colour straight from an image.
- 100% free
- Runs in your browser
- No uploads
Contrast (WCAG)
For text on this colour, use black (4.91:1).
Text in this colour on white
White text on this colour
Contrast with white4.26:1
- AA, normal text (4.5:1)Fail
- AA, large text and icons (3:1)Pass
- AAA, normal text (7:1)Fail
Text in this colour on black
Black text on this colour
Contrast with black4.91:1
- AA, normal text (4.5:1)Pass
- AA, large text and icons (3:1)Pass
- AAA, normal text (7:1)Fail
Tints and shades
Pick a colour from an image
- Runs on your deviceEvery tool works directly in your browser. No files are uploaded.
- Your privacy mattersYour files never leave your device, so there's nothing for us to store.
- No limitsUse any tool as much as you need. No daily caps, no waiting.
- Completely freeNo signup and no trial to cancel. Ads keep the tools free.
How to use the colour picker
- Choose a colour. Drag in the square to set saturation and brightness, and move the slider below it to change the hue. The arrow keys work too.
- Or type a code. Paste a HEX code, rgb(), hsl(), oklch() or a CSS name such as teal into any field. The other formats follow straight away.
- Or pick it from an image. Drop a photo, logo or screenshot and click the spot you want. In Chrome and Edge, Pick from screen grabs a colour from anywhere on your display.
- Copy the code. Each format has its own Copy button, ready for CSS, Figma, Canva or Word.
Colour code formats
The same blue, written in each format the tool shows:
| Format | Example | Where it's used |
|---|---|---|
| HEX | #1f7ae0 | Web pages, design apps, brand guides |
| RGB | rgb(31, 122, 224) | CSS, Office and most image editors |
| HSL | hsl(212, 76%, 50%) | CSS, when you want lighter or darker versions |
| HSV / HSB | hsv(212, 86%, 88%) | Photoshop, Figma and other colour pickers |
| OKLCH | oklch(58.4% 0.176 255.1) | Modern CSS, even colour scales |
How HEX to RGB works
A six-character HEX code is three pairs of base-16 digits: red, green, blue. Each pair is a number from 00 to ff (0 to 255). Turn a pair into a normal number by multiplying the first digit by 16 and adding the second, where a to f stand for 10 to 15.
For #1f7ae0: 1f = 1 × 16 + 15 = 31, 7a = 7 × 16 + 10 = 122, e0 = 14 × 16 + 0 = 224, so it's rgb(31, 122, 224). A three-character code repeats each digit: #f60 is #ff6600. Have a long list to convert? The HEX to RGB converter handles a whole stylesheet at once.
How the contrast check works
WCAG contrast compares the relative luminance (perceived brightness) of two colours: (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter one. It runs from 1:1 (identical) to 21:1 (black on white). The ratio shown is cut to two decimals rather than rounded, so a colour at 4.499:1 shows as failing AA, as it should.
Tip: mid-tone colours often fail with both white and black text. Use the tints and shades row to find the nearest version that passes, then copy that code.
Frequently asked questions
How do I get the colour code from an image?
Drop the image (or paste a screenshot with Ctrl+V) into “Pick a colour from an image”, then click the spot you want. The magnifier shows the exact pixels under the pointer. The HEX, RGB and HSL codes update at once, and each pick is kept in a list so you can collect a palette and copy it.
How do I convert HEX to RGB?
Type or paste the HEX code into the HEX field and the RGB field shows the same colour as rgb(r, g, b). It works the other way too: edit any field and the others follow. To convert a whole list of codes at once, use the HEX to RGB converter.
What contrast ratio does text need?
WCAG 2 level AA asks for at least 4.5:1 between text and its background, or 3:1 for large text (about 24 px, or 19 px bold) and for icons and input borders. Level AAA asks for 7:1. The tool checks your colour against white and black and says which levels pass.
Why is the picked colour slightly different from my original design?
JPEG compression, resizing and screenshots all change pixels a little, especially near edges, and photos are full of tiny variations. Use the 3 × 3 or 5 × 5 average to smooth out noise, and pick from the middle of a flat area rather than an edge. For an exact brand colour, use the code from the design file.
What is OKLCH and when should I use it?
OKLCH describes colour as lightness, chroma (how vivid) and hue, on a scale built to match how people see. Equal OKLCH lightness looks equally light, which HSL doesn't manage, so it suits even colour scales. All current major browsers support oklch() in CSS.
Does “Pick from screen” work in every browser?
It uses the browser's EyeDropper feature, which Chrome, Edge and other Chromium browsers offer on desktop. In browsers without it the button is hidden; take a screenshot and drop it into the image picker instead.