Color Picker — HEX, RGB & HSL Converter
Use this free online color picker to choose a color, convert HEX, RGB, HSL and HSV values, and copy color codes for your website or design.
Open this tool
Checking access…
About this tool
Choose a colour from the swatch or paste one you already have, and get it back in every notation a stylesheet, a design file or a print spec might ask for: HEX, RGB, HSL and HSV, with opacity carried through. Each value has its own copy button. The page also scores the colour for contrast against black and white text at the WCAG thresholds, and builds tint, shade and colour-wheel variations you can click to keep exploring.
Using this tool
How do I use this online color picker?
Choose a color with the swatch or paste a HEX, RGB or HSL value. Adjust opacity if needed, then use the copy button beside the format you want. You can also explore tints, shades and color harmonies, or compare contrast against black and white text.
Which colour notations can I paste in?
Hex with three, four, six or eight digits; rgb() and rgba() with numbers or percentages; and hsl() and hsla() with the hue in degrees, radians, gradians or turns. Comma and space separated forms both work, as does the slash before an opacity.
Why are CSS colour names such as “rebeccapurple” rejected?
There are around 150 of them with several near-identical pairs, and a small misspelling would silently give you a different colour rather than an error. Paste the hex value instead.
What do the contrast numbers mean?
The ratio between this colour and black or white text, on the WCAG scale from 1 to 21. Body text needs 4.5:1 to meet AA, large text and interface borders need 3:1, and 7:1 meets AAA.
Why does the HSL value shift slightly when I convert back and forth?
There are far more RGB colours than whole-degree HSL ones, so a round trip has to round somewhere. This tool keeps RGB as the real value and derives the others each time, so the drift never accumulates.
Can I pick a colour from something else on my screen?
If your browser supports the EyeDropper API — current Chrome and Edge do — a “Pick from screen” button appears. Firefox and Safari have no equivalent, so the button is hidden there rather than shown broken.
Tool activity
Simple tools for everyday work.
Get expert help from ALCO.
Need help with a website or a workflow beyond this tool? Explore ALCO’s website development services for your business.