Color Converter

Color Space Mathematics: HEX, RGB, HSL & CMYK

A color space is a mathematical model describing the way colors can be represented as tuples of numbers. In graphic design, UI engineering, and print production, working across multiple digital and physical media requires continuous conversion between additive and subtractive color spaces.

The primary color spaces supported in modern design include:

• sRGB (Red, Green, Blue): The standard additive color model for electronic displays (0–255 per channel). Red, green, and blue light combine to produce pure white.
• HEX (#RRGGBB): Base-16 hexadecimal shorthand for sRGB channels (e.g. #6366F1), ubiquitous in CSS stylesheets and UI design tokens.
• HSL (Hue, Saturation, Lightness): A cylindrical coordinate representation of RGB that aligns closely with human perception. Hue is an angle (0°–360° on the color wheel), Saturation is a percentage (0% gray to 100% vivid), and Lightness represents illumination (0% black to 100% white). HSL is ideal for generating programmatic color palettes and hover states.
• CMYK (Cyan, Magenta, Yellow, Key/Black): The subtractive color model used in commercial color printing presses. Inks absorb light; combining cyan, magenta, and yellow subtracts reflected light toward black.

Our Color Converter translates colors across all spaces simultaneously, calculating WCAG contrast ratios and one-click CSS code copies.

Programmatic Color Space Conversion in JavaScript

// Convert HEX to RGB
function hexToRgb(hex) {
  const cleanHex = hex.replace(/^#/, '');
  const num = parseInt(cleanHex, 16);
  return {
    r: (num >> 16) & 255,
    g: (num >> 8) & 255,
    b: num & 255
  };
}

// Convert RGB to HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0; // achromatic
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

console.log(hexToRgb("#6366F1")); // { r: 99, g: 102, b: 241 }
console.log(rgbToHsl(99, 102, 241)); // { h: 239, s: 84, l: 67 }

WCAG 2.1 Color Contrast & Accessibility Standards

Web Content Accessibility Guidelines (WCAG) 2.1 establish strict minimum color contrast ratios between text and background to ensure readability for users with low vision or color blindness:

• Level AA (Minimum Requirement): Requires a contrast ratio of at least 4.5:1 for normal text, and 3.0:1 for large text (18pt or 14pt bold).
• Level AAA (Enhanced Accessibility): Requires a contrast ratio of at least 7.0:1 for normal text, and 4.5:1 for large text.

Next-Gen CSS Color Spaces: OKLCH & Display P3

CSS Color Module Level 4 introduces modern perceptual spaces like OKLCH and Display P3. OKLCH fixes long-standing visual luminance bugs in HSL, ensuring that colors with identical lightness values appear equally bright to human eyes across all hues.

CIE Lab, sRGB Gamut Clipping & Modern CSS OKLCH Perceptual Uniformity

Digital color displays historically operated within the legacy sRGB color space, designed around the cathode ray tube phosphors of the 1990s. While Hex and RGB formats represent color channels as 8-bit integers (0 to 255), they suffer from perceptual non-uniformity: changing the green channel by 20 units creates a vastly larger perceived brightness shift than changing the blue channel by 20 units.

Modern CSS Color Module Level 4 introduces OKLCH (Lightness, Chroma, Hue), which aligns color coordinates directly with human vision. In OKLCH, colors with identical Lightness values (e.g. L: 0.7) appear equally luminous to the human eye regardless of hue, revolutionizing algorithmic accessible UI theme generation and high-gamut Display P3 monitor support.

Frequently Asked Questions