Color Conversion Guide: RGB, HEX, HSV, CMYK Explained

Understanding color spaces and conversions is essential for web development, graphic design, and digital imaging.

Color Models Overview

RGB (Red, Green, Blue)

• Additive color model for screens
• Values: 0-255 per channel
• Example: rgb(255, 128, 0)

HEX (Hexadecimal)

• Compact RGB representation
• Format: #RRGGBB or #RGB
• Example: #FF8000

HSV/HSB (Hue, Saturation, Value/Brightness)

• Intuitive color picking
• Hue: 0-360°, Saturation: 0-100%, Value: 0-100%
• Example: hsv(30, 100%, 100%)

HSL (Hue, Saturation, Lightness)

• CSS-native color model
• Similar to HSV but with Lightness
• Example: hsl(30, 100%, 50%)

CMYK (Cyan, Magenta, Yellow, Key/Black)

• Subtractive model for print
• Values: 0-100% per channel
• Example: cmyk(0, 50, 100, 0)

Conversion Formulas

RGB to HEX

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

rgbToHex(255, 128, 0); // #ff8000

HEX to RGB

function hexToRgb(hex) {
  const result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

hexToRgb('#ff8000'); // {r: 255, g: 128, b: 0}

RGB to HSV

function rgbToHsv(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const d = max - min;

  let h, s, v = max;
  s = max === 0 ? 0 : d / max;

  if (max === min) {
    h = 0;
  } else {
    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),
    v: Math.round(v * 100)
  };
}

HSV to RGB

function hsvToRgb(h, s, v) {
  h /= 360; s /= 100; v /= 100;

  const i = Math.floor(h * 6);
  const f = h * 6 - i;
  const p = v * (1 - s);
  const q = v * (1 - f * s);
  const t = v * (1 - (1 - f) * s);

  let r, g, b;
  switch (i % 6) {
    case 0: r = v; g = t; b = p; break;
    case 1: r = q; g = v; b = p; break;
    case 2: r = p; g = v; b = t; break;
    case 3: r = p; g = q; b = v; break;
    case 4: r = t; g = p; b = v; break;
    case 5: r = v; g = p; b = q; break;
  }

  return {
    r: Math.round(r * 255),
    g: Math.round(g * 255),
    b: Math.round(b * 255)
  };
}

RGB to CMYK

function rgbToCmyk(r, g, b) {
  r /= 255; g /= 255; b /= 255;

  const k = 1 - Math.max(r, g, b);
  const c = (1 - r - k) / (1 - k) || 0;
  const m = (1 - g - k) / (1 - k) || 0;
  const y = (1 - b - k) / (1 - k) || 0;

  return {
    c: Math.round(c * 100),
    m: Math.round(m * 100),
    y: Math.round(y * 100),
    k: Math.round(k * 100)
  };
}

CMYK to RGB

function cmykToRgb(c, m, y, k) {
  c /= 100; m /= 100; y /= 100; k /= 100;

  return {
    r: Math.round(255 * (1 - c) * (1 - k)),
    g: Math.round(255 * (1 - m) * (1 - k)),
    b: Math.round(255 * (1 - y) * (1 - k))
  };
}

When to Use Each Color Space

Color Space	Best For
RGB	Programming, digital
HEX	CSS, web design
HSV	Color picking, adjustments
HSL	CSS, intuitive colors
CMYK	Print design

CSS Color Examples

/* All represent the same orange */
.color {
  color: rgb(255, 128, 0);
  color: #ff8000;
  color: hsl(30, 100%, 50%);
}

Try Our Color Tools

• RGB to HEX
• HEX to RGB
• HSV to RGB
• RGB to HSV
• CMYK to RGB
• RGB to CMYK
• Random Color

Conclusion

Understanding color conversions helps create consistent designs across screen and print media.