Skip to main content

Colour Converter

What it does

The Colour Converter translates any colour back and forth between the four formats you actually meet in real work: HEX, RGB, HSL, and HSV. Every field is bidirectional. Type a hex value and the RGB, HSL, and HSV equivalents appear next to it. Adjust an individual HSL channel and the hex updates to match. The live swatch shows the colour you currently hold, so each transformation is visible rather than implied.

Common situations

You’re moving a brand from Figma to Tailwind. Figma exports HEX; Tailwind 4’s design tokens lean on HSL. Doing the conversion mentally is the kind of small repetitive friction that produces typos at exactly the worst moment.

You’re debugging a CSS bug. DevTools shows rgb(57, 13, 88) for the rendered colour; the design file specifies #390d58. Are they the same? Drop the RGB in, look at the hex, confirm in five seconds.

You’re working on a generative art piece, a data visualisation, or any code that produces colour values programmatically. Most algorithms reason naturally in HSL (“rotate the hue, keep the saturation”) but every output target (CSS, WebGL, Canvas) wants RGB or HEX. The converter is the calibration tool: confirm a single colour translates correctly before generating thousands.

You’re auditing a stylesheet that mixes formats. Some declarations use hex, some RGB, some HSL with different precisions. Round-tripping every value through the converter normalises them and reveals duplicates that look different but compute to the same colour.

What you need to know

Each of the four formats describes the same point in colour space, but each parameterises it differently. Understanding which format describes what makes the difference between fluent CSS work and constant lookup.

HEX is the byte representation in shorthand. #390d58 is 0x39, 0x0d, 0x58 for red, green, blue. The leading # is a CSS convention; the bytes themselves are universal. Three-character hex (#abc) expands by repetition to six (#aabbcc). Both are valid CSS; the tool normalises to six on output.

RGB is the same bytes expressed as decimal numbers: rgb(57, 13, 88). Identical information to hex; different presentation. Modern CSS supports rgb(57 13 88) (space-separated, no commas) as the contemporary form, though comma form remains universal.

HSL recasts the colour as hue (where on the wheel, 0–360°), saturation (how pure, 0–100%), and lightness (how light or dark, 0–100%). HSL maps to design intent in ways RGB cannot. “Make this colour 10% lighter” is a single number change in HSL and a non-trivial calculation in RGB. Modern design systems lean heavily on HSL for exactly this reason.

HSV uses hue and saturation in the same way as HSL but replaces lightness with value, which behaves differently. In HSV, V at 100% is the most saturated possible colour at that hue; in HSL, L at 100% is white. They look numerically similar but produce different colours at extreme values, which is why the tool exposes both. Picker UIs typically work in HSV; design tokens use HSL.

The colour wheel for HSL hue: 0/360 is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta. Memorising these positions pays back dozens of times. Once internalised, you can predict roughly what hex will produce any given hue.

Frequently asked questions

How do I convert HEX to RGB?

Each hex pair represents one byte (0–255). #390d58 splits to 0x39 = 57, 0x0d = 13, 0x58 = 88, producing rgb(57, 13, 88). The converter does this automatically; the underlying maths is base-16 to base-10.

What’s the difference between HSL and HSV?

Both share hue and saturation. HSL’s third axis is lightness (white at 100%, black at 0%, pure colour at 50%). HSV’s third axis is value (pure colour at 100%, black at 0%, no white). The same numbers in each system describe different colours at extreme values.

Why does my hex value look slightly different in Figma versus a browser?

Both render sRGB by default, but Figma can apply a wide-gamut P3 transform on capable displays. The hex is the same; the photons differ. For brand work, document the hex as the source of truth and accept small rendering variance across surfaces.

Can CSS use HSL directly?

Yes. color: hsl(280, 75%, 20%) is fully supported across all modern browsers. Modern CSS also supports hsl() with optional alpha (hsl(280 75% 20% / 0.5)) and the newer space-separated syntax.

What is alpha in RGBA / HSLA?

Alpha is opacity: 0 is transparent, 1 (or 100% / 255 depending on representation) is fully opaque. It is not part of HEX in the standard form, though #RRGGBBAA (8-character hex with alpha) is supported in modern CSS.

Is HSL more accurate than RGB?

No. They describe the same colours with the same precision, just parameterised differently. Neither is “more accurate”. Choose the one that matches how you reason about the colour.

Which format should I use in a design system?

HSL for typography and decorative colours where lightness adjustments are the common operation. HEX for brand-locked values where the bytes need to match exactly. RGB rarely except where third-party APIs require it.

Why do I sometimes see #fff and sometimes #ffffff?

Three-character hex is a CSS shorthand that doubles each digit (#fff → #ffffff). Both produce identical rendered colours. The shorthand only works when each pair has matching digits, so #abc is valid (→ #aabbcc) but #abd is not.

Common problems

Problem: Editing the hue in HSL produces a colour that looks unrelated to the original.

The hue rotation is correct; what changed is the appearance of saturation and lightness at the new hue. Yellow at L=50% looks much lighter than blue at L=50% because human perception of luminance is hue-dependent. WCAG’s contrast formula accounts for this; HSL does not. If you need perceptually-uniform colour adjustment, look at OKLCH (the modern alternative); HSL is fine for most CSS work but not perfect.

Problem: A hex value entered with three characters did not produce the colour I expected.

Three-character hex doubles each digit. #abc becomes #aabbcc, not #0a0b0c or anything else. If you intended a darker colour, use the six-character form explicitly.

Problem: RGB values from a screenshot do not match the design source.

Most screen captures pass through gamma correction, which slightly shifts RGB values. The “true” colour is the source hex; the captured value is a rendering of it. Do not try to round-trip pixels back into design. Keep the source values authoritative.

Problem: Copying HSL from one tool and pasting into CSS produces an invalid value.

Some tools emit HSL with degrees (280deg); CSS accepts both forms but older browsers preferred 280 (no unit). Modern CSS handles deg, rad, grad, and turn. If a value is being rejected, check the unit syntax.

Tips

  • HSL hue runs 0–360 degrees around the wheel: 0/360 is red, 120 is green, 240 is blue. Worth memorising: it pays back fast in everyday CSS work.
  • For accessible “darker variant” behaviour, change L (lightness) in HSL. RGB-based darkening tends to shift hue subtly, which is why brand colours drift over time when nobody is using HSL.
  • HSV’s V (value) and HSL’s L (lightness) are not the same. V at 100% is the most saturated possible colour at that hue; L at 100% is white. Picking the wrong one gives you the right number on the wrong axis.
  • The space-separated CSS syntax (rgb(57 13 88), hsl(280 75% 20%)) is now the recommended form. Comma-separated still works everywhere; the new form is preferred in new code.
  • Modern OKLCH (a perceptually uniform colour space) is gaining ground for design systems. The converter does not handle it yet; for now, keep an eye on browser support and consider migrating once it stabilises.

Related tools in this suite

Both tools live in the Design Suite. The natural pairing is the Colour Palette Generator: that tool generates a palette in hex; this one lets you convert any of those swatches to the format your build pipeline prefers. The Colour Picker From Image outputs in hex and RGB simultaneously, which makes it the right starting point if your colour is currently trapped inside a screenshot.

Take it further

If you find yourself doing the same conversion over and over for one specific project, the conversion belongs in your codebase, not in a tool. Most CSS frameworks (Tailwind, vanilla custom properties, Sass) have native ways to express HSL-based colour systems that remove the round-trip entirely. The Knowledge Center covers the patterns where that pays off.