Color Converter: Complete Guide to Color Conversion

What is Color Theory in Web Design

Colors on the web are represented through different numerical systems, each with specific advantages for designers, developers, and creatives. Understanding how HEX, RGB, and HSL work is fundamental for creating consistent, accessible, and visually appealing interfaces. Converting between these formats is a daily operation for anyone working with CSS, design systems, or brand identity.

Our Color Converter is a free tool that instantly converts between HEX, RGB, and HSL, with a visual color picker, palette generator, and real-time preview. It works 100% in the browser without sending data to external servers.

The Three Main Color Formats

HEX (Hexadecimal)

The HEX format represents colors with 6 hexadecimal characters (0-9, A-F) preceded by #. Each pair represents a channel: Red, Green, Blue.

#RRGGBB

Examples:
#FF0000 = Pure Red (R=255, G=0, B=0)
#00FF00 = Pure Green (R=0, G=255, B=0)
#0000FF = Pure Blue (R=0, G=0, B=255)
#FFFFFF = White (all channels at max)
#000000 = Black (all channels at zero)
#808080 = Medium gray

Shorthand (3 characters):
#RGB → #RRGGBB
#F00 = #FF0000 (Red)
#0F0 = #00FF00 (Green)
#00F = #0000FF (Blue)

RGB (Red, Green, Blue)

The RGB format uses three numbers from 0 to 255 for Red, Green, and Blue channels. It's the additive model used by monitors.

rgb(R, G, B)
rgba(R, G, B, A)  // With alpha (transparency 0-1)

Examples:
rgb(255, 0, 0)     = Pure red
rgb(0, 255, 0)     = Pure green
rgb(0, 0, 255)     = Pure blue
rgb(255, 255, 255) = White
rgb(0, 0, 0)       = Black
rgba(0, 0, 0, 0.5) = Black 50% transparent

HSL (Hue, Saturation, Lightness)

The HSL format is more intuitive for human editing, based on hue, saturation, and lightness.

hsl(H, S%, L%)
hsla(H, S%, L%, A)  // With alpha

H = Hue: 0-360 degrees on the color wheel
  0° = Red
  60° = Yellow
  120° = Green
  180° = Cyan
  240° = Blue
  300° = Magenta

S = Saturation: 0-100%
  0% = Gray (desaturated)
  100% = Pure color (saturated)

L = Lightness: 0-100%
  0% = Black
  50% = Normal color
  100% = White

Examples:
hsl(0, 100%, 50%)   = Pure red
hsl(120, 100%, 50%) = Pure green
hsl(240, 100%, 50%) = Pure blue
hsl(0, 0%, 50%)     = Medium gray

Common Color Conversion Table

Color	HEX	RGB	HSL
Red	#FF0000	rgb(255,0,0)	hsl(0,100%,50%)
Lime Green	#00FF00	rgb(0,255,0)	hsl(120,100%,50%)
Blue	#0000FF	rgb(0,0,255)	hsl(240,100%,50%)
Yellow	#FFFF00	rgb(255,255,0)	hsl(60,100%,50%)
Magenta	#FF00FF	rgb(255,0,255)	hsl(300,100%,50%)
Cyan	#00FFFF	rgb(0,255,255)	hsl(180,100%,50%)
Orange	#FFA500	rgb(255,165,0)	hsl(39,100%,50%)
Purple	#800080	rgb(128,0,128)	hsl(300,100%,25%)

7+ Real-World Use Cases

1. CSS Styling

/* All formats are valid in CSS */
.button-primary {
  background-color: #3B82F6;        /* HEX */
  color: rgb(255, 255, 255);        /* RGB */
  border-color: hsl(217, 91%, 60%); /* HSL */
}

/* With transparency */
.overlay {
  background: rgba(0, 0, 0, 0.7);   /* Black 70% */
  background: hsla(0, 0%, 0%, 0.7); /* HSL equivalent */
}

/* CSS Custom Properties (variables) */
:root {
  --primary-h: 217;
  --primary-s: 91%;
  --primary-l: 60%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 80%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 40%);
}

2. Design Systems and Brand Colors

// Tailwind Config
module.exports = {
  theme: {
    colors: {
      primary: {
        50: '#eff6ff',
        100: '#dbeafe',
        500: '#3b82f6',
        900: '#1e3a8a',
      }
    }
  }
}

