Color Converter

Color Converter is an online tool that converts between HEX, RGB, and HSL color formats in real-time. Select colors directly with the color picker or input values manually.

#3498DB

🎨 Color Picker

HEX

Most commonly used on the web

RGB

HSL

🎨 Preset Colors

Supports conversion between HEX, RGB, and HSL color formats. Select colors directly with the color picker or enter values manually.

Features

Three Format Support: Convert between HEX, RGB, and HSL
Real-time Bidirectional Conversion: Changes instantly reflect across all formats
Native Color Picker: Select colors using browser's built-in color picker
10 Preset Colors: Quick access to commonly used colors
One-Click Copy: Click any color value to copy to clipboard
Visual Preview: See selected color in real-time

Color Format Explanations

HEX (Hexadecimal)

Most commonly used color format in web development. Represents colors using 6 hexadecimal digits (0-9, A-F).

Format: #RRGGBB

RR: Red (00-FF)
GG: Green (00-FF)
BB: Blue (00-FF)

/* Examples */
#FF0000  /* Pure Red */
#00FF00  /* Pure Green */
#0000FF  /* Pure Blue */
#FFFFFF  /* White */
#000000  /* Black */
#808080  /* Gray */

3-digit shorthand: When each pair is the same, you can use 3 digits:

#F00 = #FF0000  /* Red */
#0F0 = #00FF00  /* Green */
#00F = #0000FF  /* Blue */

RGB (Red, Green, Blue)

Uses three values (0-255) to represent red, green, and blue components.

Format: rgb(R, G, B)

R: Red (0-255)
G: Green (0-255)
B: Blue (0-255)

/* 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 */
rgb(128, 128, 128) /* Gray */

RGBA (with alpha/opacity):

rgba(255, 0, 0, 0.5)  /* 50% transparent red */
rgba(0, 0, 0, 0.8)    /* 80% opaque black */

HSL (Hue, Saturation, Lightness)

More intuitive for humans. Describes colors in terms of hue, saturation, and lightness.

Format: hsl(H, S%, L%)

H: Hue (0-360°) - Color wheel position
S: Saturation (0-100%) - Color intensity
L: Lightness (0-100%) - Brightness

/* Examples */
hsl(0, 100%, 50%)    /* Pure Red */
hsl(120, 100%, 50%)  /* Pure Green */
hsl(240, 100%, 50%)  /* Pure Blue */
hsl(0, 0%, 100%)     /* White */
hsl(0, 0%, 0%)       /* Black */
hsl(0, 0%, 50%)      /* Gray */

Hue Wheel (0-360°):

0° = Red
60° = Yellow
120° = Green
180° = Cyan
240° = Blue
300° = Magenta
360° = Red (back to start)

HSLA (with alpha/opacity):

hsla(0, 100%, 50%, 0.5)  /* 50% transparent red */

Conversion Formulas

HEX to RGB

function hexToRgb(hex) {
  // Remove # if present
  hex = hex.replace('#', '');

  // Parse hex values
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  return { r, g, b };
}

// Example
hexToRgb('#FF5733'); // { r: 255, g: 87, b: 51 }

RGB to HEX

function rgbToHex(r, g, b) {
  const toHex = (n) => {
    const hex = n.toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };

  return '#' + toHex(r) + toHex(g) + toHex(b);
}

// Example
rgbToHex(255, 87, 51); // "#ff5733"

RGB to HSL

function rgbToHsl(r, g, b) {
  // Normalize RGB values to 0-1
  r /= 255;
  g /= 255;
  b /= 255;

  const max = Math.max(r, g, b);
  const 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)
  };
}

// Example
rgbToHsl(255, 87, 51); // { h: 11, s: 100, l: 60 }

HSL to RGB

