Color Converter — HEX, RGB, HSL & Modern CSS Formats
Convert colors between HEX, RGB, and HSL formats instantly. Enter any value and all three formats update in real time — ideal for CSS development and design handoff. Supports shorthand hex (#rgb) and percentage HSL. Everything runs locally in your browser with no upload or tracking.
How to use this tool
- Enter a HEX, RGB, or HSL value in any of the three fields.
- All other formats update instantly.
- Copy the value you need for your CSS or design tool.
About Color Converter
A color converter translates a single color between the three notations used most often on the web: HEX, RGB, and HSL. All three describe the same point in the standard sRGB color space, so they are interchangeable; what differs is how they are written and how easy they are to reason about. Enter a value in any one format and the tool parses it, computes the underlying red, green, and blue channel values, and re-derives all three representations so you can copy whichever one your stylesheet or design tool expects.
HEX is the most compact notation: a hash followed by six hexadecimal digits, two each for red, green, and blue (for example #ff6600). This tool also accepts the three-digit shorthand like #f60, which expands by doubling each digit (#f60 becomes #ff6600). RGB writes the same three channels as decimal numbers from 0 to 255, as in rgb(255, 102, 0), which maps directly onto how displays mix light and is convenient when you are calculating values programmatically. HSL takes a different angle: hue is an angle from 0 to 360 degrees around the color wheel, saturation is a percentage of colorfulness, and lightness is a percentage from black to white. HSL is the format designers reach for when they want to nudge a color, since lowering the lightness or saturation by a few percent is far more intuitive than guessing new hex digits.
Conversion between RGB and HEX is exact because both encode the same 0 to 255 integers in different bases. Conversion to and from HSL involves real-number arithmetic, so the tool rounds hue, saturation, and lightness to whole numbers for readability. That rounding means a round trip such as HEX to HSL and back can occasionally land one unit away from where you started; the visual difference is imperceptible, but it explains why your numbers might not match another converter to the last digit. In practice this matters only when you need bit-exact values, which is rare in design and CSS work.
Knowing all three forms is genuinely useful in day-to-day front-end work. Brand guidelines and design files often specify HEX, RGB is what you get from a screen color picker or an image-editing eyedropper, and HSL is what you want when building a consistent palette of tints and shades from one base hue. Note that this converter handles opaque colors only: it does not accept CSS named colors like "rebeccapurple," nor alpha-channel formats such as #rrggbbaa, rgba(), or hsla(). Everything runs locally in your browser, so the colors you enter are never sent anywhere.
Frequently Asked Questions
- Which color formats can I enter?
- Three: HEX (either #rrggbb or the #rgb shorthand, with or without the leading hash), RGB written as rgb(r, g, b) with each channel from 0 to 255, and HSL written as hsl(h, s%, l%) with hue in degrees and saturation and lightness as percentages. The tool auto-detects which format you typed.
- Does it support the three-digit hex shorthand like #f60?
- Yes. A three-digit hex code is expanded by doubling each digit, so #f60 is treated as #ff6600 and #abc becomes #aabbcc. This is the same expansion rule browsers use for CSS, so the result matches what you would see in a stylesheet.
- Can I convert colors with transparency, like rgba() or #rrggbbaa?
- No. This converter works with fully opaque colors only and does not parse an alpha channel. It also does not accept CSS named colors such as "tomato" or "navy." Strip any alpha value or convert the name to a hex code first, then enter that.
- Why do the HSL numbers differ slightly from another tool?
- Converting RGB to HSL produces fractional values that this tool rounds to whole numbers for hue, saturation, and lightness. Different tools round at different stages, so you can see a one-unit difference in any of the three channels. The discrepancy is well below what the eye can distinguish and does not change the rendered color in any meaningful way.
- When should I use HSL instead of HEX or RGB?
- Reach for HSL when you want to adjust a color rather than specify a fixed one. Because lightness and saturation are separate percentages, you can build a series of tints and shades by changing only the lightness while keeping the hue constant, which is much harder to do by editing hex digits. HEX and RGB are better when you need to match an exact value from a brand spec or a color picker.
- Is HEX to RGB conversion exact?
- Yes. HEX and RGB both encode the same three 0-to-255 integers, just in hexadecimal versus decimal, so converting between them loses no information. Only conversions involving HSL introduce rounding, because HSL is derived through floating-point math.
- Are the colors I enter sent to a server?
- No. Parsing and conversion happen entirely in your browser using local arithmetic. Nothing you type is uploaded, logged, or stored.
Embed this tool on your site
Free. One line of HTML — the tool runs in your visitor's browser, no data sent to anyone.
<iframe src="https://brevio.pro/embed/color-converter" width="100%" height="600" loading="lazy" style="border:1px solid #e5e5e5;border-radius:8px" title="Color Converter — brevio"></iframe> <p style="font:12px/1.4 sans-serif"><a href="https://brevio.pro/tools/color-converter">Color Converter</a> by <a href="https://brevio.pro">brevio</a></p>