Color converter
The free Vivlab color converter instantly translates a color between the HEX, RGB, HSL and HSV formats, with transparency (alpha) support.
Pick a color with the selector or type in a value: every format updates automatically.
Current color
#483aff
Preset colors
How it works
Convert a colour in 3 steps
Pick a colour
Move the cursor inside the square and along the hue bar, or paste a HEX code to start from an exact value.
Adjust the values
Fine-tune each channel in the RGB, HSL or HSV fields, and set opacity with the transparency slider.
Copy the format you need
Each block shows the colour in one format, with a Copy button to paste it straight into your code or your mockup.
Understanding color formats
All these formats describe the same color, just in different ways. Here's what each one means.
HEX (hexadecimal)
The most common notation on the web. A # followed by 6 hexadecimal characters (0 to 9 then A to F): two for red, two for green, two for blue, like #483AFF. Two extra characters can encode transparency (#483AFF80). Compact and perfect for HTML and CSS.
RGB (Red, Green, Blue)
Describes a color by the intensity of three lights (red, green and blue), each ranging from 0 to 255. It's the model screens use: rgb(72, 58, 255). Add an alpha channel for transparency and you get rgba(72, 58, 255, 0.5).
HSL (Hue, Saturation, Lightness)
Built around how we actually perceive color. The hue places the color on the color wheel (0 to 360°), the saturation sets its intensity (0 to 100%), and the lightness runs from black to white (0 to 100%). Handy for lightening, darkening or desaturating a shade.
HSV (Hue, Saturation, Value)
Close to HSL and common in design software. Hue and saturation are the same, but the value (also called brightness) replaces lightness: at 0% the color is black, at 100% it's as vivid as it gets. It's the model behind most color pickers.
Alpha (transparency)
The alpha channel sets a color's opacity, from 0 (fully transparent) to 100% (fully opaque). You'll find it in rgba(), hsla() and in the 8-character HEX code.
Frequently asked questions
Making sense of the formats
What's the difference between HEX and RGB?
Both describe the same colour in red, green and blue. RGB writes it as three numbers from 0 to 255, HEX packs those same values into six hexadecimal characters, two per channel. So #FF0000 and rgb(255, 0, 0) are exactly the same.
What are HSL and HSV for?
They describe a colour by its hue (0 to 360°), its saturation and a third dial: lightness for HSL, value for HSV. That's more intuitive than RGB when you want to lighten or desaturate a colour without shifting its hue.
How does transparency work?
The transparency slider sets the alpha channel, from 0 (invisible) to 100% (opaque). As soon as opacity drops below 100%, the RGB and HSL blocks read as rgba() and hsla(), with the alpha value at the end of the parentheses.
Which format should I use, and where?
In modern CSS all three notations work everywhere, and HEX is the shortest to type for an opaque colour. HSL helps when you build variants of one tone, while rgba() and hsla() come in as soon as you need transparency. For a brand identity, keep a short list of reference HEX codes.
Are my colours saved anywhere?
No. The conversion happens entirely in your browser, with no data sent out. Nothing is stored or transmitted, and you can work offline.
Keep exploring