Color tools

Color tools cover the three common designer tasks: converting between color formats, checking accessibility contrast, and simulating how colors appear to viewers with color vision deficiencies. The tools here handle each in your browser, with the math documented so the results are reproducible against any other tool that follows the same standards (WCAG 2.1 for contrast, HSL space for conversion, the standard CIE- based simulation matrices for color blindness).

The hex / RGB / HSL converter translates between the three common digital color representations. Hex (e.g. #FF6347) is what CSS uses; RGB (e.g. rgb(255, 99, 71)) is the same thing in decimal; HSL (e.g. hsl(9, 100%, 64%)) is the same color expressed as hue, saturation, lightness — much easier to reason about for design (rotating hue, brightening, desaturating). The color contrast checker measures contrast ratio against WCAG 2.1 thresholds and reports Pass/ Fail for AA Normal, AA Large, AAA Normal, AAA Large, and the 3:1 minimum for non-text elements.

The color blindness simulator applies the standard CIE-derived transformation matrices to show how a color (or, when used together with a contrast check, an interface) appears to viewers with the eight common color vision deficiencies (deuteranopia, protanopia, tritanopia, and the three monochromatic variants). About 8% of men and 0.5% of women have some form of color vision deficiency — a check against this tool catches contrast and color-coding choices that would be lost on a meaningful fraction of any audience.