Free Color Converter — HEX, RGB, HSL
Pick a color or paste a value in any format — the others update instantly.
Why HSL exists when RGB already describes every color
RGB isn't arbitrary — it directly mirrors how a screen physically produces color, by mixing red, green, and blue light at different intensities. That makes it exactly what a display needs, but it's not how people naturally think about color: knowing that "goldenrod" is roughly rgb(218, 165, 32) tells you almost nothing about how it relates to a slightly darker or more muted version of itself. HSL was designed to close that gap. Hue is the color family (0° and 360° both land on red, with green, blue, and back to red in between); saturation is how intense or muted it is; lightness is how close it sits to black or white. Because of that structure, you can lighten or darken a color while keeping its exact hue and saturation by changing only the lightness value — something that requires recalculating all three numbers in RGB.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
They are three ways of writing the same color. HEX (#0d9488) is compact and common in CSS and design tools. RGB expresses the red, green, and blue components from 0–255. HSL describes hue (0–360°), saturation, and lightness, which makes it the easiest format to adjust by hand — want it darker, lower the lightness.
Can I use 3-digit HEX codes?
Yes. Shorthand like #fa0 expands to #ffaa00 automatically. Both are valid CSS.
Which format should I use in CSS?
All three work in every modern browser, so it is a style preference. HSL is popular for design systems because related shades share the same hue number; HEX remains the most common in existing codebases.
What's the quickest way to make a color lighter or darker without shifting its hue?
Adjust only the lightness (L) value in HSL — raise it to lighten, lower it to darken — while leaving hue and saturation untouched. Doing the same thing in RGB or HEX requires recalculating all three channels together to avoid shifting the color's actual hue.
Is hex color notation case-sensitive?
No — #0D9488 and #0d9488 are the identical color in CSS. This tool accepts either case in the HEX field.
Does this tool support transparency (alpha)?
This converter works with opaque colors. For transparency, append an alpha value in CSS yourself: #0d9488cc (HEX with alpha), rgba(13, 148, 136, 0.8), or hsla(174, 84%, 32%, 0.8).