Convert HEX to RGB, HSL or RGBA

The three common CSS writings

The same sRGB color can be written as a hex literal, as red/green/blue channels, or as hue/saturation/lightness. Design tools tend to copy hex. Layout code often wants rgb(). Tweaking a color by hand is easier in hsl() because you can walk the hue wheel or drop the lightness without touching the other channels. This page reads whichever form you have and writes all three, plus a live swatch.

• HEX: compact, six digits (or three, or eight with alpha). Output is always uppercase with a leading #.
• RGB: rgb(r, g, b) with each channel 0-255. Transparent colors use rgba(...).
• HSL: hsl(h, s%, l%) with hue 0-360 and saturation/lightness 0-100. Transparent colors use hsla(...).

The conversion is live. There is no Convert button. The default value in the field is Fieldkit amber, #e8a33d, so the page already shows a finished example when it loads.

How to use the field and the picker

1. Type into the Color field. Accepted shapes: #rgb, #rrggbb, #rrggbbaa (the # is optional), rgb() / rgba(), hsl() / hsla(), and any CSS named color your browser knows, such as rebeccapurple or steelblue.
2. Or use the native color square on the right. It writes a six-digit hex into the field and the conversions update. Native pickers have no alpha, so this path always produces an opaque color.
3. Read the output pane. Three lines: HEX, RGB, HSL. The strip shows Status Converted, Input as HEX, RGB, HSL, or Named, Alpha as 1 (opaque) or a fraction, and a Preview swatch.
4. When the parsed color is fully opaque, the picker square is kept in sync. When it has alpha, the picker is left alone because it cannot display transparency.
5. Copy all copies the three output lines. Clear empties the field, clears the output, and sets Status to Waiting for input. The picker may still show the last opaque color; type or pick again to continue.

Parsing goes through the browser canvas fill style. If two different sentinel colors both get overwritten by your string, the string is a real CSS color. Otherwise Status reads Unrecognized color and the swatch goes transparent. That means the page accepts whatever your browser accepts, including some newer functions, but it only prints HEX, RGB, and HSL.

Reference conversions

The default amber. Field: #e8a33d. Output:

HEX   #E8A33D
RGB   rgb(232, 163, 61)
HSL   hsl(36, 79%, 57%)

Input HEX, Alpha 1 (opaque). The same numbers in rgb(232, 163, 61) or hsl(36, 79%, 57%) produce the same three lines.

A named color and a short hex. Field rebeccapurple (Input: Named):

HEX   #663399
RGB   rgb(102, 51, 153)
HSL   hsl(270, 50%, 40%)

Field #fc0 expands to #FFCC00, rgb(255, 204, 0), hsl(48, 100%, 50%).

Transparency. Field rgba(232, 163, 61, 0.5). Output:

HEX   #E8A33D80
RGB   rgba(232, 163, 61, 0.5)
HSL   hsla(36, 79%, 57%, 0.5)

Alpha reads 0.5. The last two hex digits 80 are 128 of 255, which is the 8-bit encoding of 0.5. The picker does not change, because the color is not opaque.

Worked example: a translucent overlay from a design file

A design file specifies a modal backdrop as #1E293B at 60% opacity, and the stylesheet needs a single value. Type rgba(30, 41, 59, 0.6) into the field. The output is:

HEX   #1E293B99
RGB   rgba(30, 41, 59, 0.6)
HSL   hsla(217, 33%, 17%, 0.6)

Alpha reads 0.6. In the 8-digit hex, the last pair 99 is 153 in decimal, and 0.6 × 255 is exactly 153. All three lines describe the same color, so use whichever matches the rest of your CSS.

One caution about the HSL line. The converter rounds hue, saturation and lightness to whole numbers. Converting hsl(217, 33%, 17%) back to RGB gives rgb(29, 40, 58), or #1D283A, which is one step off in each channel from the original #1E293B. The difference is invisible on screen, but it will fail an exact match in a design token check or a visual regression test. Keep the hex or RGB value as the source of truth and treat the rounded HSL as a readable label.

When you need a conversion

Use it when a mock gives you hex and the stylesheet wants HSL, when a token is named rebeccapurple and you need the hex for a design tool that does not accept names, or when you picked a color in the OS picker and want the CSS forms. It is also a quick way to see whether a color carries alpha.

Common mistakes

• Expecting the output hex to keep your lowercase letters. The page always prints uppercase. The color is the same.
• Typing hsl(36, 79, 57) without percent signs. CSS HSL saturation and lightness need %. The canvas parser will reject the string and Status will say unrecognized.
• Assuming HSL values are exact. Hue, saturation, and lightness are rounded to integers, so a round trip from a fractional HSL may move by a degree or a percent.
• Pasting a hex with a space, or with 0x. Use #e8a33d or e8a33d.

Limits and privacy

It does not convert to CMYK, LAB, OKLCH, or display-p3. It does not build a palette or check contrast against WCAG. It does not edit individual channels with sliders (the native picker is the only extra control). It will not read a screenshot or an image. Newer CSS functions your browser can paint may parse and then be printed only as HEX/RGB/HSL, with HSL derived from the resolved sRGB triple.

Parsing uses an off-screen canvas in this tab. The color string is not uploaded or stored. Closing the tab clears the field.