Color Picker
Type any colour as hex, rgb(), hsl(), or a CSS name: get every other notation, WCAG contrast against black and white, and a shade ramp.
Fill in the values and calculate
The form sends itself back to this page — results print below, computed on the server.
No results yet: fill the form above and press Calculate.
About Color Picker
One colour in, every notation out: hex, rgb(), hsl(), CMYK and HSV are computed from the same channels, whatever you typed in. CSS colour names are understood too.
Contrast is measured the WCAG way, so the pass and fail calls match what accessibility checkers report. The shade ramp mixes toward black and white in even steps for picking companion colours.
Questions about Color Picker
How is the contrast ratio computed?
By the WCAG formula (Llight + 0.05) / (Ldark + 0.05) on relative luminance, exactly what validators and lighthouse use.
Are the shades just lighter versions?
They are mixes: darkening scales each channel toward black, lightening mixes it toward white, so hue is preserved at every step.
Does it handle alpha?
An alpha on rgba() or hsla() is read but not carried into the swatches, because contrast maths needs one opaque colour.
Bookmark and homescreen
- Press Ctrl+B now (or Cmd+B on macOS) to bookmark this page in your browser.
- Drag this link to your bookmarks bar and it will always open this tool: Color Picker.
- On a phone: open in Chrome/Safari and use "Add to Home Screen" — the site ships a homescreen icon and manifest, so it installs like an app.
- Two addresses work:
https://useful-utilities.com/color-picker/andcolor-picker.useful-utilities.com. Copy whichever you prefer.