Color Converter: Hex, RGB, HSL
Convert any color between hex, RGB and HSL notation with a live swatch preview. For frontend developers translating design-tool values into CSS, and designers who need one format for Figma and another for code.
How to use
- Enter a color in any format: #ff5733, rgb(255, 87, 51) or hsl(11, 100%, 60%).
- Press Convert.
- Copy the equivalent value in each of the other formats, and check the rendered swatch.
Hex, RGB and HSL are three notations for the same sRGB color space, and each earns its place. Hex (#RRGGBB) is compact and dominates design handoffs. rgb() exposes the raw channel values, which matters when you need alpha (rgba) or are doing programmatic manipulation. HSL, hue as an angle on the color wheel, saturation and lightness as percentages, is the one humans can actually reason about: to make a hover state, keep hue and saturation fixed and shift lightness by 10%, something that is nearly impossible to eyeball in hex.
The conversion math is exact and lossless between hex and RGB (each hex pair is one 0-255 channel). HSL round-trips can drift by a unit because of rounding, which is harmless visually but can make string comparisons fail in snapshot tests, compare parsed values, not strings.
Modern CSS adds wrinkles worth knowing: 4- and 8-digit hex (#ff5733cc) encode alpha, the newer space-separated syntax rgb(255 87 51 / 80%) is now preferred, and perceptually uniform spaces like oklch() are arriving for wide-gamut displays. For design systems, a common pattern is storing tokens in HSL so themes can be derived by rotating hue or scaling lightness. This converter handles the classic three formats bidirectionally and previews the result so you can sanity-check before pasting into a stylesheet.
Examples
Input: #ff5733
Output: rgb(255, 87, 51) / hsl(11, 100%, 60%)Input: rgb(46, 204, 113)
Output: #2ecc71 / hsl(145, 63%, 49%)Input: hsl(240, 100%, 50%)
Output: #0000ff / rgb(0, 0, 255)Frequently asked questions
When should I use HSL instead of hex?
Use HSL when you need to derive variations, lighter hovers, darker borders, tints of a brand color, because you can adjust one intuitive axis at a time. Hex is better as a compact storage and handoff format.
Why did my HSL value change slightly after converting back?
HSL components are usually rounded to whole degrees and percents, and RGB channels to integers, so a round-trip can shift a value by one unit. The rendered color is visually identical.
What is 8-digit hex?
The last two digits encode alpha (opacity): #ff5733cc is the same orange at 80% opacity. It is supported in all modern browsers as an alternative to rgba().
Does this tool support named CSS colors?
Enter the hex value of the named color (for example tomato is #ff6347). The converter works on hex, rgb() and hsl() inputs.
Related tools
Velona is India's INR-native AI API gateway with 300+ models, UPI top-up from ₹10, no foreign card needed. These tools are free forever.