Color Converter

What is a color converter?

A color converter translates a single color between the notations that web and design tools use. The most common three are:

• HEX — a six-character code like #3B82F6, the format you paste into CSS, design apps and most style guides.
• RGB — three numbers from 0 to 255, like rgb(59, 130, 246), describing how much red, green and blue light make up the color.
• HSL — hue, saturation and lightness, like hsl(217, 91%, 60%), a model that maps more closely to how people think about color.

They all describe the exact same color; they are just different ways of writing it down. This tool lets you enter or pick a color once and read it in all three formats, then copy whichever one your current task needs.

How to use it

1. Choose a color. Click the swatch to open your system color picker, or type a HEX code into the text field. The two stay in sync, so changing one updates the other.
2. Read the values. The large preview shows the color, and below it you get the HEX, RGB and HSL representations side by side.
3. Copy what you need. Each row has a Copy button that puts the formatted value on your clipboard, ready to paste into CSS, a design tool or a message.

If you type something that is not a valid HEX code, the field marks itself and the preview holds the last good color, so you never lose your place.

HEX, RGB and HSL: when to use each

Knowing the strengths of each format makes day-to-day work faster.

• HEX is the lingua franca of the web. It is compact, unambiguous, and what you will see in almost every brand guide and CSS file. Reach for it when you just need to record or paste a color.
• RGB maps directly to how screens emit light and to how images store pixels. It is handy when you are working with channels individually, blending colors mathematically, or adding an alpha value with rgba().
• HSL is the most human-friendly of the three. Because hue, saturation and lightness are separate, you can tweak one without disturbing the others — nudge the lightness to make a color lighter or darker while keeping its character, or rotate the hue to find a related color. That makes HSL excellent for building palettes and hover/active states.

A common workflow is to take a brand HEX, convert it to HSL, adjust the lightness up and down to create a tint and a shade, then convert each result back to HEX for use in code. Or skip the manual stepping and generate the whole scale at once with our Color Palette Generator.

How the conversion works

The math is straightforward, which is why this runs instantly and offline:

• HEX to RGB splits the six digits into three pairs and reads each pair as a number from 0 to 255.
• RGB to HSL scales the channels to 0–1, finds the lightest and darkest of the three to derive lightness, uses their difference for saturation, and computes hue from which channel is dominant.

Everything is pure arithmetic on numbers you already have, so there is nothing to upload and no rounding surprises beyond the whole-number rounding applied to HSL for legibility.

Tips and best practices

• Use HSL to build consistent palettes. Keep the hue fixed and step the lightness in even increments to generate a clean light-to-dark scale for a single color. It looks far more deliberate than picking shades by eye.
• Lean on the three-digit shorthand for quick entry. #fff, #000 and #38f are faster to type and expand predictably. This tool accepts them and shows you the full six-digit form.
• Copy the format your context expects. Paste HEX into a stylesheet variable, RGB when you need to add transparency with rgba(), and HSL when you plan to adjust the color programmatically afterwards.
• Mind contrast, not just hue. Two colors can share a hue and still fail a readability check if their lightness values are too close. When pairing text and background, compare their lightness and test the combination with our Color Contrast Checker rather than trusting the swatch alone.

Common mistakes to watch out for

• Dropping or misplacing the #. In CSS, color: 3b82f6 is invalid — it needs the #. When in doubt, copy the HEX row here, which always includes it.
• Confusing HSL with HSB/HSV. They sound alike but are different models. HSL uses lightness, where 50% is the pure, fully saturated color and 100% is white. HSB/HSV uses brightness, where 100% is the pure color. Pasting one set of numbers into a tool expecting the other gives you the wrong color.
• Expecting a perfectly identical HSL round trip. Because HSL is rounded for display, converting HEX to HSL and back can shift a number by one. The color you see is always correct for the HEX you entered; treat the rounded HSL as a faithful label, not a lossless store.
• Assuming every old tool supports modern syntax. Stick to the classic rgb(r, g, b) and hsl(h, s%, l%) forms shown here for the widest compatibility.

Private by design

There are no files, accounts or servers involved. The color you pick or type is converted right inside your browser tab using ordinary arithmetic, and nothing about it is logged, stored or transmitted. Use it freely for client work, internal palettes or anything else — the color is yours alone.