What are the last two digits of an 8-digit HEX? How do I convert opacity?

In #RRGGBBAA the last two digits are opacity: 00 is fully transparent and FF fully opaque, calculated as percentage × 255 converted to hex. Common values: 10% = 1A, 20% = 33, 50% = 80, 80% = CC, 90% = E6. So #2563eb80 is rgba(37, 99, 235, 0.5), and #0000001a is 10% black, a typical shadow color. The 4-digit #f00a equals #ff0000aa, about 0.667 opacity. Old Internet Explorer does not support 8-digit HEX; use rgba if you need it.

Why does HSL have decimals? Can't it be rounded?

Rounding changes the color. The exact HSL of #2563eb is about (221.21, 83.19%, 53.33%); written as hsl(221, 83%, 53%) it converts back to #2463eb, slightly off. This tool uses as few decimals as possible while guaranteeing the same color comes back: #2563eb gives hsl(221.2, 83.2%, 53.3%), while pure red #ff0000 stays hsl(0, 100%, 50%). In testing, 300 random colors converted to HSL and back all matched exactly.

Which formats are supported? How many color names are there?

Any color syntax the browser can draw: hexadecimal (3, 4, 6 or 8 digits, # optional), rgb() and rgba() (commas or spaces, numbers or percentages, decimals allowed), hsl() and hsla() (angles in deg or turn, even negative, e.g. hsl(-30, 100%, 50%) is #ff0080), the 148 standard CSS color names (tomato is #ff6347, rebeccapurple is #663399), plus oklch(), lab() and color(display-p3 …). Context-dependent keywords such as currentcolor and inherit cannot be converted and are reported as unrecognized.

What happens with out-of-range values like rgb(300, 0, 0)?

They are clamped to 0–255 following the CSS rules, so rgb(300, 0, 0) becomes #ff0000, exactly what a browser would display. Percentages work the same way: rgb(100%, 0%, 0%) is also #ff0000. The HEX output is therefore always a valid 6- or 8-digit value.

Why do oklch and display-p3 colors change when converted?

HEX, RGB and HSL can only express the sRGB gamut, while oklch and display-p3 can describe more saturated colors. Colors inside sRGB convert exactly, e.g. oklch(0.6 0.2 260) is #2e79f5; colors outside it are mapped to the nearest sRGB color. Tested in Chrome, oklch(0.7 0.4 150) becomes #00d600 and color(display-p3 1 0 0), pure red on a P3 screen, becomes #ff0000. On a wide-gamut display the original syntax looks more vivid than the converted HEX.

Is HSL the same as HSB/HSV in design apps?

No, and this is the most common mix-up. In CSS HSL, L is lightness: a pure hue is most vivid at L = 50% and 100% is white. In the HSB (also called HSV) used by Photoshop and Figma pickers, B is brightness, and a pure hue is at B = 100%. Pure red is (0, 100%, 50%) in HSL but (0, 100%, 100%) in HSB. The hue H is the same; saturation and lightness cannot be copied across directly.

Can the picker sample colors from the screen?

The swatch on the right opens your operating system's color picker. On macOS its color panel includes a magnifier that can sample any pixel on screen; on Windows and phones you usually pick from a color wheel only. The chosen color goes straight into the input. The system picker does not support transparency, so it always gives an opaque color.

Are my files or data uploaded?

No. Everything runs locally in your browser with no network upload, and is discarded when you close the page.

Do I need to sign up or pay?

No. The site is completely free, needs no account and has no usage limits.

🎨

🎨Color Converter - HEX, RGB & HSL Online

Enter a color and get its HEX, RGB and HSL forms at once, each with its own copy button, alongside a large preview swatch and the system color picker. Colors are parsed by the browser itself, so almost any CSS color works: #2563eb, 2563EB without the #, #2563eb80 with transparency, rgb(37 99 235 / 50%), percentages and decimals, hsl(210deg 50% 50%), named colors like tomato, and modern oklch, lab and color(display-p3 …). Out-of-range values are clamped by the CSS rules, so you never get an invalid result like #12c0000. Transparent colors are output as 8-digit HEX, rgba and hsla, previewed over a checkerboard. HSL keeps just enough decimals that pasting it back gives exactly the same color. Everything is calculated live in your browser.

Loading tool...

How to use Color Converter

1Type or paste a color in any CSS syntax, or click the swatch on the right to use the system picker
2Check the preview; semi-transparent colors show the checkerboard behind them
3Copy the row you need: HEX, RGB and HSL, or 8-digit HEX, RGBA and HSLA for transparent colors

FAQ

What are the last two digits of an 8-digit HEX? How do I convert opacity?: In #RRGGBBAA the last two digits are opacity: 00 is fully transparent and FF fully opaque, calculated as percentage × 255 converted to hex. Common values: 10% = 1A, 20% = 33, 50% = 80, 80% = CC, 90% = E6. So #2563eb80 is rgba(37, 99, 235, 0.5), and #0000001a is 10% black, a typical shadow color. The 4-digit #f00a equals #ff0000aa, about 0.667 opacity. Old Internet Explorer does not support 8-digit HEX; use rgba if you need it.
Why does HSL have decimals? Can't it be rounded?: Rounding changes the color. The exact HSL of #2563eb is about (221.21, 83.19%, 53.33%); written as hsl(221, 83%, 53%) it converts back to #2463eb, slightly off. This tool uses as few decimals as possible while guaranteeing the same color comes back: #2563eb gives hsl(221.2, 83.2%, 53.3%), while pure red #ff0000 stays hsl(0, 100%, 50%). In testing, 300 random colors converted to HSL and back all matched exactly.
Which formats are supported? How many color names are there?: Any color syntax the browser can draw: hexadecimal (3, 4, 6 or 8 digits, # optional), rgb() and rgba() (commas or spaces, numbers or percentages, decimals allowed), hsl() and hsla() (angles in deg or turn, even negative, e.g. hsl(-30, 100%, 50%) is #ff0080), the 148 standard CSS color names (tomato is #ff6347, rebeccapurple is #663399), plus oklch(), lab() and color(display-p3 …). Context-dependent keywords such as currentcolor and inherit cannot be converted and are reported as unrecognized.
What happens with out-of-range values like rgb(300, 0, 0)?: They are clamped to 0–255 following the CSS rules, so rgb(300, 0, 0) becomes #ff0000, exactly what a browser would display. Percentages work the same way: rgb(100%, 0%, 0%) is also #ff0000. The HEX output is therefore always a valid 6- or 8-digit value.
Why do oklch and display-p3 colors change when converted?: HEX, RGB and HSL can only express the sRGB gamut, while oklch and display-p3 can describe more saturated colors. Colors inside sRGB convert exactly, e.g. oklch(0.6 0.2 260) is #2e79f5; colors outside it are mapped to the nearest sRGB color. Tested in Chrome, oklch(0.7 0.4 150) becomes #00d600 and color(display-p3 1 0 0), pure red on a P3 screen, becomes #ff0000. On a wide-gamut display the original syntax looks more vivid than the converted HEX.
Is HSL the same as HSB/HSV in design apps?: No, and this is the most common mix-up. In CSS HSL, L is lightness: a pure hue is most vivid at L = 50% and 100% is white. In the HSB (also called HSV) used by Photoshop and Figma pickers, B is brightness, and a pure hue is at B = 100%. Pure red is (0, 100%, 50%) in HSL but (0, 100%, 100%) in HSB. The hue H is the same; saturation and lightness cannot be copied across directly.
Can the picker sample colors from the screen?: The swatch on the right opens your operating system's color picker. On macOS its color panel includes a magnifier that can sample any pixel on screen; on Windows and phones you usually pick from a color wheel only. The chosen color goes straight into the input. The system picker does not support transparency, so it always gives an opaque color.
Are my files or data uploaded?: No. Everything runs locally in your browser with no network upload, and is discarded when you close the page.
Do I need to sign up or pay?: No. The site is completely free, needs no account and has no usage limits.

Features

HEX, RGB and HSL output together
Understands color names, 3/4/6/8-digit HEX, percentages, decimals, deg/turn angles, oklch, lab and display-p3
Keeps transparency with 8-digit HEX, rgba and hsla, previewed on a checkerboard
HSL keeps the decimals it needs, so round trips never shift the color
Out-of-range values are clamped by CSS rules, never producing an invalid color
System color picker and large preview, all computed locally

Related tools

View all 93 Developer Tools →