Color Picker
Choose a color with the picker or type a code you already have. The HEX, RGB and HSL values stay in sync, and the strip below shows whether white or black text is readable on it.
#2F6FDF · rgb(47, 111, 223) · hsl(218, 73%, 53%)
- HEX color code
- Also called hex triplet · web color
- A color written as #RRGGBB: three pairs of hexadecimal digits for red, green and blue, each from 00 to FF (0 to 255). #000000 is black, #FFFFFF is white and #2F6FDF is a medium blue.
HEX, RGB and HSL describe the same color
Screens mix every color from red, green and blue light. RGB gives the three amounts as numbers from 0 to 255, and HEX writes the same three numbers in base 16, which is why a HEX code and an RGB triple always convert exactly into each other.
HSL describes the color the way people talk about it: a hue angle on the color wheel (0 is red, 120 green, 240 blue), a saturation from gray to full color, and a lightness from black to white. It is handy for making a lighter or darker version of a color: keep the hue and saturation and change only the lightness. All three forms are defined in the W3C CSS Color Module Level 4, and any of them can be pasted straight into a stylesheet.
Checking text contrast
The strip under the picker puts white and black text on your color and gives each a contrast ratio, from 1:1 (no difference) to 21:1 (black on white). The ratio comes from the relative luminance formula in the W3C Web Content Accessibility Guidelines, which weighs green far more than blue because the eye is most sensitive to it.
WCAG 2.2 level AA, the target most accessibility laws and policies point to, asks for 4.5:1 for body text and 3:1 for large text and for icons or borders that carry meaning. The ratio is cut, not rounded, so 4.49:1 does not pass.
Do
- Check every text and background pair you actually use, including hover and disabled states.
- Pick the text color with the higher ratio when a button color is fixed by a brand guide.
Avoid
- Light gray text on white: #AAAAAA on white is only about 2.3:1.
- Relying on color alone to show an error or a link; add an icon, a label or an underline.
Basic CSS color names
| CSS name | HEX | RGB | HSL | Best text color |
|---|---|---|---|---|
black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | White, 21:1 |
silver | #c0c0c0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | Black, 11.54:1 |
gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | Black, 5.31:1 |
white | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) | Black, 21:1 |
maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | White, 10.94:1 |
red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | Black, 5.25:1 |
purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | White, 9.41:1 |
fuchsia | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) | Black, 6.69:1 |
green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | White, 5.13:1 |
lime | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | Black, 15.3:1 |
olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) | Black, 5:1 |
yellow | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | Black, 19.55:1 |
navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | White, 16:1 |
blue | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) | White, 8.59:1 |
teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | White, 4.77:1 |
aqua | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) | Black, 16.74:1 |
orange | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | Black, 10.63:1 |
CSS knows about 150 color names, from aliceblue to yellowgreen, but the basic set above is the one most people remember. Some names surprise: CSS green is #008000, a darker color than the pure #00FF00, which CSS calls lime. If you are preparing images rather than code, the image converter keeps colors as they are when you change a file's format, and the JSON formatter helps tidy design tokens stored as JSON.
Color picker questions
How do I convert a HEX code to RGB?
Split the six digits into three pairs and read each pair as a base-16 number from 0 to 255. #2F6FDF becomes 2F, 6F and DF, which is rgb(47, 111, 223). Paste the code into the HEX field and the RGB fields fill in.
What is a 3-digit HEX code?
A short form where each digit is doubled: #FC0 is the same as #FFCC00. The HEX field accepts both forms and always shows the full six digits.
What contrast ratio does text need?
WCAG 2.2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text, which is about 24 px regular or 18.66 px bold. Level AAA raises those to 7:1 and 4.5:1.
Why do the HSL numbers change slightly when I edit RGB?
HSL is shown in whole degrees and percent, so it is rounded. RGB is the exact value the screen uses, and the HEX code is the same RGB written in base 16.
Can I pick a color from my screen or from a photo?
The swatch opens your browser's own color picker. Chrome and Edge on desktop add an eyedropper that samples any pixel on screen, and the macOS color panel used by Safari has one too; phones usually offer a palette only.