Color Lab

Mix colors with RGB, HSL, HSB or Hex, simulate color-blind vision, and see WCAG 2.x contrast results live.

Sliders RGB HSL HSB

Simulate

Contrast between your colors

Matrix: rows are text colors, columns are backgrounds. Click a cell to open it in the checker.

Export palette (CSS variables, JSON, or Tailwind config)

Start from one brand color. This builds a 6-role palette — background, surface, brand, a darkened solid-fill shade, text, and an on-brand text color — tuned so the key text/background pairings pass WCAG.

Ratios use the WCAG 2.x relative-luminance formula. Displayed ratios are truncated (not rounded up) so a 4.499 never appears as a pass at 4.50. Large text = 24px+ regular or ~18.66px+ bold. Vision simulation uses the Machado et al. (2009) matrices (protanopia, deuteranopia, tritanopia) and relative luminance (achromatopsia); while a simulation is active, swatches, previews and ratios use the simulated colors, and hex fields and sliders still edit the true color. APCA / WCAG 3 are not included. The dark-mode preference resets on reload.