One color, or every color in a stylesheet
Paste a color such as #1e40af and get RGBA, HEX, RGB and HSL at once, with an opacity slider and previews on white, black and a background you choose. A see-through color also shows the solid color it looks like on each. Paste a whole stylesheet, SCSS, Less or HTML instead, and every color in it is converted while selectors, comments and links stay exactly as written.
Color conversions this handles
HEX to RGBA, with opacity
Input
#1e40af Opacity: 50%
Result
rgba(30, 64, 175, 0.5)
Turn on Set the opacity, then drag the slider or type an exact value. A pasted color keeps its own opacity unless you change it.
Every color in a stylesheet
Input
#add {
color: #fff;
background: url(icons.svg#fade);
}Result
#add {
color: rgba(255, 255, 255, 1);
background: url(icons.svg#fade);
}#add is a selector and #fade is part of a link, so only the real color changes. The Colors tab lists each color with the lines it’s on.
HEX opacity, rounded honestly
Input
#1e40af80
Result
rgba(30, 64, 175, 0.5)
HEX opacity has 256 steps, so 80 is 50.2%. The tool says so, and writes the shortest decimal that rounds back to the same step.
How to convert colors
- Paste one color, written as HEX, rgb(), hsl(), hwb() or a name such as white, or paste a whole stylesheet or HTML file.
- Choose a format in Convert to. RGBA comes first; HEX, modern RGB and HSL are a choice away.
- For one color, the Color tab shows it on white, black and your own background, with every format ready to copy. Turn on Set the opacity to make it more or less see-through.
- For a stylesheet, the Converted tab holds the result line for line, and the Colors tab lists each color, how it was written and where.
Color converter questions
Is my stylesheet uploaded?
No. Colors are converted in your browser. Nothing you paste is sent, stored or put in the page address.
What changes in a stylesheet, and what doesn’t?
Only colors in property values. Selectors such as #add, comments, strings, url() links and Sass or Less interpolation stay exactly as written, and so do colors already in the format you chose. Named colors such as white are kept unless you turn on Convert named colors.
Why does 50% opacity become 80 in HEX?
HEX opacity has 256 steps, from 00 to ff, and none of them is exactly 50%. 80 is the nearest, 50.2%. Going the other way, HEX 80 is written as 0.5, the shortest decimal that rounds back to 80.
Is #RRGGBBAA the same as XAML’s #AARRGGBB?
No. CSS puts the opacity last, while XAML, WPF and Android put it first. This tool reads eight-digit HEX the CSS way, so move a XAML color’s first two digits to the end before converting it.
Which colors can it read?
sRGB colors: three-, four-, six- and eight-digit HEX, rgb() and rgba() in both the older and newer syntax, hsl(), hsla(), hwb() and the 148 named colors. Colors built from variables or calc(), and newer formats such as oklch(), are listed and left as written.
sRGB colors only
This tool converts sRGB colors. It doesn’t convert oklch(), lab() or color(), work out colors that depend on variables, or check contrast for accessibility. Channels are rounded to whole numbers, as browsers show them.