Color Converter
Convert HEX, RGB and HSL values with transparency, preview your color, and copy ready-to-use CSS. Check text contrast against a background without sending your palette to a server.
Your color
Examples: #39d5b3, #39d5b380, rgb(57 213 179 / 50%), hsl(167 65% 53%).
Converted CSS values
HEX, RGB and HSL omit alpha. HEXA, RGBA and HSLA include it. The opaque color picker replaces any existing alpha.
Text contrast preview
How to use Color Converter
- Paste a three-, four-, six- or eight-digit HEX value, an rgb()/rgba() value, or an hsl()/hsla() value.
- Choose a background to inspect the composited text contrast. Alpha is included in that comparison.
- Copy the format you need or download a small stylesheet with CSS custom properties.
Method and limits
Conversions use 8-bit sRGB channels. HSL hue wraps around the color wheel; saturation and lightness use percentages. Out-of-range channel values are rejected instead of silently clamped. Displayed values are rounded, so repeated conversions can slightly change HSL values. This tool does not convert wide-gamut, Lab or named CSS colors apart from transparent.
Reference: W3C text contrast guidance
Frequently asked questions
What is the difference between HEX and HEXA?
HEX uses six digits for red, green and blue. HEXA adds two digits for alpha, from 00 (transparent) to ff (opaque).
Why does HSL change slightly after conversion?
The color is represented with 8-bit RGB channels. Rounding between those channels and HSL introduces small differences.
Does the contrast result certify my whole page?
No. It compares the selected text/background colors using the WCAG relative-luminance calculation. Font size, weight, surrounding content and other accessibility requirements still matter.
Worked example: preserve transparency when copying a color
Enter #33669980. Its opaque color channels are red 51, green 102 and blue 153. The HEX field is #336699, while HEXA keeps the trailing 80 alpha byte. RGBA is rgba(51, 102, 153, 0.502); HSL is hsl(210, 50%, 40%). Use HEXA, RGBA or HSLA when the destination should retain transparency.
Alpha 80 is 128 out of 255, approximately 50.2% rather than exactly 50%. Choosing an opaque color in the picker replaces the existing alpha. An element-level CSS opacity setting has different effects because it can also affect the element's children.
Check the actual background
Try opaque #777777 against white. Its text contrast is approximately 4.48:1, so it is just below the 4.5:1 minimum for normal text in WCAG's minimum-contrast criterion. The tool compares the unrounded calculation with the threshold; a near miss should not be rounded into a pass. Try #767676 for approximately 4.54:1.
A translucent foreground mixes with the background before contrast is calculated. Select the background your text will actually appear on. A single-color calculation cannot certify text over a photograph, gradient or changing video; inspect the least favorable area and the rest of your design too.
When a conversion is rejected
- RGB channels must be within 0–255 or 0–100%;
rgb(300, 0, 0)is rejected rather than silently clamped. - HSL saturation and lightness need percent signs. Hue can use degrees, turns, radians or gradians.
- Use either comma syntax or space-and-slash syntax consistently inside one value.
- Wide-gamut and Lab colors need a different conversion workflow; this tool works in 8-bit sRGB.
Follow the HEX, alpha and contrast walkthrough for equivalent formats and a practical interface-color check.
Examples and practical checks
Understand the result before using it elsewhere.
- Convert CSS colors without losing alpha or misreading contrastWorked example · 5 min read
- Explore Developer ToolsCompare tools and their limits
- How we test these toolsMethods, verification and limitations