Color contrast checker
Check WCAG 2.2 text contrast with a live preview and separate AA and AAA results for normal and large text.
Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
Edit HEX, RGB or HSL. The other formats and the preview update together.
About this tool
Transfer a design color into CSS using whichever representation you already have. Conversions cover sRGB values, not CMYK or print spot colors.
How to use
Enter a HEX, RGB or HSL value, or use the color picker. The opacity slider updates the results. Three-, four-, six- and eight-digit HEX values and RGB/HSL alpha values are supported.
RGB channels accept 0–255 values or percentages. HSL saturation and lightness use percentages. Out-of-range values are rejected. This tool does not convert print CMYK or wide-gamut color spaces.
HEX, RGB and HSL each have their own editable field. Change whichever format you prefer and the other two update immediately. The field you are typing in retains its text and cursor; incomplete or invalid input is marked and copying stays unavailable until it is valid.
Common questions
Where is alpha in an eight-digit HEX color?
CSS uses #RRGGBBAA, with alpha in the last two digits. Some applications use ARGB instead, so check the order before pasting. RGB and HSL can also include alpha.
Which RGB and HSL forms can I paste?
Use rgb(255 0 0 / 50%) or hsl(0 100% 50%), for example. Comma syntax also works, but do not mix commas with slash syntax. Color names and CMYK are not accepted.
Why does 50% opacity change slightly in HEX?
HEX stores alpha in 256 steps. Exactly 0.5 rounds to 80, which represents 128/255. Keep RGB or HSL output when you need the decimal alpha value rather than eight-digit HEX.
Related tools
Opens in a new tab
Comments
0