Color Picker & Converter - HEX, RGB, HSL

Color picker with hex, RGB, HSL, HSV, CMYK and HWB output

Pick a colour with the saturation/value square, the RGB sliders or the colour wheel, and every format updates at once with a copy button beside each one. Nothing is uploaded and nothing is processed remotely — the conversions are arithmetic running in your browser, so the tool works offline once the page has loaded, and the colours you save stay in your own browser’s local storage.

The panel gives you three things beyond a raw colour value: a harmony generator that builds a related set from the colour you chose, a contrast section that scores text-and-background pairs against the WCAG ratios, and a shareable link that encodes your current colour in the URL so you can send the exact swatch to someone else.

Formats the tool outputs

Every box is a live output with a copy button; you set the colour with the picker controls rather than by typing into these fields. To start from a specific colour you already have, append it to the page address as ?color=%233B82F6 — a six-digit or three-digit hex is accepted — and the picker will load on that colour. That is also what the Share Color button produces, so a link carries the exact value, the opacity and the harmony type you had selected.

What it does not do

There is no eyedropper for sampling a colour from your screen and no image upload for pulling a palette out of a photograph. It picks and converts colours; it does not extract them from other material. There is also no named-colour lookup, and the CMYK figures use the plain arithmetic conversion, which is fine for a first approximation but is not colour-managed — see the print note below.

Why HSL makes building a set of shades easier than hex

This is the practical reason to care about formats at all. Hex and RGB describe a colour as three independent light channels. HSL describes it as three properties a person can reason about:

• Hue, 0–360 degrees around the colour wheel — roughly, which colour it is. Red sits near 0, green near 120, blue near 240.
• Saturation, 0–100% — how much of the colour there is, from grey at 0% to fully vivid at 100%.
• Lightness, 0–100% — black at 0%, the pure hue at 50%, white at 100%.

Suppose you need a hover state 10% darker than #3B82F6. In hex there is no obvious move: you would guess at the digits, check it, and guess again, and whatever you land on will probably have drifted in hue as well as darkness. In HSL the same colour is hsl(217, 91%, 60%) and the answer is simply hsl(217, 91%, 50%). The hue and saturation are untouched, so the darker version is unmistakably the same colour.

That property scales into a whole ramp. Fix the hue and saturation, vary only the lightness, and you get a set of steps that read as one family — the standard 50-to-900 scale in most design systems is built exactly this way. The Monochromatic harmony in this tool does it for you: it holds hue and saturation and produces five steps at the current lightness plus and minus 15 and 30 percentage points, clamped at 0 and 100. That is a usable base ramp in one click, and the individual swatches are clickable so you can take any step and keep working from it.

Two things to know when you build ramps this way. First, equal steps in lightness are not equal steps in perceived brightness — HSL is a simple transform of RGB and takes no account of how human vision responds, so the yellow end of a scale will look lighter than the blue end at the same nominal lightness. Adjust by eye at the extremes. Second, dropping lightness towards 0 or raising it towards 100 flattens saturation differences, so the darkest and lightest steps of two different hues converge; if the near-black step needs to still read as blue, back the lightness off and let saturation carry it.

The Color Tools buttons

The manipulation buttons apply exactly these moves in HSL and hand the result back as the current colour, so you can chain them:

• Lighten and Darken — lightness up or down by 10 percentage points, clamped.
• Saturate and Desaturate — saturation up or down by 10 points.
• Complement — rotates the hue by 180 degrees.
• Invert — subtracts each RGB channel from 255. This is not the same as Complement and often looks quite different.
• Grayscale — collapses the colour to a neutral of the same weight.

Converting between formats, and where conversions lose something

Hex and RGB are the same information written differently. #3B82F6 is 3B, 82, F6 in hexadecimal, which is 59, 130 and 246 in decimal — a lossless, reversible pair. Three-digit hex such as #39F is shorthand in which each digit is doubled, so it expands to #3399FF; it can only express 4,096 of the 16.7 million values, which is why the tool always outputs the six-digit form.

HSL and HSV are also derived from RGB, but they round on the way out: the hue is reported as a whole number of degrees, saturation and lightness as whole percentages. Round-tripping RGB to HSL and back can therefore land you one or two units off on a channel — invisible on screen, but worth knowing if you are diffing values or writing tests. Keep one format as the source of truth in your codebase rather than converting back and forth in both directions.

