Convert a color between RGB, HSL and hexadecimal

Working with color on the web constantly involves juggling between several notations. A color converter prevents manual errors and lets you switch instantly from one format to another depending on the use case. Each format has its strengths, and knowing which one to use is one of the front-end developer's core reflexes.

Here are the typical scenarios that drive a color conversion:

• RGB is native to CSS and JavaScript, readable by humans to understand a dominant channel (red, green, blue on a 0-255 scale).
• HSL makes tweaking a hue trivial: just adjust saturation or lightness without recomputing each channel.
• HEX is the canonical format for copy-paste: six characters, compatible everywhere, ideal for Figma, Sketch mockups or style guides.
• HEX to RGB, RGB to HEX, HEX to HSL and their reciprocals are the most common operations in CSS and JavaScript.

RGB and RGBA (Red, Green, Blue, Alpha)

Each channel is encoded as an integer from 0 to 255, which corresponds to one byte per component and gives 16,777,216 possible colors. RGBA's alpha channel ranges from 0 (transparent) to 1 (opaque) and controls transparency.

.button {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX and HEX8 (hexadecimal notation)

Compact and widely used format: #RRGGBB on six characters, where each pair represents an RGB channel in base 16. The #RRGGBBAA variant on eight characters adds the alpha channel in hexadecimal (00 transparent, FF opaque). The short notation #RGB also exists: #F53 is equivalent to #FF5533.

.title  { color: #1400B6; }
.shadow { color: #1400B680; }   /* 50% alpha */
.accent { color: #F53; }        /* short form */

HSL and HSLA (Hue, Saturation, Lightness, Alpha)

HSL describes color perceptually. Hue is an angle on the color wheel (0 to 360°), Saturation and Lightness are percentages. It is the preferred format to generate variants: lighten a hovered button, desaturate a disabled state, build a consistent palette by varying only the hue.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* lighter */
$primary-muted: hsl(247, 30%, 36%);    /* less saturated */

Other existing formats

CMYK (Cyan, Magenta, Yellow, Key) is used in printing: it describes a color by subtraction of inks and is not relevant on screen. OKLCH and LAB are perceptually uniform color spaces introduced in CSS Color Level 4; they offer finer control over perceived lightness. This tool focuses on RGB, HEX and HSL conversions, which cover the vast majority of web needs.

HEX to RGB means parsing the string in pairs of characters and interpreting each pair as a base 16 integer:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB to HEX is the reverse: each channel is converted to base 16, padded to two characters, then concatenated.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB to HSL is more algorithmic. Channels are normalized between 0 and 1, the min and max are computed to derive lightness, then saturation, then hue based on the dominant channel. The full formula is documented in the CSS Color Module Level 3 specification.

The tool works both ways between RGB, HEX and HSL. To run a conversion:

1. Pick the input format: RGB, HEX or HSL.
2. Enter the value (for example #1400B6, rgb(20, 0, 182) or hsl(247, 100%, 36%)).
3. Run the conversion: the equivalents in the two other formats show up immediately.
4. Copy the result via the dedicated button and paste it into your style sheet or mockup.

The computation runs in your browser; no data is sent to any server.

• Web design and CSS: pick a HEX from a mockup and get the matching HSL to build a hover or active state without drifting from the base hue.
• Visual identity and palette: derive variants (light, dark, muted) from a primary color by tweaking HSL lightness or saturation.
• Illustration and graphic design: turn a screen color (RGB) into a hex code to share with a tool or a client.
• Accessibility: convert to RGB to then compute a contrast ratio (WCAG AA requires 4.5:1 for body text) against the background color.
• CSS variables and preprocessors: feed design tokens in a SASS file or a Tailwind theme from a single reference color.

A few full conversions to illustrate the mapping between the three formats:

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

With alpha channel:

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

What is the difference between HEX and HEX8?

Classic HEX encodes three RGB channels on six characters (#RRGGBB). HEX8 adds two characters for the alpha channel (#RRGGBBAA), which lets you handle transparency in a single string. #1400B6FF and #1400B6 render the same opaque color visually.

Should I prefer HSL or RGB in CSS?

Both produce the same rendering. HSL is more expressive when you build a consistent palette or state variants (hover, focus), because you tweak a single perceptual parameter. RGB stays handy when you work with data from a canvas or a sensor.

Why does my HEX look different from what I expected?

Three common causes: confusion between short #RGB and long #RRGGBB (characters are duplicated, not concatenated), a copy error on one character, or display on an uncalibrated screen. Also check that your CSS does not stack a parent opacity that alters the final rendering.

What is the alpha channel of RGBA and HSLA for?

The alpha channel controls the color's opacity, from 0 (fully transparent) to 1 (fully opaque). It is useful for overlays, shadows, disabled states or compositing over an image. Unlike the CSS opacity property, RGBA and HSLA only affect the targeted color, not its children.

Can a color be converted without precision loss?

Between RGB and HEX the conversion is exact; both formats encode the same 24-bit information. Conversion to HSL involves rounding on hue, saturation and lightness; a roundtrip RGB > HSL > RGB can therefore return a value offset by one unit on some channels.

Why use an online converter rather than a homemade function?

For a one-shot test, prototyping a palette or quickly checking the HEX equivalent of an HSL color extracted from a mockup, an online converter is immediate. For a recurring programmatic need, a library such as color, chroma-js or tinycolor2 remains more appropriate.