๐จ 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.
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.