CMYK is the conversion to treat with real caution. The arithmetic here is the standard naive formula, and it takes no account of the ink set, paper stock or colour profile a printer will actually use. Vivid screen colours — saturated blues, greens and oranges in particular — simply lie outside what four-colour process printing can reproduce, and no conversion formula can change that. Use the CMYK output to communicate roughly what you want, and let the print supplier convert properly with the profile for the job.

HWB expresses the same colour as a hue with a percentage of white and a percentage of black mixed in. It maps closely to how people describe paint, and it is a genuinely nice way to reason about tints and shades if your target supports it.

Alpha and transparency

The opacity slider runs from 0% (fully transparent) to 100% (fully opaque) and feeds the alpha value in the RGBA and HSLA outputs, where it appears as a decimal from 0 to 1 — 50% opacity becomes 0.5. Alpha is not part of the colour; it is an instruction about how to blend the colour with whatever is behind it. Consequences worth planning around:

• A semi-transparent colour has no fixed appearance. The same rgba(59, 130, 246, 0.4) looks like one colour over white and a different one over a dark background, which is why it cannot be reduced to a single hex.
• Contrast cannot be computed from a translucent value alone. The WCAG ratio is defined between two actual rendered colours, so an accessibility check has to be run against the composited result, not the alpha value. The contrast section of this tool deliberately evaluates every pair at full opacity for exactly that reason.
• Stacked translucency compounds. Two 50% layers do not give 100%; they give 75% coverage, and a third gives 87.5%. Overlays built by nesting translucent panels drift darker than intended.
• Prefer a solid colour where you can. If a translucent shade over a known background is what you want, pick the composited result and use it opaquely — it renders more predictably and survives being moved onto a different background.

Alpha is preserved in saved colours and in the shareable link, so a swatch you send keeps the opacity you set.

Picking colours that stay legible as text

The contrast section takes the current harmony set and scores real text-and-background pairs. Every colour is tested with white text and with black text, and colours from the set are also tested against each other — those pairings are only shown when they clear 3:1, so the list does not fill with combinations nobody should ship. Each row is rendered as actual type, with a font selector, because a ratio on its own does not tell you whether something is comfortable to read.

The thresholds are the published WCAG 2 ones, computed from relative luminance:

“Large” means at least 18 point, or 14 point bold, or the pixel equivalents. Practical guidance that follows from the maths rather than from taste:

• Contrast is driven by lightness far more than by hue. Two colours can be violently different in hue and still fail, because they sit at similar luminance. If a pair fails, move the lightness apart before you touch the hue.
• Mid-lightness backgrounds are the hard case. Around 50% lightness, neither white nor black text clears 4.5:1 comfortably. Push the background lighter or darker rather than hunting for a text colour that rescues it.
• Saturated yellows, cyans and light greens are luminous. They almost always need black text, and they make poor backgrounds for white type no matter how dark they look on a phone at low brightness.
• Brand colours often fail as text colours while passing as fills. A brand blue that is fine for a button background may be unreadable as body copy on white; keep a darker variant of the same hue for text and use the ramp to generate it.
• The ratio ignores font weight. A thin weight at a bare pass is harder to read than a medium weight at the same ratio, so leave headroom for light typefaces.

Harmonies, saved colours and sharing

The harmony generator rotates the hue around the wheel while holding saturation and lightness, producing seven schemes: complementary (opposite, 180 degrees), analogous (neighbouring hues either side), triadic (three hues 120 degrees apart), tetradic and square (four-colour arrangements), split-complementary (the two hues flanking the complement, which keeps the contrast without the harshness of a straight opposite), and monochromatic (the lightness ramp described above). Any swatch in the generated set is clickable and becomes the new working colour, so a harmony is a jumping-off point rather than a fixed output. The colour wheel shows where the current hue and the generated set sit relative to each other, which makes the geometry of each scheme immediately obvious.

Saved colours are kept in your browser’s local storage: they persist across visits on that browser, are not synced to any account or other device, and disappear if you clear site data. For anything you need to keep, copy the values out or use the shareable link, which encodes the colour, the opacity and the harmony type in the URL and requires no storage at all.