Color Converter

Why This Tool

You’re building a design system. The brand guide says the primary color is #3b82f6. Your CSS uses hsl() for theming. Your canvas animation needs rgb() channels. Your accessibility audit requires WCAG contrast ratios. Four formats, one color — and you’re copy-pasting into three different tools.

This converter handles all of it in one place: paste any format, get all formats back instantly, with WCAG contrast ratios calculated automatically.

The Four Color Formats You’ll Actually Use

HEX — The Universal Web Format

#3b82f6 is how designers think about color. Every design tool exports HEX. Every CSS tutorial uses HEX. It’s compact, copy-pasteable, and universally supported.

/* What you get from Figma, Sketch, Adobe XD */
color: #3b82f6;
background: #1e293b;
border-color: #e2e8f0;

HEX is three pairs of base-16 digits: #RRGGBB. Shorthand #RGB expands to #RRGGBB — so #38f is identical to #3388ff. Alpha channel: #RRGGBBAA (e.g., #3b82f680 = 50% opacity).

RGB — When You Need to Manipulate Channels

RGB becomes essential when you’re doing math on colors: generating gradients programmatically, creating hover states by darkening a channel, or animating color transitions in JavaScript.

// Darken a color by reducing all channels
function darken(hex, amount) {
  const { r, g, b } = hexToRgb(hex);
  return `rgb(${r - amount}, ${g - amount}, ${b - amount})`;
}

// Create a semi-transparent overlay
const overlay = `rgba(${r}, ${g}, ${b}, 0.5)`;

RGB range: 0–255 per channel. rgb(255, 255, 255) = white. rgb(0, 0, 0) = black.

HSL — The Designer’s Format for Theming

HSL is how humans think about color. When a designer says “make it 20% lighter” or “desaturate it a bit,” they’re thinking in HSL terms.

/* Design token system using HSL */
:root {
  --brand-hue: 217;
  --brand-saturation: 91%;
  
  --color-primary:    hsl(var(--brand-hue), var(--brand-saturation), 60%);
  --color-primary-dark:  hsl(var(--brand-hue), var(--brand-saturation), 45%);
  --color-primary-light: hsl(var(--brand-hue), var(--brand-saturation), 75%);
}

This pattern — fixing hue and saturation, varying lightness — is how Tailwind CSS generates its color scales. It’s also how you build dark mode: flip the lightness values.

• Hue (H): 0°–360° on the color wheel. 0° = red, 120° = green, 240° = blue.
• Saturation (S): 0% = gray, 100% = fully vivid.
• Lightness (L): 0% = black, 50% = pure color, 100% = white.

OKLCH — The Modern Standard (CSS Color Level 4)

OKLCH is the new perceptually uniform color space. Unlike HSL, equal numeric steps in OKLCH produce equal perceived brightness changes — critical for accessible color systems.

/* OKLCH in modern CSS */
.button {
  background: oklch(60% 0.15 250);  /* L=60%, C=0.15, H=250° */
}

.button:hover {
  background: oklch(50% 0.15 250);  /* Predictably darker, same hue */
}

Browser support: Chrome 111+, Firefox 113+, Safari 15.4+. Use with @supports for progressive enhancement.

WCAG Contrast Ratios — Built In

Every color you convert automatically shows its contrast ratio against white and black. This matters for accessibility compliance.

Real example: #3b82f6 (Tailwind blue-500) on white = 3.0:1. Fails AA for body text. Use #1d4ed8 (blue-700) instead = 5.9:1. Passes AA.

The contrast formula uses WCAG relative luminance: L = 0.2126R + 0.7152G + 0.0722B (after gamma correction). This tool calculates it for you — no manual math.

Conversion Formulas (For the Curious)

HEX → RGB

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return {
    r: parseInt(result[1], 16),  // #3b → 59
    g: parseInt(result[2], 16),  // #82 → 130
    b: parseInt(result[3], 16),  // #f6 → 246
  };
}

RGB → 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 (gray)
  } 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)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

Common Workflows

Figma to CSS: Copy HEX from Figma’s color picker → paste here → get hsl() for your CSS variables.

Accessibility audit: Paste your text color → check WCAG ratio against your background → adjust lightness until it passes.

Dark mode theming: Convert your light mode colors to HSL → flip lightness values (e.g., L:60% → L:40%) for dark mode equivalents.

Design token generation: Convert brand HEX to HSL → fix H and S → generate a full scale by varying L from 10% to 90%.

Frequently Asked Questions

What’s the difference between HSL and OKLCH? HSL is mathematically simple but perceptually non-uniform — a 10% lightness change looks different depending on the hue. OKLCH is perceptually uniform: equal numeric steps produce equal perceived changes. For accessible color systems, OKLCH is more predictable.

Why does my HEX color look different in HSL? Rounding. HSL values are integers (0–360 for hue, 0–100 for saturation and lightness). Converting HEX → HSL → HEX may produce a slightly different HEX due to rounding at each step. The visual difference is imperceptible (< 1 unit per channel).

Does this tool support alpha/transparency? Yes. Enter HEX with alpha (#3b82f680) or rgba(59, 130, 246, 0.5) and the tool preserves the alpha channel across all output formats.

What is WCAG relative luminance? It’s a measure of perceived brightness, accounting for the non-linear response of human vision. The formula applies gamma correction to each RGB channel before weighting them by their contribution to perceived brightness (green contributes most, blue least).

Can I use this for print colors (CMYK)? Not directly — this tool focuses on screen color formats (HEX, RGB, HSL, OKLCH). RGB and CMYK use different color models (additive vs. subtractive). For print work, use a dedicated CMYK converter.

Is the conversion accurate enough for production use? Yes. The algorithms use standard mathematical formulas identical to those in browsers and design tools. HSL values are rounded to integers, consistent with CSS engine behavior.