रंग परिवर्तक

What the Color Converter does

The Color Converter translates a single colour between the three formats front-end work relies on: HEX (#3b82f6), RGB or RGBA (rgb(59, 130, 246)) and HSL or HSLA (hsl(217, 91%, 60%)). Enter a value in any one of them, or use the native colour picker, and it shows the equivalents in the other formats alongside a live swatch so you can see exactly what you are working with. It is the tool for lifting a colour out of a design mock-up into CSS, matching a brand shade across formats, nudging a hue in HSL where adjustments feel intuitive, or adding transparency through an alpha channel.

How the formats map to each other

Each model describes the same colour differently. HEX packs the red, green and blue channels into pairs of hexadecimal digits; RGB lists those same channels as 0–255 values; HSL instead uses Hue (an angle from 0 to 360° around the colour wheel), Saturation and Lightness as percentages, which is why it is far easier to “make this a bit lighter” or “shift it towards green” in HSL. The converter reads all the common shorthands and expands them for you:

• 3-digit HEX like #f00 expands by doubling each digit to #ff0000.
• 4- and 8-digit HEX and the rgba() and hsla() forms carry an alpha (opacity) channel, which is preserved through the conversion.
• Percentage inputs are accepted where the format allows them, and every result is rounded to sensible, copy-ready precision.

Internally the tool converts whatever you type to RGB as a common ground, then derives HSL with the standard hue-chroma-lightness maths, keeping any alpha value intact along the way. Note that it works with these numeric formats rather than CSS colour keywords, so paste #ff69b4 rather than the word “hotpink”, and all values are interpreted in the standard sRGB space your browser and monitors use.

Why switch between formats at all

Different jobs call for different models. HEX is the compact form you drop straight into a stylesheet. RGB is what you need when you are compositing, working with a canvas, or checking a contrast ratio for accessibility, since WCAG calculations start from the red, green and blue channels. HSL is the designer’s favourite for building a theme: fix the hue, then step the lightness up and down to generate a consistent set of tints and shades, or rotate the hue to derive complementary accents. Being able to convert instantly means you can think in whichever model suits the task and still emit the format your code expects.

Examples, gotchas and privacy

Practical uses: convert a designer’s #3b82f6 to hsl(217, 91%, 60%) so you can generate a lighter hover state, or turn an rgba(0,0,0,0.5) overlay into an 8-digit hex for a terser stylesheet. Two gotchas are worth flagging. Because HSL stores hue as a whole degree and saturation and lightness as whole percentages, converting RGB → HSL → RGB can shift a channel by a single unit through rounding; the visible difference is imperceptible, but a strict equality check may notice it. And the browser’s built-in colour picker only understands 6-digit hex, so it cannot represent an alpha value — set opacity in the text field instead. Everything is computed locally in your browser: the colours you paste, including unreleased brand palettes, never leave your device and are never uploaded or logged. Explore the rest of our free, in-browser network and developer tools when you need a companion utility.