Color Picker and Contrast Checker
Pick a color from the color wheel, your screen or an image, and copy its HEX, RGB, HSL, CMYK or OKLCH code. Then check whether text in that color is readable, and get tints, shades and matching colors.
Free · No sign-up
How to use it
- Pick a color with the color picker, type or paste a code, or open an image and tap the color you want.
- Fine-tune it with the hue, saturation, lightness and opacity sliders.
- Copy the code you need: HEX, RGB, HSL, HSV, CMYK or OKLCH.
- Choose a background to check the WCAG contrast, and use the suggested color if the text is too hard to read.
Why use this tool
Pick from screen or image
Use your browser's eyedropper where available, or open a photo or screenshot and tap a pixel.
Every common format
HEX, RGB, HSL, HSV, CMYK and OKLCH, each with a copy button, plus the closest CSS color name.
WCAG contrast check
Contrast ratio with AA and AAA results for normal text, large text, icons and input borders.
Suggested fix
When text fails, the tool finds the closest lighter or darker version of your color that passes.
Tints, shades and harmonies
Nine tints and shades, plus complementary, analogous, triadic and square color schemes.
Private and free
Images are read in your browser and never uploaded. No sign-up and no limits.
Color codes explained
The same color can be written in several ways. Here is #3366CC, the blue used as the example on this page, in every format the tool shows:
| Format | Example | Used for |
|---|---|---|
| HEX | #3366CC | Web design and CSS, brand guidelines |
| RGB | rgb(51 102 204) | Screens, CSS and most design apps |
| HSL | hsl(220 60% 50%) | CSS, adjusting lightness or saturation by hand |
| HSV (HSB) | hsv(220, 75%, 80%) | Color pickers in Photoshop, Figma and similar apps |
| CMYK | cmyk(75%, 50%, 0%, 20%) | A rough starting point for print |
| OKLCH | oklch(53.2% 0.168 262.3) | Modern CSS, palettes with even lightness steps |
How to convert HEX to RGB
A HEX code is three pairs of hexadecimal digits for red, green and blue. Each pair is a number from 00 to FF, which is 0 to 255 in decimal. To convert one pair, multiply the first digit by 16 and add the second, where A to F stand for 10 to 15:
- Red: 33 is 3 × 16 + 3 = 51.
- Green: 66 is 6 × 16 + 6 = 102.
- Blue: CC is 12 × 16 + 12 = 204.
- So #3366CC is rgb(51 102 204). A short code such as #36C doubles each digit, so it is the same color. An eight-digit code such as #3366CC80 adds opacity: rgb(51 102 204 / 0.5).
WCAG contrast requirements
The Web Content Accessibility Guidelines (WCAG) measure contrast as a ratio from 1:1 (no contrast) to 21:1 (black on white). The ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and the darker color. The minimums are:
| Level | Normal text | Large text | Icons and input borders |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | – |
Common colors on white and black
Many popular colors are less readable than they look. Results for text on a white and on a black background:
| Color | On white | On black |
|---|---|---|
| Red #FF0000 | 3.99:1 (fails AA) | 5.25:1 (passes AA) |
| Orange #FFA500 | 1.97:1 (fails AA) | 10.63:1 (passes AA) |
| Green #008000 | 5.13:1 (passes AA) | 4.08:1 (fails AA) |
| Blue #0000FF | 8.59:1 (passes AA) | 2.44:1 (fails AA) |
| Gray #767676 | 4.54:1 (passes AA) | 4.62:1 (passes AA) |
| Gray #777777 | 4.47:1 (fails AA) | 4.68:1 (passes AA) |
| Blue (example) #3366CC | 5.36:1 (passes AA) | 3.91:1 (fails AA) |
Picking a color from an image or your screen
To find the code of a color in a logo, photo or screenshot, choose Pick from image and tap the spot you want. The image is drawn in your browser and is not uploaded.
- Zoom in on small details first, because a single pixel at the edge of a letter is often a blend of two colors.
- Photos have noise and shading, so tap a few nearby points and compare the codes.
- Pick from screen uses your browser's eyedropper, which some browsers, including most mobile browsers, do not offer. If the button is missing, take a screenshot and open it with Pick from image.
Frequently asked questions
How do I find the HEX code of a color in an image?
Choose Pick from image, open the photo or screenshot, and tap the color. The HEX, RGB and other codes appear at once, each with a copy button. The image stays on your device.
What contrast ratio do I need for text?
WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text, which is about 24 px, or about 18.7 px in bold. Icons and input borders need 3:1. Level AAA raises text to 7:1 and 4.5:1.
Are HEX and RGB the same color?
Yes. They are two ways of writing the same red, green and blue values. #3366CC and rgb(51 102 204) are exactly the same color, so you can use whichever your app or code expects.
What is the difference between WCAG AA and AAA?
AA is the level most laws and policies refer to, and it is realistic for every site. AAA is stricter: 7:1 for normal text. It is recommended where possible, but the guidelines do not expect whole sites to meet AAA.
Why does my CMYK color look different when printed?
Screens mix light (RGB) while printers mix ink (CMYK), and printers cannot reproduce every bright screen color. This tool uses the simple standard formula without a color profile, so ask your printer for the exact values for their press and paper.
What is OKLCH?
OKLCH describes a color by lightness, chroma (intensity) and hue, on a scale designed to match how people see. Two colors with the same OKLCH lightness look about equally light, which makes it easier to build even palettes. Current browsers support oklch() in CSS.
Are my images or colors uploaded?
No. Everything runs in your browser. Only your recent colors and background color are saved on this device, and you can clear them at any time.
How to Choose Accessible Colors for Your Website
Related tools
Need something built?
Tell us what you want to create.
Tell us what you need built, from a simple website to a complete app, AI solution, automation, or custom system.