HEX, RGB & HSL Colour Converter
Pick a colour or paste a hex code and get the matching rgb() and hsl() instantly, with a live swatch — no more hunting for the right notation mid-stylesheet.
One colour, three notations
A colour rarely arrives in the format you need. A designer hands you a hex; a chart library wants rgb channels; and when you sit down to build a hover or focus state, hsl is the notation that actually lets you reason about it. Seeing all three side by side removes a small but constant source of copy-paste friction.
Once you have your palette, check that text on top of it is legible with the WCAG contrast-ratio checker before it reaches a real page.
Frequently Asked Questions
Which colour format should I use in CSS?
They render identically, so it comes down to how you want to reason about the colour. Hex is compact and what most design tools export. rgb() is explicit about the red, green, and blue channels and is handy when you already have those numbers. hsl() describes hue, saturation, and lightness, which makes it the easiest to tweak by hand — nudge the lightness to build a hover state, or shift the hue to find a complementary colour — without reaching for a colour picker.
How does hex map to RGB?
A six-digit hex colour is just three pairs of hexadecimal digits, one per channel: #RRGGBB. Each pair is a value from 00 to FF, which is 0 to 255 in decimal. So #3498db is R=0x34 (52), G=0x98 (152), B=0xdb (219), i.e. rgb(52, 152, 219). Three-digit shorthand like #f00 expands by doubling each digit, so it becomes #ff0000.
How is HSL calculated from RGB?
The RGB channels are normalised to 0–1, then hue comes from which channel is the maximum and how far the others fall behind it, saturation from the spread between the lightest and darkest channel, and lightness from their midpoint. Because HSL values are rounded to whole degrees and percentages, converting to HSL and back can shift a channel by one step — treat the hex or rgb value as the source of truth.
Does this handle alpha or opacity?
No — it converts solid colours between hex, rgb(), and hsl(). For transparency you would add an alpha channel with rgba()/hsla() or an eight-digit hex (#RRGGBBAA), where the final pair is the opacity. The three solid notations here are enough for the large majority of everyday colour work.
A convenience colour converter for CSS authoring. Rounding in HSL means a round-trip can shift a channel by one step; keep the hex or rgb value as your source of truth.