Home › Color Converter
Pick any color — or type its HEX code — and instantly get the same color as HEX, RGB and HSL values, each with a one-click copy button. For designers matching a brand color, developers translating a mockup into CSS, and anyone who has ever asked “what color is #0E7C86, exactly?”
Screens don't care what you call a color; they mix light. But the tools of design and development describe that mixing in three different dialects, and work constantly forces translation between them. HEX (like #0E7C86) is the compact six-character code of web design — three pairs of hexadecimal numbers for red, green and blue. RGB states the same mix as ordinary numbers from 0 to 255: rgb(14, 124, 134). HSL re-describes it the way humans actually think — a hue around the color wheel (0–360°), saturation as a percentage, and lightness as a percentage: hsl(185, 81%, 29%).
Why keep all three? Because each is best at something. HEX is shortest for copying into code and brand guidelines. RGB is what most software, from image editors to CSS color pickers, displays natively. HSL is the one you can actually reason with: need a darker version of a color? Drop the lightness. A muted one? Lower the saturation. Try doing that in HEX, where every change is hexadecimal guesswork. This converter shows all three side by side, updates as you pick, accepts a typed HEX when you already have one, and copies any value with a single click.
The classic reference color: pure red. In HEX it's #FF0000. In RGB it's rgb(255, 0, 0) — maximum red, no green, no blue. In HSL it's hsl(0, 100%, 50%): hue 0 (red sits at the top of the wheel), full saturation, and halfway lightness.
Now use HSL's superpower. Keep hue 0 and saturation 100%, drop lightness to 25% and you've designed maroon. Raise lightness to 75% and you get a soft pastel pink-red. Same hue family, three coordinated colors — the practical way designers build palettes, and it took ten seconds because HSL separates “which color” from “how strong” and “how light”.
A HEX code is three numbers written in base 16, one per channel: red, green, blue. Each pair runs 00 (none) to FF (full, 255 in decimal). #FF0000 is full red; #000000 is black; #FFFFFF is white. A leading # marks it as a color code.
RGB describes a color as amounts of red, green and blue light. HSL describes the same color by hue (position on the color wheel), saturation (intensity) and lightness. They're two coordinate systems for the identical color — this page converts between them losslessly.
Convert it to HSL and change only the lightness: lower for darker, higher for lighter, keeping hue and saturation fixed. It's the reliable way to create matching shades and hover states without the color turning muddy.
Alpha — transparency. It runs from 0 (fully transparent) to 1 (fully opaque) in RGBA/HSLA, or 00–FF as an extra pair in 8-digit HEX. A shadow or overlay color is usually a semi-transparent black, like rgba(0, 0, 0, 0.25).
Yes — the panels stay in sync. Adjust via the picker or the HEX field and all three formats update together; there's always a copy button for the one your destination needs.
Screens vary in calibration, brightness and color gamut, and some colors in the HEX/RGB space sit outside what a given display can reproduce. The code is the ground truth; the rendering is an approximation. For brand-critical work, check on a calibrated monitor.