Color Picker
A color picker turns a color you choose into the codes software needs: HEX (#RRGGBB), RGB (three values from 0 to 255) and HSL (hue 0 to 360°, saturation and lightness in percent). This tool shows all three at once, with one-click copy, WCAG contrast ratios and a row of tints and shades.
#2F6FEBrgb(47, 111, 235)hsl(220, 82%, 55%)cmyk(80%, 53%, 0%, 8%)Contrast on white 4.57:1, on black 4.59:1 (WCAG AA needs 4.5:1 for body text).
How to use the Color Picker
- Click the large swatch to open your system color picker and choose a color.
- Read the HEX, RGB and HSL codes, and press Copy next to the one you need.
- Check the contrast ratios on white and on black to see whether text in this color will be readable.
- Click any tint or shade in the row below to switch to that lighter or darker version.
Formula
HEX = R, G, B as two hex digits each · contrast = (L1 + 0.05) ÷ (L2 + 0.05)RGB is converted to HSL with the standard hue, saturation and lightness formulas. Contrast uses WCAG 2 relative luminance, where each sRGB channel is linearized and weighted 0.2126 R + 0.7152 G + 0.0722 B. Tints mix the color with white and shades mix it with black.
Color formats
- HEX (#RRGGBB): six hexadecimal digits, the most common format on the web
- RGB: red, green and blue values from 0 to 255, used in CSS and design software
- HSL: hue as an angle on the color wheel, plus saturation and lightness percentages, handy for building lighter and darker variants
Contrast and accessibility
WCAG 2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (about 18.5 px bold or 24 px regular). Check the ratio before using a color for text, buttons or links, and avoid relying on red and green alone to carry meaning.
Color Picker questions
What is the difference between RGB, HEX and HSL?
They describe the same colors in different notations. RGB lists red, green and blue intensities from 0 to 255. HEX writes those same three values as six hexadecimal digits, such as #FF0000 for red. HSL describes hue, saturation and lightness, which makes it easier to adjust a color by eye.
How do I convert HEX to RGB?
Split the six HEX digits into three pairs and convert each pair from base 16 to base 10. For #2F6FEB, 2F is 47, 6F is 111 and EB is 235, so the color is rgb(47, 111, 235). This tool shows both codes at once, so you can copy either.
What contrast ratio do I need for accessible text?
WCAG 2 level AA needs at least 4.5:1 for normal text and 3:1 for large text and user interface components. Level AAA raises normal text to 7:1. The ratios shown under the codes tell you how the color performs as text on white and on black.
How do I choose colors that work well together?
Start from one base color and build around it: complementary colors sit opposite on the color wheel, analogous colors sit next to each other. Many designers use a 60-30-10 split of dominant, secondary and accent colors, and limit a palette to three to five colors.
What are tints and shades?
A tint is a color mixed with white, and a shade is a color mixed with black. They keep the same hue while changing lightness, which is how design systems build ranges such as hover states, backgrounds and borders from a single brand color.
How do I use these color codes in CSS?
Paste any of the three formats directly into CSS: color: #2F6FEB, color: rgb(47, 111, 235) or color: hsl(220, 83%, 55%). Store brand colors in CSS custom properties, such as --brand: #2F6FEB, so you can change them in one place. All three notations render exactly the same color.
Why does the same color look different on different screens?
Screens differ in color gamut, calibration and brightness, so the same code can render slightly differently. The web assumes the sRGB color space by default. For consistent results, design in sRGB and check important colors on more than one device.