Developer tools
Convert any CSS colour between HEX, RGB, HSL and CMYK, get matching tints and shades, and check that text is readable on your background.
Not a colour CSS understands.
Tints and shades
Contrast checker (WCAG)
Large heading text
Normal body text should be easy to read.
Type any CSS colour (#7c3aed, rgb(…), hsl(…) or a name like teal) or use the picker.
Copy the format you need, or a tint/shade from the palette.
Below, set a text and background colour to check the WCAG contrast ratio.
WCAG AA needs 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold). AAA needs 7:1 and 4.5:1.
Both describe the same colour. HSL is easier to adjust by hand (change the lightness for hover states), HEX is the most common in design files.
Paste this code into your page. It's free, with no sign-up, ads or cookies.
Please keep the "Powered by Dev-Talk" link.
Last updated: 7 November 2026. See the update log at the end."Which is faster, PostgreSQL or...
Last updated: 8 November 2026. See the update log at the end.Laravel gives you safe defaults...
Last updated: 5 November 2026. See the update log at the end.In a normal PHP-FPM request,...
We use cookies to improve your experience and analyze traffic. By continuing, you agree to our Privacy Policy.
