Design

Color Converter — HEX, RGB, HSL and contrast check

Convert a colour between HEX, RGB and HSL and see whether text on it is readable.

HEX, RGB and HSL are the same colour

HEX and RGB are the same thing written differently: three numbers from 0 to 255, one per channel. HSL rewrites those numbers as hue, saturation and lightness, which is easier to reason about when you want a lighter or less saturated version of a colour — change one number instead of three.

Contrast decides whether text is readable

The WCAG contrast ratio compares the relative luminance of two colours. The thresholds are 4.5:1 for body text and 3:1 for large text (18pt, or 14pt bold). Below 4.5 the text is hard to read for many people in daylight, and the App Store's accessibility labels now ask you to declare whether your app meets sufficient contrast.