Free · in your browser · no signup
Color Converter — HEX, RGB, HSL
Pick a color or type a hex value and instantly get its HEX, RGB, and HSL codes — handy for CSS, design, and the web.
HEX
#F5A623
RGB
rgb(245, 166, 35)
HSL
hsl(37, 91%, 55%)
We use cookies and similar technologies to enhance your browsing experience, analyze site traffic, and personalize content and ads. By clicking "Accept", you consent to our use of cookies. Learn more in our Privacy Policy.
Pick a color or type a hex value and instantly get its HEX, RGB, and HSL codes — handy for CSS, design, and the web.
Color Converter turns a single color value between the three formats you actually write in CSS: HEX, RGB, and HSL. Paste a value in any of those notations, and it gives you the equivalent in the other two, plus a live swatch so you can confirm you have the right color before pasting it into your stylesheet.
The point is to stop the constant context-switching. You find a hex code in a design file, but your code uses HSL because you want to tweak lightness for a hover state. Or a screenshot tool reports an RGB triple and you need the hex for a config value. Doing that math by hand is tedious and error-prone. The converter handles the arithmetic exactly, so the round trip is lossless within each format's precision. Everything runs in your browser; the color you type never leaves your device and nothing is uploaded.
Type or paste a color in any supported notation and the tool parses it, computes the canonical RGB values, and re-renders all three formats from that single source of truth.
Supported inputs:
#3498db, #39c (3-digit shorthand), and 8-digit #3498dbff with alphargb(52, 152, 219) or rgba(52, 152, 219, 0.8)hsl(204, 70%, 53%) or hsla(204, 70%, 53%, 0.8)The live swatch updates as you type, so a typo that produces a wildly different color is obvious immediately. Each output field has a copy button so you can grab exactly the notation your code expects. Because the conversions are pure math done locally, there is no network call, no rate limit, and no account.
Say a designer hands you #3498db and you want it in HSL so you can build a darker hover variant by dropping lightness.
First, hex splits into RGB bytes: 0x34 = 52, 0x98 = 152, 0xdb = 219, giving rgb(52, 152, 219). To get HSL, normalize each channel to 0..1, find the max and min, and derive:
max = 219/255 = 0.859 min = 52/255 = 0.204
lightness = (max + min) / 2 = 0.531 -> 53%
saturation (since L < 0.5 path) = 0.70 -> 70%
hue (blue is max) ~ 204
Result: hsl(204, 70%, 53%). Now your hover state is just hsl(204, 70%, 43%), a 10-point lightness drop on the same hue and saturation. That kind of targeted edit is exactly why HSL is worth converting to, and doing it by hand for every color gets old fast.
hsl() into a hex you can eyeball, or vice versa.Rounding is real. RGB channels are integers 0..255, but HSL percentages and the hue degree get rounded for display. Converting hex to HSL and back can land one unit off on a channel. The colors are visually identical, but do not expect the string to be byte-identical after a round trip.
HSL hue wraps at 360. hsl(0, ...) and hsl(360, ...) are the same red. For pure grays (saturation 0), hue is meaningless and conventionally reported as 0.
Shorthand expands by duplication. #39c is #3399cc, not #390909c; each digit is doubled. So #fff is #ffffff.
Alpha is separate from the color. An 8-digit hex like #3498db80 carries a 0x80 (50%) alpha. That maps to the 0.5 in rgba(...) / hsla(...), not to any RGB channel.
RGB describes a color by how much red, green, and blue light to mix. That matches how screens emit light, but it is unintuitive to edit: to make rgb(52, 152, 219) darker you have to scale all three channels by the same factor and round, and it is easy to shift the hue by accident.
HSL re-parameterizes the same color space into Hue (0..360, the position on the color wheel), Saturation (0..100%, how vivid versus gray), and Lightness (0..100%, how close to black or white). The mapping is fully reversible, so no color is gained or lost; it is purely a different coordinate system over the same RGB cube.
The practical payoff is that human-meaningful edits become single-axis changes. "Same color, a bit darker" is just lower lightness. "More muted" is lower saturation. "A nearby color" is a small hue shift. That is why so much CSS for interactive states is written in HSL.
Within each format's precision, no. HEX and RGB both store 0..255 per channel and map one-to-one. HSL is reversible too, but its percentages and hue degree are rounded for display, so a round trip can be off by one unit on a channel while looking identical.
They are the same color. The 3-digit shorthand expands by doubling each digit, so `#39c` becomes `#3399cc` and `#fff` becomes `#ffffff`.
Alpha rides alongside the color, not inside an RGB channel. It appears as the 4th value in `rgba()`/`hsla()` (0 to 1) or as the last two hex digits in an 8-digit code, where `ff` is fully opaque and `00` is fully transparent.
HSL makes edits intuitive: lower the lightness for a darker shade, lower saturation for a muted version, or shift the hue for a related color, each as a single-number change. It is the same color space, just easier to adjust by hand.
Yes, as long as you have its value. Paste the HEX, RGB, or HSL string the other tool reports and the converter returns the other two formats with a matching swatch.
No. All parsing and conversion run locally in your browser, so the value you enter never leaves your device and nothing is uploaded. There is no account and no rate limit.
A saturation of 0% is a pure gray, where hue has no effect on the result. By convention it is reported as 0, so don't treat that hue as meaningful.
HSL components are rounded to whole percentages and a whole-degree hue for readability. That rounding can make the string differ by a unit from a hand calculation, but the color it represents is the same.