function hslToRgb(h, s, l) {
  // Normalize values
  h /= 360;
  s /= 100;
  l /= 100;

  let r, g, b;

  if (s === 0) {
    r = g = b = l; // Achromatic
  } else {
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1/6) return p + (q - p) * 6 * t;
      if (t < 1/2) return q;
      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    };

    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;

    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }

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

// Example
hslToRgb(11, 100, 60); // { r: 255, g: 87, b: 51 }

Use Cases

1. CSS Styling

/* Using different color formats */
.button-hex {
  background-color: #FF5733;
}

.button-rgb {
  background-color: rgb(255, 87, 51);
}

.button-hsl {
  background-color: hsl(11, 100%, 60%);
}

/* Transparent colors */
.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.highlight {
  background-color: hsla(60, 100%, 50%, 0.3);
}

2. Color Manipulation

// Lighten color by adjusting HSL lightness
function lighten(hex, amount) {
  const rgb = hexToRgb(hex);
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);

  // Increase lightness
  hsl.l = Math.min(100, hsl.l + amount);

  const newRgb = hslToRgb(hsl.h, hsl.s, hsl.l);
  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
}

lighten('#FF5733', 20); // Lighter version

3. Theme Generation

// Generate theme colors from base color
function generateTheme(baseHex) {
  const rgb = hexToRgb(baseHex);
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);

  return {
    primary: baseHex,
    light: hslToHex(hsl.h, hsl.s, Math.min(100, hsl.l + 20)),
    dark: hslToHex(hsl.h, hsl.s, Math.max(0, hsl.l - 20)),
    muted: hslToHex(hsl.h, hsl.s / 2, hsl.l),
  };
}

const theme = generateTheme('#FF5733');
// {
//   primary: "#FF5733",
//   light: "#FF8D6A",
//   dark: "#C61F00",
//   muted: "#BF6D57"
// }

4. Color Validation

// Validate HEX color
function isValidHex(hex) {
  return /^#?[0-9A-Fa-f]{6}$|^#?[0-9A-Fa-f]{3}$/.test(hex);
}

// Validate RGB values
function isValidRgb(r, g, b) {
  return [r, g, b].every(val => val >= 0 && val <= 255);
}

// Validate HSL values
function isValidHsl(h, s, l) {
  return h >= 0 && h <= 360 && s >= 0 && s <= 100 && l >= 0 && l <= 100;
}

Color Theory

Complementary Colors

Colors opposite each other on the color wheel:

function getComplementary(hex) {
  const rgb = hexToRgb(hex);
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);

  // Add 180° to hue
  const compHue = (hsl.h + 180) % 360;

  const compRgb = hslToRgb(compHue, hsl.s, hsl.l);
  return rgbToHex(compRgb.r, compRgb.g, compRgb.b);
}

getComplementary('#FF0000'); // "#00FFFF" (Cyan)

Analogous Colors

Colors adjacent on the color wheel (±30°):

function getAnalogous(hex) {
  const rgb = hexToRgb(hex);
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);

  const colors = [-30, 0, 30].map(offset => {
    const newHue = (hsl.h + offset + 360) % 360;
    const newRgb = hslToRgb(newHue, hsl.s, hsl.l);
    return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
  });

  return colors;
}

getAnalogous('#FF0000');
// ["#FF0080", "#FF0000", "#FF8000"]

Triadic Colors

Three colors evenly spaced on the color wheel (120° apart):

function getTriadic(hex) {
  const rgb = hexToRgb(hex);
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);

  const colors = [0, 120, 240].map(offset => {
    const newHue = (hsl.h + offset) % 360;
    const newRgb = hslToRgb(newHue, hsl.s, hsl.l);
    return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
  });

  return colors;
}

getTriadic('#FF0000');
// ["#FF0000", "#00FF00", "#0000FF"]

Color Psychology

Different colors evoke different emotions and associations:

