Convert colors between HEX, RGB, and HSL formats instantly. Use the color picker or enter values manually. All conversions happen live in your browser as you type.
Pick a color or enter values in any format to convert between HEX, RGB, and HSL.
HEX colors use a six-digit hexadecimal notation prefixed with #. Each pair of digits represents the Red, Green, and Blue channels respectively, with values from 00 to FF (0 to 255 in decimal).
RGB (Red, Green, Blue) is the most common color model for screens. Each channel ranges from 0 to 255, giving over 16 million possible color combinations.
HSL (Hue, Saturation, Lightness) is a more human-readable color model. Hue is a degree on the color wheel (0-360), while Saturation and Lightness are percentages. HSL makes it easy to create variations of a color by adjusting individual properties.
| Format | Syntax | Example | Best For |
|---|---|---|---|
| HEX | #RRGGBB | #FF5733 | CSS shorthand, design specs |
| RGB | rgb(R, G, B) | rgb(255, 87, 51) | CSS properties, programmatic use |
| HSL | hsl(H, S%, L%) | hsl(11, 100%, 60%) | Color palettes, accessibility tuning |
HEX is a hexadecimal representation of a color (e.g., #FF5733). RGB defines a color by its Red, Green, and Blue components (0-255 each). HSL defines a color by Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%). They all describe the same colors but in different ways.
To convert HEX to RGB, split the 6-digit hex code into three pairs. Convert each pair from hexadecimal to decimal to get the Red, Green, and Blue values. For example, #FF5733 becomes R:255, G:87, B:51.
HSL is more intuitive for designers because you can easily adjust lightness or saturation without changing the hue. It's great for creating color palettes, hover states, and accessible color variations.
Yes, all color conversions happen entirely in your browser using JavaScript. No data is sent to any server, ensuring complete privacy and instant results.