> colors
Colors
Convert color values, check contrast and create shades, for your website, a template and the print shop.
HEX (#C6FF3D), rgb(198, 255, 61), hsl(78, 100%, 62%) or a name like turquoise.
This cannot be read as a color. Examples: #C6FF3D, rgb(198, 255, 61), hsl(78, 100%, 62%), turquoise.
CMYK here is a simple conversion without a color profile. What comes out of the printing press depends on the profile and the paper. If in doubt, give the print shop the HEX or RGB value and let them convert it.
This cannot be read as a color, for example #333333 or rgb(51, 51, 51).
This cannot be read as a color, for example #FFFFFF or rgb(255, 255, 255).
Why it matters: With too little contrast, text simply cannot be read on a phone in the sun, with older eyes or on a cheap screen. And for many online shops and commercial services, accessibility has also been legally required since June 2025.
Enter two colors.
Large text: from 24 px
Also large: from 19 px if it is bold
Normal text at 16 px. Read this sentence all the way through once: If you squint or move closer while doing it, the contrast is too weak, no matter what the number above says.
The contrast is calculated with full opacity. For transparent colors, what actually lies underneath in the end is what counts.
This cannot be read as a color, for example #4169E1 or royalblue.
Lighter and darker means here: the hue and the saturation stay, only the lightness moves proportionally toward white or black. The complementary color is exactly opposite on the color wheel.
Calculations happen only on your device. Nothing is uploaded or saved.
How it works
- 01Type a color or pick one with the small color box: HEX, rgb(), hsl() or a name like turquoise.
- 02All notations appear right next to it, each with a button to copy.
- 03The address remembers the tab, for example bnkz.de/en/colors/#kontrast.
The contrast is calculated according to WCAG 2.1: the relative luminance of both colors gives a ratio from 1:1 (identical) to 21:1 (black on white). Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text needs only 3:1 for AA and 4.5:1 for AAA. Large means from 24 px, or from 18.66 px if bold. For transparent colors the number is only a rough guide: it is calculated with full opacity, because otherwise what lies underneath counts.
The name list is small and homemade: the common CSS color names and German names for them. You can type umlauts however you like, türkis and tuerkis both work. HSL is rounded to whole numbers when shown. If you convert the rounded value back, each color channel can be off by one to three steps. CMYK is an approximation without a color profile and does not replace a conversion by the print shop.