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.
Color Picker
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
Frequently asked questions
Does this color picker run in my browser or on a server?
Everything runs in your browser — the conversions, tints, shades, and contrast ratios are computed locally with JavaScript, and no color you pick is transmitted or logged.
What contrast ratio does text need to pass WCAG?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (roughly 24 px, or 18.5 px bold); AAA raises that to 7:1. The tool shows your color's ratio against both white and black with pass/fail badges for each level.
What's the difference between a tint and a shade?
A tint is your color mixed toward white (lighter), while a shade is mixed toward black (darker). Both keep the same hue, which is why tints and shades work well for hover states and backgrounds derived from one brand color.
How do I decide between white and black text on a colored background?
Compare the contrast ratio of each: whichever of white or black scores higher against your background is more readable. Aim for at least 4.5:1 for body text — mid-lightness colors sometimes fail against both, in which case adjust the background.