Color converter

Convert HEX, RGB and HSL and pick with a color picker.

HEX RGB HSL

A designer sends you #3E7BFA. The CSS you are editing uses rgb() values. The theme file wants HSL because that is how the dark variant is generated. It is the same colour three times, and converting it by hand is tedious enough that most people just guess and eyeball it.

This converter keeps all three notations in sync. Change one, and the other two follow.

How it works

How to use it

Use the colour picker to choose a shade visually, or type directly into the HEX, RGB or HSL field. Whichever field you edit becomes the source, and the other two are rewritten to match. Each has a Copy button that puts the value on your clipboard in valid CSS form — #3e7bfa, rgb(62, 123, 250), hsl(220, 95%, 61%).

Three-digit shorthand is accepted: type #f0c and it expands to #ff00cc. Invalid input is ignored rather than guessed at, so a half-typed value will not scramble the other fields.

What the three notations mean

HEX is RGB written in base 16. #3E7BFA is red 3E, green 7B, blue FA — each pair a number from 00 to FF, which is 0 to 255. Compact, and the usual form in design tools.

RGB is the same three numbers in decimal, 0 to 255 each. Easier to read and to adjust by hand.

HSL describes the colour the way people talk about it:

Channel	Range	Meaning
Hue	0–360	Position on the colour wheel. 0 red, 120 green, 240 blue
Saturation	0–100%	How vivid. 0% is gray
Lightness	0–100%	How light. 0% black, 100% white, 50% the pure hue

Why HSL is worth the extra step

HEX and RGB are exact but not intuitive — nothing about #3E7BFA tells you it is a blue, and darkening it means adjusting three unrelated numbers. In HSL you keep the hue and drop the lightness, and you have the same colour, darker. That is why design systems build their tints and shades in HSL and convert to HEX at the end.

Rounding note: HSL values are rounded to whole numbers, so converting HEX to HSL and back can land one step away from where you started. The difference is not visible on screen, but if you need an exact round trip, keep HEX as your source of truth.

Terms explained

HEX: A colour written as six hexadecimal digits after a hash, two each for red, green and blue. #ffffff is white, #000000 is black.
RGB: Red, green and blue given as decimal numbers from 0 to 255. The same information as HEX in a more readable form.
HSL: Hue, saturation and lightness. Describes a colour by which one it is, how vivid, and how light, which makes manual adjustment far easier.
Hue: The angle on the colour wheel, 0 to 360 degrees. Red sits at 0, green near 120, blue near 240.
Shorthand hex: A three-digit form such as #f0c, where each digit is doubled. It expands to #ff00cc.

Frequently asked questions

Do HEX, RGB and HSL describe different colours?

No. All three are notations for the same sRGB colour, so #3e7bfa, rgb(62, 123, 250) and hsl(220, 95%, 61%) render identically. They differ only in how easy they are to read and adjust.

Why does my HSL value change slightly after converting back and forth?

Hue, saturation and lightness are rounded to whole numbers for readability, and that rounding is not perfectly reversible. The shift is well below what the eye can see, but keep the HEX value if you need an exact match.

Can I enter a colour with transparency?

Not here. This tool handles opaque colours only. For transparency, add an alpha channel yourself — rgba() and hsla() in CSS, or an eight-digit hex where the last pair is the alpha.

How do I make a lighter or darker version of a colour?

Convert it to HSL, then change only the lightness. Keeping hue and saturation fixed gives you a tint or shade that clearly belongs to the same family, which is much harder to achieve by editing HEX digits.

Are colour names like "tomato" supported?

No, the fields accept HEX, RGB and HSL. CSS named colours each have a fixed hex equivalent, so look the value up once and paste it in.