Color Converter (HEX ↔ RGB ↔ HSL)
Paste a color in any CSS format and get the other formats plus a live preview.
- HEX
- RGB
- HSL
How to use
- Paste or type a color: #hex (3, 4, 6 or 8 digits), rgb()/rgba(), or hsl()/hsla().
- The swatch previews the color, and all three formats update instantly.
- Copy whichever format your CSS, design tool or code needs.
Examples
Brand color to HSL
Paste #336699 to get rgb(51, 102, 153) and hsl(210, 50%, 40%) — handy when you want to tweak lightness in HSL.
Semi-transparent overlay
Paste rgba(0, 0, 0, 0.5) to get #00000080 — the 8-digit hex form of 50% black for design tools that prefer hex.
Moving a brand color between tools
A design file gives HEX, CSS often wants RGB with an alpha channel, and a print quote asks for something else again. Converting once and copying the exact value avoids the drift that happens when a color is re-picked by eye in each tool.
Building a tint and shade scale
HSL is the practical format for variations because lightness is a separate number. Holding hue and saturation fixed and stepping lightness produces a scale that stays recognisably the same color, which is much harder to achieve by nudging RGB values.
Checking a color against a dark background
A color chosen against white often fails against a dark surface. Reading the lightness value gives a quick sense of how it will behave: values in the middle of the range tend to work on both grounds, while very light or very dark colors need a different value for each theme.
FAQ
Which color formats are supported?
HEX in 3, 4, 6 or 8 digits (with or without #), rgb() and rgba() with 0–255 channels, and hsl()/hsla() with degrees and percentages. Alpha carries across all formats.
What do H, S and L mean?
Hue is the position on the color wheel (0–360°), saturation is the color intensity (0% gray to 100% vivid), and lightness runs from 0% black through 50% pure color to 100% white.
How is alpha written in hex?
As a fourth pair of hex digits: #RRGGBBAA. 80 hex is 128 of 255, i.e. about 50% opacity. The converter shows the alpha form only when the color is not fully opaque.
Why does converting back and forth change a value by 1?
HSL uses rounded percentages while RGB uses 0–255 integers, so round-trips can shift a channel by ±1 — visually identical, and normal for all color tools.
When should I use HSL instead of HEX?
Use HEX for a fixed value you are copying between places, and HSL when you want to reason about the color — lighter, more muted, same family. Because HSL separates hue, saturation and lightness, adjusting one leaves the others intact, which HEX cannot do without recalculating all three channels.
What does the alpha value mean?
Alpha is opacity, from 0 for fully transparent to 1 for fully opaque. In HEX it is appended as two extra digits, so eight digits means the last pair is alpha. A color with alpha renders differently depending on what sits behind it, which is why a semi-transparent value looks different on a light and a dark background.
Are HSL and HSB the same thing?
No, though they are easy to confuse. HSL is used by CSS and its lightness runs from black through the pure color to white. HSB, common in design software, has brightness that runs from black to the pure color and never reaches white. The same numbers in the two models describe different colors.