Contrast for accessibility
The WCAG contrast ratio with white and black text shows which one is readable on this background. Normal text needs 4.5:1 for level AA.
FOR WEB DEVELOPERS
Code stays on your device
Color Converter
Convert any CSS color between HEX, RGB, HSL, HWB, OKLCH and CMYK, and check its contrast with white and black text.
1 Color
Processed in your browser. Nothing is uploaded.
THREE SMALL STEPS
How to convert a color
-
01
Enter a color
Type or paste a HEX code, an rgb() or hsl() value, a modern CSS color or a name such as teal.
-
02
Read the formats
The same color appears in HEX, RGB, HSL, HWB, OKLCH and CMYK as you type, with a preview swatch.
-
03
Copy what you need
Copy a single format for your stylesheet, design file or brand guide.
Good to know
CMYK is an estimate
Printers convert colors with a profile for their paper and inks. Use the CMYK values as a starting point and confirm them with your print shop.
Wide-gamut colors
OKLCH and display-p3 values can describe colors that sRGB screens cannot show. Those colors are clipped to the sRGB range for HEX, RGB, HSL and HWB.
QUESTIONS
Frequently asked questions
How do I convert a HEX color to RGB?
Paste a HEX value such as #2856c7 and read the RGB result. The same color is also shown in other supported color spaces. Check the alpha value when converting a color with transparency.
Why does a HEX code sometimes have eight digits?
The last two digits store transparency. #2856c780 is the same blue at 50 percent opacity.
What is OKLCH?
A CSS color format based on how people perceive lightness, chroma and hue. Changing only its lightness gives shades that look evenly spaced.
Can I convert CSS color names?
Yes. Every CSS named color works, such as rebeccapurple or teal, and the tool shows its exact HEX value.