Color Picker — HEX, RGB & HSL Converter

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.

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.

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.

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.

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.

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.