CSS Colour Converter
Paste a colour value in any CSS format — HEX, RGB, RGBA, HSL, or HSLA — and instantly see it converted to every other format. Use the colour picker for visual selection, then copy any output with a single click. Everything runs client-side; your colours never leave your browser.
Try These Examples
#e74c3c— A vivid red in HEX notationrgb(46, 204, 113)— An emerald green in RGBhsl(271, 76%, 53%)— A rich purple in HSLrgba(52, 152, 219, 0.75)— A semi-transparent blue in RGBA
How It Works
Every colour you see on screen is ultimately a mix of red, green, and blue light. CSS gives you several notations to express that same colour, each with its own strengths:
- HEX (#rrggbb) — Encodes each RGB channel as a two-digit hexadecimal number from
00(0) toff(255). The shorthand form#rgbdoubles each digit, so#f60is identical to#ff6600. An eight-digit variant (#rrggbbaa) adds alpha transparency. HEX is compact and by far the most common format in CSS codebases. - RGB / RGBA — Specifies red, green, and blue as decimal integers from 0 to 255. RGBA adds a fourth value between 0 and 1 for opacity. The format reads naturally and makes it easy to see how much of each primary channel contributes to the final colour.
- HSL / HSLA — Describes colour using Hue (0–360° on the colour wheel), Saturation (0–100%), and Lightness (0–100%). HSL is often preferred by designers because you can lighten or darken a colour by adjusting lightness alone, or desaturate it without changing its hue. HSLA adds an alpha channel for transparency.
This tool parses your input, identifies which format you used, normalises it to internal RGB + alpha values, and then recalculates every other representation. The conversion between RGB and HSL follows the standard algorithm defined in the CSS Color Module specification. Everything runs in plain JavaScript with no external dependencies.
Frequently Asked Questions
What is the difference between RGB and HSL colour models?
RGB (Red, Green, Blue) defines colours by mixing three light channels, each ranging from 0 to 255. HSL (Hue, Saturation, Lightness) describes colours in a way that is closer to human perception: hue is the colour wheel angle (0–360°), saturation controls vividness (0–100%), and lightness controls brightness (0–100%). HSL is generally easier to tweak by hand because adjusting one value produces predictable, intuitive results.
How does HEX colour notation work?
HEX colours encode RGB values as hexadecimal numbers prefixed with a hash (#). A six-digit HEX like #ff6600 contains three pairs: ff (red = 255), 66 (green = 102), and 00 (blue = 0). The three-digit shorthand #f60 doubles each digit, making it equivalent to #ff6600. Eight-digit HEX values append two digits for alpha transparency, where ff is fully opaque and 00 is fully transparent.
What does the alpha channel do in RGBA and HSLA?
The alpha channel controls transparency. It is a decimal value between 0 (fully transparent) and 1 (fully opaque). RGBA and HSLA are extensions of RGB and HSL that include this fourth parameter. For example, rgba(255, 0, 0, 0.5) produces a semi-transparent red. Modern CSS also allows the syntax rgb(255 0 0 / 0.5) without the “a” suffix.
Is my data sent to a server when I use this tool?
No. This colour converter runs entirely in your browser using JavaScript. There are no API calls, no server processing, and no data storage. You can verify this by opening the Network tab in your browser’s developer tools while using the tool.