Color Converter

What is a color converter?#

A color converter translates one description of a color into the other descriptions your stack actually needs. Designers hand you a HEX value from a mockup; CSS lets you write rgb() or hsl(); a design-token pipeline wants a CSS variable; a charting library asks for an RGBA tuple with an alpha channel. The same color keeps wearing different outfits, and you spend real time converting between them by hand or guessing at a calculator.

This page does all four conversions at once. Type or pick one color and you immediately get its HEX, RGB, HSL, and a ready-to-paste CSS variable declaration, plus a live preview swatch and a five-step lighten/darken palette derived from that exact color — everything computed locally in your browser.

The reason HEX, RGB and HSL coexist is that each is good at a different job. HEX (#4f46e5) is compact and dominates CSS, Figma export, and brand guidelines. RGB (rgb(79, 70, 229)) makes the red/green/blue channels explicit, which is what image code and canvas pixel manipulation expect. HSL (hsl(243, 75%, 59%)), split into hue, saturation and lightness, is the one a human can reason about — “make it 10% lighter” is a single number change in HSL and a messy three-number dance in RGB.

How to use it#

1. Set the input color in one of two ways:
   • Click the color square on the left to open the native OS color picker and choose visually.
   • Or type a value into the text field next to it. HEX (#4f46e5, #abc, or 8-digit #4f46e5ff with alpha), rgb() / rgba(), and hsl() / hsla() are all accepted.
2. Read the results in the right-hand list — HEX, RGB, HSL, and CSS variable. Each field is read-only; click into it and copy, or use the field as a reference while you work.
3. Watch the large preview block on the right; it fills with the current color so you can sanity-check it against your design.
4. Use the 5-swatch palette below the preview. It generates darker, dark, base, light, and lighter variants by shifting the HSL lightness in 10-point steps — handy for hover/active states or building a tonal scale from a single brand color.
5. The status line confirms the conversion or reports an Invalid color message if your input did not parse.

Key features#

• Three formats accepted, four returned. Paste HEX, rgb(), or hsl() and get HEX, RGB, HSL, and a CSS-variable declaration back in one shot.
• Alpha-aware. 8-digit HEX (#rrggbbaa) and rgba()/hsla() inputs carry their alpha channel through to the output, so translucent colors round-trip correctly.
• Tonal palette generator. The five-step lighten/darken row is derived from your color’s own HSL, not a canned ramp — it always looks like the same family.
• Copy-ready CSS variable. The --color-brand: #4f46e5; line drops straight into a :root block, renamed to your token name later.
• 100% client-side. No backend, no network request. Your brand colors never leave the page.

Worked example#

The page loads with the indigo #4f46e5. With that input, the four fields fill in as:

HEX:        #4f46e5
RGB:        rgb(79, 70, 229)
HSL:        hsl(243, 75%, 59%)
CSS var:    --color-brand: #4f46e5;

Notice how the HSL form hsl(243, 75%, 59%) reads like a sentence: hue 243 (a blue-violet angle on the color wheel), 75% saturation (fairly vivid), 59% lightness (mid-tone, slightly brighter than middle gray). If a designer asked you to “make it a touch darker for a hover state,” you would drop that 59 to 49 and get hsl(243, 75%, 49%) — and indeed that is exactly the dark swatch the palette generator produces below the preview, alongside light at 69% and the extremes at 39% and 79%.

If you instead start from a CSS variable you already own, paste its value into the text field. rgba(79, 70, 229, 0.5) is parsed as the same indigo at 50% opacity, and the HEX output becomes #4f46e580 (8-digit, alpha 0x80 ≈ 0.5), ready to drop into a stylesheet that prefers HEX.

FAQ#

My designer gave me #4f46e5 but the dev tools show rgb(79, 70, 229). Are those the same color?#

Yes, exactly. HEX and RGB are two serializations of the same sRGB values. #4f46e5 splits into byte pairs 4f, 46, e5, which are the hex for 79, 70, and 229. Use whichever your context prefers — CSS treats them as identical.

When should I reach for HSL instead of HEX?#

Whenever you want to change a color predictably by feel. Darkening, lightening, desaturating, or building a 5-shade palette from one brand color is one number in HSL and a frustrating three-way balance in RGB. HEX is best for storage and copy-paste; HSL is best for editing.

Why does the palette sometimes look uneven at very dark or light colors?#

The generator shifts lightness by fixed 10-point steps and clamps at 0% and 100%. Near those limits the steps compress because there is no room left to move — a color already at 95% lightness only has 5 points of “lighter” before it hits pure white. That is a property of the HSL space itself, not a bug.

Does this tool support P3 or wide-gamut colors?#

No. It works in the sRGB space that CSS HEX/RGB/HSL describe, which covers the vast majority of web work. Display-P3 and color() syntax are a different pipeline and are not parsed here.