// Figma Variables
Primary Blue
  HEX: #3B82F6
  RGB: 59, 130, 246
  HSL: 217°, 91%, 60%

3. Dark Mode Toggle

:root {
  --bg: hsl(0, 0%, 100%);      /* White */
  --text: hsl(0, 0%, 10%);     /* Near black */
}

[data-theme="dark"] {
  --bg: hsl(0, 0%, 10%);       /* Near black */
  --text: hsl(0, 0%, 90%);     /* Near white */
}

/* With HSL, just change L (lightness) */

4. Accessibility (WCAG Contrast)

// Calculate relative luminance
function getLuminance(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 getContrastRatio(color1, color2) {
  const l1 = getLuminance(...color1);
  const l2 = getLuminance(...color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

// WCAG requires:
// AA: 4.5:1 for normal text, 3:1 for large text
// AAA: 7:1 for normal text, 4.5:1 for large text

5. Canvas and 2D Graphics

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// fillStyle accepts all formats
ctx.fillStyle = '#FF6B6B';
ctx.fillStyle = 'rgb(255, 107, 107)';
ctx.fillStyle = 'hsl(0, 100%, 71%)';

// Gradient
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, '#FF6B6B');
gradient.addColorStop(1, '#4ECDC4');
ctx.fillStyle = gradient;

6. Data Visualization (Charts)

// Chart.js
const chart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: [30, 50, 20],
      backgroundColor: [
        'hsl(0, 70%, 60%)',    // Red
        'hsl(120, 70%, 60%)',  // Green
        'hsl(240, 70%, 60%)'   // Blue
      ]
    }]
  }
});

// Generate N evenly spaced colors on the wheel
function generateColors(n) {
  return Array.from({ length: n }, (_, i) =>
    `hsl(${(360 / n) * i}, 70%, 60%)`
  );
}

7. Image Processing

// Extract dominant color from image
const img = document.getElementById('image');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 1, 1);
const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;

// Convert to HEX
const hex = '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');

Conversion Formulas

HEX → RGB

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

// Example: hexToRgb('#FF6B6B') → {r: 255, g: 107, b: 107}

RGB → HEX

function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  }).join('');
}

// Example: rgbToHex(255, 107, 107) → '#ff6b6b'

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;
  } 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) };
}

FAQ - Frequently Asked Questions

What's the difference between RGB and RGBA?

RGBA adds a fourth Alpha value (0-1) for transparency. rgba(255, 0, 0, 0.5) is red at 50% opacity. RGB implies alpha = 1 (fully opaque).

Why is HSL considered more intuitive?

HSL separates hue (color type) from saturation (vibrancy) and lightness. To darken a color, just reduce L. In RGB, you must modify all three channels proportionally.

Does HEX format support transparency?

Yes, with 8 digits: #RRGGBBAA. Example: #FF000080 = red 50% transparent. Browser support is good but not universal; RGBA is safer.

How do I choose accessible colors?

Use WCAG contrast checking tools. Minimum ratio is 4.5:1 for normal text and 3:1 for large text. Avoid combinations like yellow on white or light gray on white.

What does "web-safe color" mean?

It was relevant in the 1990s with 256-color monitors. Today all monitors support 16 million colors (24-bit), making the concept obsolete.

Can I use color names in CSS?

Yes, CSS supports 147 names like red, blue, tomato, rebeccapurple. They're convenient but limited; HEX/RGB/HSL offer more control.

How do I create a complementary palette?

In HSL, the complementary color has H + 180°. For a triadic palette, use H, H+120°, H+240°. For analogous, use H-30°, H, H+30°.

Is CMYK supported in CSS?

No, CMYK is for print (inks), not screens. Browsers don't support CMYK. To print web colors accurately, convert RGB to CMYK with dedicated software.

Related Tools on THEJORD

• Base64 Encoder - Encode images for CSS inline
• JSON Formatter - Format color configurations
• RegEx Tester - Validate HEX color patterns
• Diff Checker - Compare CSS palettes

External Resources

• MDN - CSS color values
• WCAG - Contrast Guidelines
• Adobe Color - Palette generator

🎨 Try our Color Converter →