Free Color Converter — HEX to RGB, HSL & CMYK

Whether you're writing CSS, designing in Figma, or preparing files for print, you constantly need to convert between color formats. Our free color converter handles HEX, RGB, HSL, and CMYK — with bonus features like palette generation and WCAG contrast checking.

Color Format Quick Reference

HEX to RGB: How the Conversion Works

A HEX color code like #FF5733 is actually three pairs of hexadecimal digits representing Red, Green, and Blue channels:

#FF5733
 ││││││
 ├┤├┤├┤
 R  G  B

FF = 255 (Red)
57 = 87  (Green)
33 = 51  (Blue)

Result: rgb(255, 87, 51)

Shorthand HEX codes like #F53 expand to #FF5533 — each digit doubles.

JavaScript Conversion

// HEX to RGB
function hexToRgb(hex) {
  hex = hex.replace('#', '');
  return {
    r: parseInt(hex.substring(0, 2), 16),
    g: parseInt(hex.substring(2, 4), 16),
    b: parseInt(hex.substring(4, 6), 16)
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('');
}

Why HSL Is Better for Theming

HSL (Hue, Saturation, Lightness) is more intuitive than RGB for creating color systems:

• Hue (0-360°): The position on the color wheel. Red=0°, Green=120°, Blue=240°
• Saturation (0-100%): How vivid the color is. 0% = gray, 100% = full color
• Lightness (0-100%): How bright. 0% = black, 50% = pure color, 100% = white

This means you can create consistent tints and shades by just adjusting the L value:

/* CSS Custom Properties with HSL theming */
:root {
  --hue: 145;         /* Brand green */
  --primary: hsl(var(--hue), 80%, 50%);
  --primary-light: hsl(var(--hue), 80%, 70%);
  --primary-dark: hsl(var(--hue), 80%, 30%);
  --primary-bg: hsl(var(--hue), 80%, 95%);
}

/* Dark mode? Just adjust lightness */
[data-theme="dark"] {
  --primary: hsl(var(--hue), 80%, 60%);
  --primary-bg: hsl(var(--hue), 80%, 10%);
}

CMYK: When You Need Print Colors

CMYK (Cyan, Magenta, Yellow, Key/Black) is used for print. RGB/HEX colors on your screen won't always look the same when printed because screens emit light (additive color) while print absorbs light (subtractive color).

Important: RGB-to-CMYK conversion is approximate without an ICC color profile. Our tool gives you a good starting point, but for production print work, use your design tool's color management system.

WCAG Contrast: Accessibility Matters

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors:

Our tool includes a built-in contrast checker — pick your text color and background, and instantly see if your combination passes AA and AAA requirements.

Contrast Ratio Formula

// Relative luminance
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255;
    return c <= 0.03928
      ? c / 12.92
      : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

// Contrast ratio
function contrastRatio(l1, l2) {
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

Color Palette Types Explained

• Complementary: Colors opposite on the wheel (180° apart). Maximum contrast. Good for CTAs and alerts.
• Analogous: Colors next to each other (±30°). Harmonious and natural. Great for backgrounds and gradients.
• Triadic: Three colors equally spaced (120° apart). Vibrant and balanced. Works well for dashboards and data visualization.
• Split Complementary: Base + two colors adjacent to its complement. Less tension than pure complementary.
• Shades: Your color mixed with increasing amounts of black. Creates depth.
• Tints: Your color mixed with increasing amounts of white. Creates lightness.

Related Tools

• Password Generator — Generate strong, secure passwords
• JSON Formatter — Format and validate JSON
• Base64 Encoder/Decoder — Encode and decode Base64
• All Free Tools — 18+ developer tools, all free