Color	Emotions/Associations	Common Uses
Red	Energy, passion, urgency	Sale tags, alerts, CTAs
Orange	Creativity, enthusiasm, warmth	Creative industries, food
Yellow	Optimism, happiness, attention	Warnings, highlights
Green	Growth, health, tranquility	Environmental, health, finance
Blue	Trust, stability, calm	Corporate, medical, technology
Purple	Luxury, creativity, wisdom	Premium brands, beauty
Pink	Romance, femininity, playfulness	Beauty, fashion, youth
Brown	Earthiness, reliability, comfort	Natural products, coffee
Black	Sophistication, power, elegance	Luxury, formal, minimalism
White	Purity, simplicity, cleanliness	Medical, minimalism, space

Preset Colors

Our tool includes 10 commonly used colors:

Color	HEX	RGB	HSL	Use Case
🔴 Red	#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)	Errors, alerts
🟢 Green	#00FF00	rgb(0, 255, 0)	hsl(120, 100%, 50%)	Success, go
🔵 Blue	#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)	Links, primary
🟡 Yellow	#FFFF00	rgb(255, 255, 0)	hsl(60, 100%, 50%)	Warnings
🟣 Purple	#800080	rgb(128, 0, 128)	hsl(300, 100%, 25%)	Premium
🟠 Orange	#FFA500	rgb(255, 165, 0)	hsl(39, 100%, 50%)	Call-to-action
⚫ Black	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)	Text, borders
⚪ White	#FFFFFF	rgb(255, 255, 255)	hsl(0, 0%, 100%)	Background
⚪ Gray	#808080	rgb(128, 128, 128)	hsl(0, 0%, 50%)	Secondary text
🟤 Brown	#A52A2A	rgb(165, 42, 42)	hsl(0, 59%, 41%)	Earthy tones

Accessibility Considerations

Contrast Ratio

WCAG (Web Content Accessibility Guidelines) recommends minimum contrast ratios:

Normal text: 4.5:1 (AA), 7:1 (AAA)
Large text: 3:1 (AA), 4.5:1 (AAA)

// Calculate relative luminance
function getLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    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;
}

// Calculate contrast ratio
function getContrastRatio(hex1, hex2) {
  const rgb1 = hexToRgb(hex1);
  const rgb2 = hexToRgb(hex2);

  const lum1 = getLuminance(rgb1.r, rgb1.g, rgb1.b);
  const lum2 = getLuminance(rgb2.r, rgb2.g, rgb2.b);

  const lighter = Math.max(lum1, lum2);
  const darker = Math.min(lum1, lum2);

  return (lighter + 0.05) / (darker + 0.05);
}

// Example
getContrastRatio('#FFFFFF', '#000000'); // 21 (excellent)
getContrastRatio('#777777', '#FFFFFF'); // 4.47 (passes AA for normal text)

Color Blindness

Consider color blindness when choosing colors:

Protanopia (red-blind): Avoid red/green combinations
Deuteranopia (green-blind): Avoid red/green combinations
Tritanopia (blue-blind): Avoid blue/yellow combinations

Best Practices:

Don't rely solely on color to convey information
Use patterns, icons, or text labels
Test with color blindness simulators
Use high contrast

Programming Examples

JavaScript

class ColorConverter {
  static 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)
    };
  }

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

  static rgbToHsl(r, g, b) {
    r /= 255;
    g /= 255;
    b /= 255;

    const max = Math.max(r, g, b);
    const 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)
    };
  }
}

// Usage
const rgb = ColorConverter.hexToRgb('#FF5733');
const hex = ColorConverter.rgbToHex(255, 87, 51);
const hsl = ColorConverter.rgbToHsl(255, 87, 51);

Python

def hex_to_rgb(hex_color):
    """Convert HEX to RGB"""
    hex_color = hex_color.lstrip('#')
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

def rgb_to_hex(r, g, b):
    """Convert RGB to HEX"""
    return f'#{r:02x}{g:02x}{b:02x}'

