Free Color Picker.
Pick any color and get its HEX, RGB and HSL codes instantly — sample a color straight off your screen with the eyedropper, or dial one in by hand. Nothing here is ever uploaded. The screen eyedropper works only in Chrome, Edge, Opera and Brave; elsewhere, dial the colour in by hand.
More handy tools
See all tools
AI DebateSuggest a subject and watch nine AI models argue it out.
QR Code GeneratorMake a free QR code.
Password GeneratorGenerate a strong random password.
Word CounterCount words, characters and reading time.
CSV to JSONConvert CSV to JSON, or JSON to CSV.
Text to SpeechHave your browser read text aloud.
Barcode GeneratorGenerate a printable 1D barcode.
Unit ConverterConvert length, weight, temperature and more.
Lorem Ipsum GeneratorGenerate placeholder text by paragraph, sentence or word.Color picker: quick facts
Pick any colour and get its HEX, RGB and HSL codes.
Updated
- Price
- Free, no sign-up, no limits.
- Codes
- HEX, RGB and HSL, converted as you type in any of them.
- Eyedropper
- Pick from anywhere on screen in Chrome, Edge, Opera and Brave.
- Extras
- Four tints and four shades of your colour, one click to switch.
- Not included
- CMYK print values.
How to find a colour’s HEX, RGB and HSL codes
Choose a colour, sample one from your screen with the eyedropper, or type in a code, and all three codes update together, with a row of lighter tints and darker shades to choose from.
- 01
Pick a color
Use the color wheel, the screen eyedropper, or type a HEX, RGB or HSL value directly.
- 02
Read the codes
HEX, RGB and HSL update instantly, ready to copy.
- 03
Try a shade or tint
Click any swatch in the row below to explore lighter and darker variants.
Tips for choosing and matching colours
Getting a colour code is quick; getting a colour that works everywhere takes a little more thought.
- Match a colour from a logo or photoPick from screen reads the exact colour of any pixel you click, so you can match a brand colour from a logo or a shade from a photo. It works in Chrome, Edge and other Chromium-based browsers.
- Check that text stays readableAccessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5 to 1 between normal text and its background. If you’re unsure, pick a darker version from the shades row for text.
- Use HSL for matching variationsHSL describes colour as hue, saturation and lightness. Keep the hue the same and change only the lightness to get lighter and darker versions that belong together, for buttons, borders and backgrounds.
- Expect print to look differentScreens mix light while printers mix inks, so bright blues and greens often print duller than they look on screen. For printed brand colours, ask your printer for a proof first.
Like every Altto tool, this runs on your device — nothing you add is uploaded. How Altto works
colours can be written as a six-digit HEX code, from 256 levels each of red, green and blue.
One colour, every code — and which shades are readable
The picker opens on a bright blue. Here’s everything it gives you for that colour, and what happens when you put text on it.
#4F7CFFRGB rgb(79, 124, 255)HSL hsl(225, 100%, 65%)Below are the nine swatches from the picker’s Shades & tints row for this blue, with the contrast ratio of white and black text on each. Accessibility guidelines (WCAG) ask for at least 4.5:1 for normal text and 3:1 for large or bold text.
- AaAa70% tint
#CAD8FFWhite text 1.4:1 ✗Black text 14.8:1 ✓ - AaAa50% tint
#A7BEFFWhite text 1.8:1 ✗Black text 11.5:1 ✓ - AaAa30% tint
#84A3FFWhite text 2.4:1 ✗Black text 8.7:1 ✓ - AaAa15% tint
#6990FFWhite text 2.99:1 ✗Black text 7.0:1 ✓ - AaAaYour colour
#4F7CFFWhite text 3.7:1 large onlyBlack text 5.7:1 ✓ - AaAa20% shade
#3F63CCWhite text 5.4:1 ✓Black text 3.9:1 large only - AaAa40% shade
#2F4A99White text 8.2:1 ✓Black text 2.6:1 ✗ - AaAa60% shade
#203266White text 12.3:1 ✓Black text 1.7:1 ✗ - AaAa80% shade
#101933White text 17.4:1 ✓Black text 1.2:1 ✗
So the starting blue is fine for black text (5.7:1) but too light for white text (3.7:1). One step darker, the 20% shade #3F63CC, takes white text to 5.4:1. That’s the quickest fix when a button or banner colour is hard to read: click a darker swatch and keep the same hue.
Contrast ratios for common colour pairs
| Text and background | Contrast | Normal text |
|---|---|---|
| Aa Black on white | 21.00:1 | Passes (AAA) |
| Aa Dark grey #767676 on white | 4.54:1 | Passes |
| Aa Light grey #959595 on white | 3.00:1 | Fails |
| Aa White on bright red #FF0000 | 4.00:1 | Large text only |
| Aa White on darker red #D32F2F | 4.98:1 | Passes |
| Aa White on blue #0066CC | 5.57:1 | Passes |
| Aa White on green #12B886 | 2.55:1 | Fails |
| Aa White on dark green #0B7A5A | 5.32:1 | Passes |
| Aa Black on gold #FFD700 | 14.97:1 | Passes (AAA) |
| Aa Yellow on white | 1.07:1 | Fails |
Ratios are worked out with the WCAG 2 formula. “Large text only” means at least 3:1, which is enough for text of about 24px, or 19px bold. #767676 is the lightest grey that still passes on white. The picker doesn’t show contrast itself, so use this table as a guide or a contrast checker for exact pairs.
Where to paste your code
- Websites and CSS: paste the HEX with its # (
color: #4F7CFF;) or the RGB value as it is. - Word and PowerPoint (Microsoft 365): Font Colour → More Colours → Custom, then the Hex box.
- Google Docs and Slides: text colour → Custom → Hex.
- Canva: click the colour tile, then + and type the code.
More apps, and ways to find the code of a colour you can see on screen, are in our guide to hex colour codes.
Frequently asked questions
Common questions about colour codes and the eyedropper. To find the code of a colour you can see on screen, our guide on finding the hex code of any colour covers every method.