What is the difference between HEX, RGB, HSL and HWB?

HEX and RGB both describe a colour by its red, green and blue amounts (HEX in hexadecimal, RGB in decimal 0-255). HSL describes it by hue, saturation and lightness, which is friendlier for picking tints and shades. HWB describes it by hue plus how much white and black are mixed in, which many designers find the most intuitive. All four describe the same pixel — this tool just shows every notation at once.

How do I add transparency or an alpha channel?

Drag the alpha slider. When alpha is below 1 the converter switches HEX to its 8-digit form (the last two digits are the alpha byte) and shows rgba() and hsla() instead of rgb() and hsl(). HWB uses the slash syntax hwb(h w% b% / a).

Can I paste a colour from my code to convert it?

Yes. Paste into any of the four format fields. The converter accepts 3-, 4-, 6- and 8-digit HEX, comma or space separated rgb()/rgba(), hsl()/hsla() and modern hwb() syntax, then recalculates every other format from your input.

Why does the converted value look slightly different when I round-trip it?

HSL and HWB use floating-point hue, saturation and lightness, while RGB and HEX are integers from 0 to 255. Converting HSL to RGB and back can shift a value by one unit because of that rounding. The tool keeps RGBA as the source of truth to minimise drift, but tiny differences at the edges are normal and visually identical.

What do the contrast ratios mean?

They show the WCAG contrast ratio of your colour against pure white and pure black. A ratio of 4.5:1 or higher passes AA for normal text, and 3:1 or higher passes AA for large text. Use it as a quick check that text in your chosen colour will be readable.

Is my colour data sent anywhere?

No. All conversion, contrast maths and swatch storage happen entirely in your browser using JavaScript. Saved swatches live in your browser localStorage and never leave your device.

Are these the same values my CSS will render?

Yes for HEX, RGB and HSL, which map directly to CSS colour notations. HWB is also a standard CSS Color 4 function supported by modern browsers. If you target older browsers, prefer the HEX or RGB output, which are universally supported.

Color Format Converter

A live colour format converter that shows the same colour as HEX, RGB(A), HSL(A) and HWB at the same time. Pick a colour with the native picker, nudge the red, green and blue sliders, set an alpha value, or paste an existing value from your stylesheet — every other format recalculates instantly, and each one has its own copy button. It is built for front-end developers, UI designers and anyone who keeps a colour in one notation but needs it in another.

How it works

Internally the tool keeps a single source of truth: an RGBA tuple (red, green and blue from 0 to 255, plus an alpha from 0 to 1). Whatever you do — moving a slider, choosing from the picker, or typing into a field — is converted into that tuple, and then every displayed format is derived from it. This avoids the round-trip drift you get when tools chain conversions one after another.

The conversions use the standard colour-space formulas. RGB to HSL finds the maximum and minimum channel to compute lightness, chroma and hue. HSL to RGB reverses that with the chroma and hue-sextant method. HWB is derived from the hue plus the proportion of white (the smallest channel) and black (one minus the largest channel), and converted back by mixing white and black into the pure hue. When alpha drops below 1, the HEX output switches to its 8-digit form, RGB becomes rgba(), HSL becomes hsla() and HWB uses the / a syntax.

Two extra read-outs help you ship colours with confidence. The WCAG contrast panel shows the ratio of your colour against pure white and pure black, flagging whether it passes AA for text. The channel detail panel breaks out hue, saturation, lightness, whiteness and blackness so you can reason about tints and shades. Save any colour as a swatch and it persists in your browser for next time.

Example

Say your design system stores brand indigo as #4f46e5. Paste it into the HEX field and the converter shows rgb(79, 70, 229), hsl(244, 76%, 59%) and hwb(244 27% 10%). Drag the alpha slider down to 0.5 and the outputs become #4f46e580, rgba(79, 70, 229, 0.5), hsla(244, 76%, 59%, 0.5) and hwb(244 27% 10% / 0.5). The contrast panel reports about 5.9:1 on white — comfortably passing AA for body text. Click Copy on whichever row your codebase uses, and you are done.

Every calculation happens locally in your browser; no colour values are ever uploaded.