Color Picker
Pick a colour with the native colour picker or type a value in HEX, RGB or HSL — every field stays in sync. See contrast ratios against white and black, and copy any format with one click.
How to use
- 1
Pick a starting colour
Click the colour square on the left to open the browser's native colour picker, or type a HEX, RGB or HSL value into the matching field.
- 2
Edit any field
Every field stays in sync. Type into RGB and HSL updates; type into HSL and HEX updates. Invalid input is highlighted and reverted on blur.
- 3
Check contrast
The right panel shows the WCAG contrast ratio of your colour against pure white and pure black, with a sample swatch.
- 4
Copy any format
Use the Copy button next to HEX, RGB or HSL to put the value on your clipboard in a single click.
Common use cases
- Grab a HEX value from a brand guideline to share with a designer.
- Convert a HEX colour to HSL so you can tweak lightness in a CSS variable.
- Check whether a chosen accent colour is readable on white before shipping.
- Sample a colour from a screenshot using the native picker to reuse in code.
Limitations
- The native picker does not support alpha — use solid HEX, RGB or HSL values only.
- HEX shorthand (#abc) is supported and normalised to #aabbcc on copy.
- Contrast ratios use the WCAG 2.1 sRGB formula and ignore gamma correction differences across displays.
Frequently asked questions
Related tools
View allColor Palette Generator
Generate harmonious colour palettes from a base colour.
CSS Gradient Generator
Build linear and radial CSS gradients visually.
Contrast Checker
Check WCAG colour contrast between two colours.
SVG Optimizer
Minify and clean SVG markup safely.