Color Converter — HEX, RGB & HSL

Pick a color and convert between HEX, RGB, HSL, and alpha formats instantly. Supports CSS named colors and alpha transparency. All conversions happen locally in your browser.

HEX
HEX + Alpha
RGB
RGBA
HSL
HSLA

RGB

R
G
B

HSL

H
S
L

Alpha

A

Free Color Converter — HEX, RGB, HSL and Alpha

This is a free online color converter that translates any CSS color between HEX, HEX + Alpha, RGB, RGBA, HSL, and HSLA in real time. Paste #ec4899, rgb(236, 72, 153), hsl(330, 81%, 60%), or a CSS named color like tomato, and every format updates at once. Drag the native color picker or fine-tune with per-channel sliders for R, G, B, H, S, L, and alpha — the swatch reflects changes instantly so you can see exactly what you’re building.

Every conversion runs locally in your browser. Nothing is uploaded, nothing is logged, and the tool keeps working if you disconnect from the internet after the page has loaded.

HEX, RGB, HSL — what’s the difference?

All three formats describe exactly the same color — they just spell it out differently. Which one to use comes down to the context, not the color itself.

HEX

HEX (like #ec4899) is a compact six-digit notation for the red, green, and blue channels. The first two hex digits are red, the next two are green, and the last two are blue — each pair ranges from 00 to FF, which is 0 to 255 in decimal. An eight-digit HEX (#ec4899ff) adds an alpha byte on the end. HEX is the most compact format and dominates web design files, style guides, and icon exports.

RGB / RGBA

RGB (rgb(236, 72, 153)) writes the same three channels as decimal numbers from 0 to 255. RGBA adds a fourth value — alpha — from 0 (fully transparent) to 1 (fully opaque). RGB is the format you’ll reach for when you want to compute colors programmatically (lerp between two shades, invert a channel, tint an image) because the numbers map directly to what the screen does.

HSL / HSLA

HSL (hsl(330, 81%, 60%)) describes a color by hue (an angle on the color wheel, 0–360), saturation (how vivid, 0%–100%), and lightness (how bright, 0%–100%). HSLA adds alpha. HSL is dramatically easier to reason about than RGB: drop the lightness to darken a color, drop the saturation to mute it, rotate the hue to shift it around the wheel. That makes it the right format when you’re generating a palette or building a theme with CSS custom properties.

How to use this color converter

From a picker

  1. Click Pick a color to open your browser’s native color picker.
  2. Choose a color — the swatch, every output row, and every slider update instantly.
  3. Click Copy on any output row to grab the value in the format you need.

From a pasted value

  1. Paste any CSS color into the text input: #ec4899, rgb(236, 72, 153), hsl(330, 81%, 60%), rgba(236, 72, 153, 0.5), or a named color like tomato, rebeccapurple, steelblue.
  2. The swatch and all six output formats refresh as you type.
  3. Copy whichever output your target tool or codebase expects.

From the sliders

  1. Drag the R, G, B sliders for pixel-level control over each channel, or the H, S, L sliders to shift hue, saturation, or lightness while keeping the other two fixed.
  2. Use the alpha slider to dial transparency from 0 to 1.
  3. Every slider is two-way bound with the number field next to it — type an exact value when you need it.

Alpha and transparency

Alpha controls how much of whatever sits behind a color shows through. alpha: 0 is fully transparent (invisible), alpha: 1 is fully opaque (solid), and anything in between is a mix. In CSS you can express alpha three ways:

  • RGBA — rgba(236, 72, 153, 0.5)
  • HSLA — hsla(330, 81%, 60%, 0.5)
  • 8-digit HEX — #ec489980 (last two digits are alpha, 00–FF)

Some design tools (Figma, Sketch, Tailwind) use 8-digit HEX; others (most stylesheets) prefer RGBA or HSLA. Copy whichever one the destination expects — this tool emits all three.

Common use cases

  • Design → CSS — paste a HEX from a Figma swatch and grab RGBA with the alpha you need for a semi-transparent overlay.
  • Building a theme — start from a brand HEX, jump to HSL, and generate lighter/darker variants by stepping lightness up and down.
  • Named → HEX — convert tomato, coral, or rebeccapurple into a HEX for a palette file.
  • Legacy formats — paste an old rgb() and get the modern hsl() equivalent for a CSS refactor.
  • Alpha conversions — translate a transparent HEX like #ec489980 into the rgba() syntax that older tools still require.

Accessibility: picking readable colors

Color choices affect accessibility more than any other design decision. WCAG requires a contrast ratio of at least 4.5:1 between normal text and its background, or 3:1 for large text (18pt+, or 14pt bold). Working in HSL makes it easy to hit those targets: raise the lightness of your text, drop the lightness of your background, or both. A rough heuristic: if two colors differ by 40 points or more in HSL lightness, they are usually close to AA contrast — verify with a dedicated contrast checker before shipping.

What about P3, OKLCH, and other modern formats?

This tool emits the classic sRGB-space formats — HEX, rgb(), rgba(), hsl(), hsla() — because those are supported everywhere, from a ten-year-old email client to the newest build system. Newer CSS formats like color(display-p3 …), oklch(), and lab() unlock a wider gamut on modern displays and are worth adopting when your target browsers support them, but for almost every existing design, CMS, or codebase the sRGB triplet is still the right answer. If you need to paste or export those newer formats, most design tools can round-trip them to HEX without a visible difference for colors inside the sRGB gamut.

Privacy and offline use

Every conversion happens locally in your browser with plain JavaScript — the color input, the picker, and the sliders never leave your device. Nothing is logged, nothing is cached on a server, and the page keeps working after you go offline. That matters when you’re sampling colors from a confidential mockup or internal brand file and don’t want the values leaking into third-party analytics.

FAQ

Frequently Asked Questions

HEX (like #ec4899) is a compact 6-digit notation for the same RGB channels — the first two digits are red, the next two green, the last two blue, each from 00 to FF (0-255). RGB (like rgb(236, 72, 153)) spells out the same channels as decimal numbers. HSL (like hsl(330, 81%, 60%)) expresses the color as hue (angle around the color wheel, 0-360), saturation (how vivid, 0-100%), and lightness (how bright, 0-100%). All three describe exactly the same color — pick the format your target tool expects.

HSL is more intuitive for creating color variations. To make a color darker, drop the lightness; to fade it, drop the saturation; to generate a full palette, rotate the hue in even steps. That is hard to do in RGB/HEX because changing a channel also shifts the hue. Most modern design tools support HSL, and it is great inside CSS custom properties for theming.

Alpha controls transparency — 0 is fully transparent (invisible), 1 is fully opaque (solid). A color with alpha 0.5 is half-transparent and lets 50% of whatever is behind it show through. In CSS you write it as rgba(r, g, b, a) or hsla(h, s%, l%, a), or as an 8-digit HEX like #ec4899ff where the last two digits are alpha from 00 to FF.

Yes. Paste any of the 147 CSS named colors into the input field and it will be converted. The tool uses the browser's built-in color parser to resolve names, so anything your browser recognizes in CSS will work.

Within reason, yes. The swatch displays the exact HEX/RGB value and most modern monitors render sRGB faithfully. However, color appearance depends on monitor calibration, color profile, ambient lighting, and the viewer's own vision. For print or cross-device consistency, use a color-managed workflow with Pantone, CMYK, or spot colors — web sRGB is not a substitute for those.

Yes. All conversion logic is plain JavaScript that runs in your browser. After the page loads, you can disconnect from the internet and the tool continues to work. Nothing about your colors is ever uploaded, logged, or stored on a server.

Check the contrast ratio between text and background against WCAG guidelines: 4.5:1 minimum for normal text, 3:1 for large text (18pt+ or 14pt bold). Dropping the lightness of your background or raising the lightness of your text moves you toward compliance. For a quick test, paste both colors into this tool, compare their HSL lightness, and aim for at least a 40-point gap — a good starting point before fine-tuning with a dedicated contrast checker.