Color Converter

Convert any color between HEX, RGB, HSL, HSV, OKLCH, and CSS named colors. Plus a WCAG contrast ratio against a second color, so you can confirm accessibility while picking.

Color spaces explained

  • HEX / RGB — the same color, different notation. Red/green/blue channels 0-255. The de-facto web standard.
  • HSL — hue/saturation/lightness. More intuitive for humans: rotate hue without changing brightness.
  • HSV / HSB — hue/saturation/value. What most color pickers use internally. Lightness scaling differs from HSL.
  • OKLCH — perceptually uniform. Equal numeric distance = equal perceptual difference. The right space for design system palettes; Tailwind's v4 default.

WCAG contrast ratios

  • Body text: 4.5:1 minimum (AA), 7:1 enhanced (AAA)
  • Large text (18pt+ or 14pt bold): 3:1 minimum (AA), 4.5:1 (AAA)
  • UI components and graphics: 3:1 minimum