Need a CSS color in another format? Paste HEX, RGB, or HSL above, or drag the color wheel, and copy the rest. This color converter is part of the programming tools on TechOpt.io, next to the UUID generator.
How this color converter treats HEX, RGB, and HSL
They describe the same sRGB color three ways, matching the CSS color value types:
| Format | Example | Typical use |
|---|---|---|
| HEX | #eb2828 | CSS variables, design tokens, and anything that wants a compact string. |
| RGB | rgb(235, 40, 40) | The same red, green, and blue channels as decimal 0–255. |
| HSL | hsl(0, 83%, 54%) | Hue, saturation, and lightness — easier when you are tinting or darkening a color. |
#rgb shorthand
A three-digit hex color duplicates each digit: #f00 is #ff0000, #0af is #00aaff. Browsers accept both. Paste shorthand into the HEX field and this converter expands it to six digits when you copy.
CSS rgb() and hsl() syntax
Older CSS uses commas: rgb(235, 40, 40) and hsl(0, 83%, 54%). Modern CSS allows spaces instead: rgb(235 40 40) and hsl(0 83% 54%). The fields above accept either. Copied values use the comma form, which still works everywhere.
When HSL is easier to tweak
Keep the hue and change lightness for a hover or pressed state, or drop saturation for a muted variant. Doing the same in HEX means editing two or three hex digits that do not map cleanly to “a bit darker.” HEX is still the usual choice for tokens and copy-paste from design tools.
FAQ
How do I convert HEX to RGB?
Paste a hex color such as #eb2828 or eb2828 into the HEX field. The converter splits it into red, green, and blue bytes (0–255). #eb2828 is rgb(235, 40, 40). Three-digit shorthand works too: #f00 is rgb(255, 0, 0).
How do I convert RGB to HSL?
Enter R, G, and B (0–255), or paste an rgb() value. HSL is computed from those channels: hue in degrees (0–360), saturation and lightness as percentages. rgb(235, 40, 40) is hsl(0, 83%, 54%).
What is the difference between HEX, RGB, and HSL?
They describe the same sRGB color three ways. HEX is six hex digits (#rrggbb), compact for CSS variables and design tokens. RGB is the same three 0–255 channels as decimal. HSL separates hue from saturation and lightness, so tinting or darkening is a single slider instead of three hex edits.
What is #rgb shorthand?
A three-digit hex color duplicates each digit: #f00 becomes #ff0000, #0af becomes #00aaff. Browsers accept both. This converter expands shorthand to six digits when you copy HEX.
Does this color converter upload my colors?
No. It runs entirely in your browser. HEX, RGB, and HSL values never leave your machine.
Why use HSL instead of HEX in CSS?
HSL is easier when you are adjusting a color rather than picking one from a palette. Keep the hue, drop lightness for a hover state, or cut saturation for a muted variant. HEX is still the usual choice for tokens and copy-paste from design tools.
Looking for more developer how-tos? Browse the programming guides or the rest of the tools.