Color Converter
Pick a color or edit any of the fields below — the other formats update as you type.
Processed on your device — nothing is sent anywhere.
How it works
- Use the color picker, or type a value into the HEX, RGB or HSL field.
- The preview swatch and the other two fields update live as you edit.
- Click Copy next to any field to copy that format to your clipboard.
Frequently asked questions
- Which input formats are accepted?
- HEX values may be written with or without the leading # and in short or long form, so #abc, abc and #aabbcc all work. RGB and HSL fields accept the full rgb(...) and hsl(...) notation or just three comma- or space-separated numbers, such as 255 128 0.
- What is the difference between RGB and HSL?
- RGB describes a color by the amount of red, green and blue light, each from 0 to 255, which matches how screens work. HSL describes the same color by hue (0-360 degrees on the color wheel), saturation and lightness, which is often easier for humans to reason about when adjusting a color.
- How do I convert HEX to RGB manually?
- A hex code is three pairs of base-16 digits, one pair per channel. Convert each pair to decimal to get the red, green and blue values: in #ff8000, ff is 255, 80 is 128 and 00 is 0, so the color is rgb(255, 128, 0). This tool performs the same arithmetic instantly in both directions.
- Can I use HSL values directly in CSS?
- Yes. Every modern browser supports the hsl() function, for example hsl(24, 100%, 50%). HSL is especially useful in stylesheets because you can create lighter, darker or more muted variants of a color by changing only the lightness or saturation while the hue stays identical.
- Is my color data sent to a server?
- No. All parsing and conversion happens locally in your browser with plain JavaScript math. Nothing you type or pick is transmitted anywhere, and the page works offline once loaded.
About this tool
This color converter translates any color between the three notations used most on the web: HEX, RGB and HSL. Type or paste a value into any field — a shorthand hex code, an rgb() triple copied from a design tool, or an hsl() value from a stylesheet — and the other two formats update as you type, next to a live preview swatch. A copy button beside each field puts the exact string on your clipboard, ready to paste into CSS, a design file or a code editor.
The conversion is plain arithmetic performed by JavaScript on your own device. HEX and RGB are two spellings of the same three channel values, so translating between them is a base-16 conversion, while HSL is derived from RGB with a short formula that maps those channels onto hue, saturation and lightness. Because everything runs locally, nothing you enter is sent to a server, no account is required, and the page keeps working offline once it has loaded.
Typical uses include converting a designer’s hex codes into hsl() so lightness can be adjusted programmatically in CSS, matching a brand color across tools that each expect a different notation, and checking what a color from a style guide actually looks like before committing to it. Input parsing is deliberately forgiving — hex with or without the #, channel numbers separated by commas or spaces — so values pasted from almost any source work without cleanup.
A practical tip: when you need a family of shades built from one base color, convert it to HSL and vary only the lightness in steps of around ten percent. The hue stays constant, so the shades look related instead of drifting toward gray or a neighboring color — which is what usually happens when new hex values are guessed by hand.