def rgb_to_hsl(r, g, b):
    """Convert RGB to HSL"""
    r, g, b = r / 255, g / 255, b / 255
    max_val = max(r, g, b)
    min_val = min(r, g, b)
    l = (max_val + min_val) / 2

    if max_val == min_val:
        h = s = 0
    else:
        d = max_val - min_val
        s = d / (2 - max_val - min_val) if l > 0.5 else d / (max_val + min_val)

        if max_val == r:
            h = ((g - b) / d + (6 if g < b else 0)) / 6
        elif max_val == g:
            h = ((b - r) / d + 2) / 6
        else:
            h = ((r - g) / d + 4) / 6

    return (round(h * 360), round(s * 100), round(l * 100))

# Usage
rgb = hex_to_rgb('#FF5733')
hex_color = rgb_to_hex(255, 87, 51)
hsl = rgb_to_hsl(255, 87, 51)

FAQ

Q1. Which color format should I use?

HEX: Most common for web development, compact
RGB: Intuitive, easy to manipulate individual channels
HSL: Best for human understanding, easy to create color variations

Choose based on your needs and preference. All three work equally well in CSS.

Q2. Can I use color names instead of codes?

A: Yes! CSS supports 140+ named colors:

.element {
  color: red;              /* Named color */
  background-color: blue;  /* Named color */
  border-color: #FF0000;   /* HEX equivalent */
}

However, named colors are less precise and have limited options compared to the millions of colors available with HEX/RGB/HSL.

Q3. What's the difference between RGB and RGBA?

RGB: Opaque color (no transparency)
RGBA: Includes alpha channel (0-1) for transparency

.opaque {
  background-color: rgb(255, 0, 0);     /* Solid red */
}

.transparent {
  background-color: rgba(255, 0, 0, 0.5); /* 50% transparent red */
}

Q4. How do I create a color palette?

A: Use color theory:

Monochromatic: Variations of one hue (change lightness/saturation)
Analogous: Adjacent colors on the wheel (±30°)
Complementary: Opposite colors (180°)
Triadic: Three evenly spaced colors (120°)
Tetradic: Four colors (two complementary pairs)

Q5. Why do my colors look different on different screens?

A: Factors affecting color display:

Screen calibration: Different monitors display colors differently
Color profiles: sRGB, Adobe RGB, Display P3
Ambient lighting: Surrounding light affects perception
Viewing angle: LCD screens change with angle

For consistency:

Use web-safe colors
Test on multiple devices
Consider color space (sRGB is most common)

Q6. What are web-safe colors?

A: Historical concept from when displays had limited color palettes. Modern displays support millions of colors, so web-safe colors are no longer necessary.

However, some developers still use them for consistency:

216 colors formed by RGB values in multiples of 51 (00, 33, 66, 99, CC, FF)

UUID Generator: Generate unique identifiers
Timestamp Converter: Convert Unix timestamps to dates
JSON Formatter: Validate and format JSON data

Color Converter

🎨 Color Picker

HEX

RGB

HSL

🎨 Preset Colors

Features​

Color Format Explanations​

HEX (Hexadecimal)​

RGB (Red, Green, Blue)​

HSL (Hue, Saturation, Lightness)​

Conversion Formulas​

HEX to RGB​

RGB to HEX​

RGB to HSL​

HSL to RGB​

Use Cases​

1. CSS Styling​

2. Color Manipulation​

3. Theme Generation​

4. Color Validation​

Color Theory​

Complementary Colors​

Analogous Colors​

Triadic Colors​

Color Psychology​

Preset Colors​

Accessibility Considerations​

Contrast Ratio​

Color Blindness​

Programming Examples​

JavaScript​

Python​

FAQ​

Q1. Which color format should I use?​

Q2. Can I use color names instead of codes?​

Q3. What's the difference between RGB and RGBA?​

Q4. How do I create a color palette?​

Q5. Why do my colors look different on different screens?​

Q6. What are web-safe colors?​

Related Tools​