About the HEX to RGB Converter
This HEX to RGB converter takes any hexadecimal colour code and returns the equivalent rgb() triplet, an rgba() value at whatever alpha you set, and the matching HSL notation. It also breaks out the individual red, green and blue channels and reports the colour's relative luminance, the figure that underpins every WCAG contrast calculation. A live swatch shows the colour at full size, and a CSS block gives you the value as custom properties in three notations at once, so you can paste whichever form your stylesheet already uses.
How to use the HEX to RGB Converter
- 1
Type or paste a code into the HEX colour field — with or without the leading hash, in three or six digits.
- 2
Move the Alpha slider if you need a translucent rgba() value; leave it at 100 percent for a solid colour.
- 3
Read the Values panel for the RGB, RGBA and HSL forms plus the individual channels and the luminance.
- 4
Copy the CSS block, which declares the colour as hex, bare RGB channels and bare HSL channels.
What people use it for
Adding transparency to a brand colour
Design tools hand you a solid hex. Drop it in, set the alpha to 20 percent and you have the rgba() value for a hover tint or a subtle background wash.
Matching a colour across platforms
Android and iOS APIs frequently want integer channels rather than a hex string, so the separate red, green and blue readings save you doing the arithmetic twice.
Building alpha-flexible design tokens
The bare-channel custom property lets you write rgb(var(--brand-rgb) / 0.5) anywhere, so a single token serves every opacity you need.
Checking whether a colour is light or dark
The relative luminance figure answers that objectively — above roughly 0.18 a colour will generally carry dark text better than light.
How a HEX code becomes three numbers
A six-digit hex code is three pairs of base-16 digits, one pair per channel, in red-green-blue order. Each pair covers two hexadecimal places, so it can express 16 times 16, or 256, distinct values from 00 to ff — precisely the 0 to 255 range of an eight-bit channel. Converting a pair by hand means multiplying the first digit by 16 and adding the second, where a to f stand for 10 to 15. In #4f46e5 the red pair 4f is 4 times 16 plus 15, which is 79; 46 is 4 times 16 plus 6, which is 70; and e5 is 14 times 16 plus 5, which is 229. Hence rgb(79, 70, 229). The three-digit shorthand doubles each digit, so #f0c expands to #ff00cc — only colours whose pairs happen to repeat can be written that way. An eight-digit code appends an alpha pair, where 00 is fully transparent and ff fully opaque, making #4f46e580 roughly 50 percent opacity.
What relative luminance actually measures
Relative luminance is not the same as HSL lightness, and confusing the two is behind a great many failed contrast checks. WCAG defines it by first converting each channel to the 0 to 1 range, then reversing the sRGB gamma encoding: channels at or below 0.03928 are divided by 12.92, and everything above is transformed with ((c + 0.055) / 1.055) raised to the power 2.4. The three linearised values are then weighted and summed as 0.2126 times red, plus 0.7152 times green, plus 0.0722 times blue. Those weights are the crux of it — human vision is far more sensitive to green light than to red, and barely sensitive to blue at all, so green contributes roughly ten times what blue does. This is why pure blue at rgb(0, 0, 255) has a luminance near 0.07 and looks almost black in terms of contrast, while pure yellow sits above 0.9 and behaves almost like white.
Tips
- Both three-digit and six-digit codes are accepted, and the hash is optional.
- Hex codes are case-insensitive, so pick one casing convention and keep your tokens consistent.
- Store bare channels rather than a full rgb() string in a custom property if you want to vary the alpha later.