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
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
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.
Related tools
CSS gradient generator
Build linear or radial gradients with two to eight editable color stops, a live preview and copyable CSS.
CSS box shadow generator
Adjust offset, blur, spread, color and opacity with a live preview, then copy a box-shadow declaration for an outer or inset shadow.
Aspect ratio calculator
Simplify an image or video aspect ratio and calculate the matching width or height for a target size, with a visual preview.
Comments
0