How it works:
Pick a color or enter HEX/RGB values to instantly convert between formats. Perfect for web design and finding exact color codes.
All Formats:
Enter a color in any format to see it in HEX, RGB, and HSL at once. Useful whenever a design gives you one format but your code or tool wants another.
HEX, RGB, and HSL — what each one means
RGB describes a color as amounts of red, green and blue light, each from 0 to 255. It's how screens actually make color (additive light), so rgb(255,0,0) is full red.
HEX is the same RGB values written in base-16: #RRGGBB, where each pair is one channel from 00 to FF (0–255). #FF0000 is exactly rgb(255,0,0) — just more compact, which is why it's the default in CSS and design tools.
HSL takes a different, more human angle: Hue (0–360° around a color wheel), Saturation (how vivid, 0–100%), and Lightness (how bright, 0–100%). It's the easiest format for tweaking a color — nudge lightness to make a shade, rotate hue to find a matching color.
When and why you'd use each
- HEX — pasting a brand color into CSS or a design handoff; the most widely recognized format.
- RGB / RGBA — when you need an alpha (transparency) channel, or you're manipulating channels in code.
- HSL — building a palette: lighten/darken by changing L, or generate harmonious colors by rotating H while keeping S and L.
Worked examples
A mid blue: hue 204° puts it in the blue range, 70% saturation is fairly vivid, 53% lightness is balanced.
Frequently asked questions
Which format should I use in CSS?
All three are valid in CSS. HEX is the most common; use HSL when you want to adjust a color by hand, and RGBA/HSLA when you need transparency.
What about 8-digit hex or an alpha channel?
#RRGGBBAA adds a two-digit alpha (opacity) at the end, matching rgba(). #FF000080 is red at ~50% opacity.
Is HSL the same as HSB/HSV?
No. They share a hue wheel but differ in the third axis — HSL uses Lightness, HSV/HSB uses Value/Brightness — so the numbers aren't interchangeable.
Why does the same hex look different on two screens?
Displays vary in calibration and color profile. HEX/RGB specify sRGB values, but each panel renders them slightly differently.