๐จ Color Picker
Click the swatch to open the color picker
Convert colors between HEX, RGB, and HSL notation with a live preview. Includes a contrast checker against white and black backgrounds. Useful for web design color decisions and accessibility checks.
How to use
- Click the swatch to open the color picker, or enter a value into the HEX, RGB, or HSL field.
- The other notations update automatically in real time.
- Check the contrast ratio on white and black backgrounds and adjust the color if needed.
- Click "Copy" to copy the value in whichever notation you need.
How the calculation works
Web colours are written as HEX, RGB or HSL. RGB mixes red, green and blue light at strengths from 0 to 255; HEX writes those three values as two hexadecimal digits each (#3366CC is red 0x33 = 51, green 0x66 = 102, blue 0xCC = 204). HSL describes colour by hue (an angle from 0 to 360 on the colour wheel), saturation and lightness, which makes adjustments such as "same colour, lighter" intuitive. The contrast check follows the formula in WCAG, the international web accessibility guidelines. Each colour's relative luminance is found by linearising its sRGB values (removing gamma) and weighting red 0.2126, green 0.7152 and blue 0.0722 to match the eye's sensitivity. Contrast ratio is (lighter luminance + 0.05) รท (darker luminance + 0.05), ranging from 1:1 to 21:1. WCAG asks for at least 4.5:1 for normal text (level AA) and 7:1 for the stricter AAA.
Worked example
#3366CC RGB: rgb(51, 102, 204) HSL: hsl(220, 60%, 50%) Contrast against white: about 5.37:1 โ passes AA (4.5:1) for normal text When choosing a grey text colour, #767676 on white is about 4.54:1, just passing AA, while the fractionally lighter #777777 is about 4.48:1 and falls short.
Things to be aware of
- Contrast thresholds depend on text size: large text (18pt, or 14pt bold) needs 3:1 for AA.
- Contrast is a guide to legibility. For colour-vision differences, also avoid conveying information by colour alone.
- Three-digit HEX (#36C) is the same colour as six digits with each doubled (#3366CC).
- The same colour code can look different depending on display settings and hardware.
FAQ
What is the contrast checker for?
It helps you verify whether a text/background color combination is readable enough to meet WCAG web accessibility guidelines.
Does it keep a history of colors I've picked?
Yes โ recently picked colors and common presets are available to reuse.
Can I look up the RGB value of a HEX code?
Yes โ enter the code in the HEX field and the RGB and HSL fields update automatically.
Can I hand off a color to a design tool?
Yes โ copy the value in HEX, RGB, or HSL notation and paste it directly into Figma, a code editor, or any other tool.
Can I check whether a color combination is accessible?
Yes โ the contrast ratio against both white and black backgrounds is shown, giving you a quick read on WCAG AA/AAA compliance.