DevClamp

Color Converter

Convert colours between HEX, RGB, HSL and HSV with a live preview and one-click copy for every format — paste any notation, get all four. Free, no sign-up — runs locally in your browser.

HEX
RGB
HSL
HSV

Four notations, one colour

Colour on a screen is just three numbers — how much red, green and blue light to mix — but the industry writes those numbers four different ways, and real work keeps handing you the wrong one: a brand guide in HEX, a design tool reporting HSB, a CSS file in HSL, a bug report with a raw rgb() triple. This converter takes any of the four and gives you back all of them at once, with a preview large enough to judge. Paste a notation, drag the picker, or type channel values — every representation updates together, because they are the same colour wearing different clothes.

How to use this tool

  1. Type or paste a colour in any notation — #4F46E5, rgb(79, 70, 229), hsl(243, 75%, 59%), hsv(243, 69%, 90%) — or use the picker to explore by eye.
  2. Check the preview swatch before trusting the numbers: it is rendered from the same values as the rows, so a mix-up between HSL and HSV shows up immediately as a colour that is clearly too bright or too dark.
  3. Copy the row you need. Each format has its own button and is written the way CSS expects it, so it pastes straight into a stylesheet.
  4. If an input is rejected, the message says why — a channel over 255, a percentage over 100 — rather than silently clamping your colour into a different one.

What each notation is actually saying

HEX is RGB in a trench coat: three bytes written in base 16, prefixed with #. #4F46E5 is red 0x4F (79), green 0x46 (70), blue 0xE5 (229). Nothing is gained or lost versus RGB, which writes the same three channels in decimal — the two are interchangeable and both describe the hardware directly. HSL re-describes the same point by hue (position on the colour wheel, in degrees), saturation (how far from grey), and lightness (0% black, 50% the pure hue, 100% white). HSV — also called HSB, the B standing for brightness — keeps hue and saturation but swaps lightness for value: 0% is black and 100% is the pure hue, full stop, with white unreachable by that dial alone. That single difference is responsible for a remarkable share of the world's "the colour looks wrong" bugs, because the two systems share two of their three numbers and quietly disagree about the third.

Rounding, and other honest limits

Conversions here are exact up to display rounding: HSL and HSV percentages and degrees are shown as whole numbers, so turning HEX → HSL → HEX by hand can land a step or two off on a channel (a green of 70 coming back as 72, via the rounded HSL values). Inside this page the canonical value is the RGB triple, and every row is rendered from it, so the four rows never disagree with each other — the drift only appears if you round-trip the rounded numbers yourself. The picker your browser provides works in RGB and may quantise what it returns; the text box is the precise way in. And this page converts opaque colours only: alpha belongs to compositing, which needs a background to mean anything.

Frequently asked questions

What is the difference between HSL and HSV?

They are two different ways to slice the same colour cylinder, and they disagree about what the third number means. HSL's lightness runs from black (0%) through the pure hue (50%) to white (100%), so hsl(240, 100%, 50%) is pure blue. HSV's value runs from black (0%) to the pure hue at full brightness (100%), with no white at the top at all. The classic trap: hsl(240, 100%, 25%) and hsv(240, 100%, 50%) are the same colour — mixing the two systems up gives you a colour twice as bright as you wanted, or half.

Why does the same colour have so many different numbers?

Because each notation answers to a different machine. HEX and RGB describe what a screen does: how much red, green and blue light to emit, per channel. HSL and HSV describe what a human picking a colour does: choose a hue around a wheel, then decide how washed-out and how bright. Designers think in HSL/HSV, code stores RGB/HEX, and converting between them is arithmetic, not approximation — apart from rounding to whole numbers, the four forms above are the exact same colour.

What does a 3-digit hex like #fff mean?

It is shorthand: each digit is doubled, so #fff is #ffffff (white), #f80 is #ff8800. CSS allows it anywhere a colour is taken, and it can only express colours whose channel values happen to be doubled-digit pairs — 4,096 of the 16.7 million colours. The converter always expands it to the full 6-digit form so you can see the real channel values.

Why did my hsl() colour look washed out in my design tool?

Almost certainly a system mix-up: the numbers were HSV from a colour picker (most design tools' HSB is HSV renamed) pasted into a CSS hsl() declaration, or the reverse. Feed the same numbers to both rows above and compare the previews — the converter shows you what each interpretation actually looks like, which settles in seconds an argument that otherwise runs on vibes.

Does the converter handle transparency (alpha)?

Not in this version: it converts the four opaque notations, and an 8-digit hex or rgba() input is rejected with an explanation rather than silently dropping the alpha channel — silently losing transparency is worse than refusing. If you need to flatten a translucent colour over a background, that is a compositing calculation, and it belongs in a tool that asks you for the background colour too.

Related tools

Regex Tester

Test regular expressions against your text with every match highlighted, a full match list and capture groups — plus one-click patterns for emails, URLs and dates.

Text Diff Checker

Compare two texts line by line and see exactly what was added and removed — colour-blind-safe markup with + and − signs, all in your browser.

UUID Generator

Generate random UUID v4 values in bulk — up to 100 at a time, with case and hyphen options — using your browser's cryptographic random source.