Color Picker
Pick any color and get its hex, rgb(), and hsl() values, 10 tints and 10 shades, and WCAG contrast ratios against white and black.
Processed locally in your browser — nothing is uploaded.
Formats
- Hex
- #3b82f6
- RGB
- rgb(59, 130, 246)
- HSL
- hsl(217, 91%, 60%)
Tints (toward white)
Shades (toward black)
WCAG contrast
- Against white
- 3.68:1AA failAAA failAA large pass
- Against black
- 5.71:1AA passAAA failAA large pass
AA needs 4.5:1 for normal text (3:1 for large text); AAA needs 7:1.
About Color Picker
A quick visual color workbench: pick a color and immediately see it in every common CSS notation with one-click copy, plus a ladder of 10 tints (toward white) and 10 shades (toward black) you can click to explore.
The contrast section shows the WCAG ratio of your color against white and black text with AA/AAA pass badges, so you can tell at a glance whether the color works as a text or background color.
Common uses
- Grab hex/rgb/hsl values for a color while styling a page
- Find a lighter or darker variant of a brand color for hover states
- Check whether white or black text is readable on a background color
Example
Input
#3b82f6
Output
rgb(59, 130, 246) · hsl(217, 91%, 60%) · 3.68:1 vs white, 5.71:1 vs black