Guia Completa del Convertidor de Colores: HEX, RGB, HSL, HSV, CMYK y Accesibilidad

TL;DR

Color converters let you instantly translate color values between HEX, RGB, HSL, HSV, and CMYK. HEX is compact RGB notation for CSS. HSL separates hue from brightness, making it the best model for design systems. CMYK is subtractive and used exclusively for print. WCAG 2.1 requires 4.5:1 contrast ratio for normal text. Modern CSS supports oklch(), color-mix(), and Display P3 for wide-gamut colors.

Key Takeaways

HEX, RGB, and HSL all describe the same sRGB color space and convert between each other losslessly.
HSL is the most intuitive model: adjust Lightness for shades, Saturation for vibrancy, Hue to shift the color.
CMYK is subtractive (ink on paper) and converting from RGB to CMYK is lossy due to gamut differences.
WCAG 2.1 Level AA requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text.
CSS Color Level 4 introduces oklch(), lab(), and color(display-p3) for perceptually uniform wide-gamut colors.
JavaScript and Python both have straightforward color conversion formulas with no dependencies required.

Try our free online Color Converter — instantly convert HEX, RGB, HSL, HSV, and CMYK.

Use the Tool

Why Color Conversion Matters for Developers and Designers

Every modern workflow touches multiple color formats. A designer exports a HEX code from Figma. The CSS developer needs HSL to build a dynamic theming system. The print shop demands CMYK values. The accessibility auditor checks RGB luminance against WCAG contrast ratios. Understanding how these formats relate — and how to convert between them accurately — is foundational knowledge.

This guide covers every major color model in depth, explains the mathematical formulas behind each conversion, provides working code in JavaScript and Python, and explores modern CSS color functions including oklch(). Whether you are building a design system, auditing a UI for accessibility, or just need a quick color lookup, this is your complete reference.

Color Models: HEX, RGB, HSL, HSV, and CMYK

HEX Color Codes

HEX color codes are the most common format in CSS and web design. A hex code is a 6-character string prefixed with #, where each pair of characters represents a color channel (red, green, blue) as a base-16 number from 00 to FF.

For example, #3B82F6 decodes to: R = 0x3B = 59, G = 0x82 = 130, B = 0xF6 = 246. CSS also supports 3-character shorthand where #F00 expands to #FF0000, and 8-character hex including an alpha channel: #3B82F680 means 50% opacity.

Use HEX when: writing CSS stylesheets, working with design tools like Figma or Sketch, or communicating colors in design specs. HEX is concise and universally understood.

RGB (Red, Green, Blue)

RGB is the native color model for screens. It defines colors using three decimal values from 0 to 255 for the red, green, and blue light channels. It is an additive model: combining R=255, G=255, B=255 produces white (all light channels at maximum), while R=0, G=0, B=0 is black (no light emitted).

In CSS you can write rgb(59, 130, 246) or use the modern space-separated syntax rgb(59 130 246). For transparency, use rgba(59, 130, 246, 0.5) or the modern rgb(59 130 246 / 0.5). RGB is the fundamental format for Canvas API operations, WebGL, and image processing.

Use RGB when: doing programmatic color manipulation, working with the Canvas API or WebGL, or when you need precise channel-level control.

HSL (Hue, Saturation, Lightness)

HSL represents color using three human-intuitive dimensions instead of raw light intensities. Hue is a degree on the color wheel from 0 to 360 (0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, 300 = magenta, 360 = red again). Saturation ranges from 0% (completely gray) to 100% (fully vivid). Lightness ranges from 0% (black) through 50% (the pure color) to 100% (white).

HSL makes color operations that are difficult in RGB feel natural. To create a lighter shade: increase Lightness. To mute a color: decrease Saturation. To shift from blue to purple: increase Hue. This is why design systems and theming libraries default to HSL. In CSS: hsl(217, 91%, 60%).

Use HSL when: building design systems with shade scales, creating dark mode themes, or generating harmonious color palettes programmatically.

HSV / HSB (Hue, Saturation, Value)

HSV (also called HSB — Hue, Saturation, Brightness) shares the same Hue wheel as HSL but uses Value (Brightness) instead of Lightness. In HSV: Value=100% means the color is at its brightest, while Value=0% is always black. Saturation=0% gives you the pure hue at maximum brightness (white in HSL, the pure hue in HSV).

The key difference: in HSL, Lightness=50% gives the pure color regardless of saturation. In HSV, Value=100% at Saturation=100% gives the pure color. HSV maps directly to the square color picker found in Photoshop, Figma, and most native OS color dialogs. CSS does not support HSV natively, but understanding it prevents confusion when translating values from design tools.

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

CMYK is a subtractive color model used in printing. Unlike RGB which adds light, CMYK subtracts it using inks layered on white paper. Cyan absorbs red light, Magenta absorbs green, Yellow absorbs blue, and Key (Black) adds depth and sharpness. Each channel ranges from 0% (no ink) to 100% (full ink coverage).

The critical limitation: the CMYK color gamut is significantly smaller than sRGB. Many vivid screen colors — especially bright greens and blues — cannot be reproduced in CMYK ink. Converting from RGB to CMYK is therefore lossy. Professional print workflows use ICC color profiles to manage this gamut mismatch accurately.

Use CMYK when: preparing files for offset printing, generating PDFs for print, or working with print design tools like InDesign or Illustrator.

When and Why You Need to Convert Colors

Different tools, environments, and workflows each have a preferred color format. Here is a practical mapping:

Use Case	Preferred Format	Tool / Environment
CSS stylesheets use HEX or HSL by convention	HEX / HSL	CSS, HTML
Figma and Sketch export HEX; their color pickers show HSV	HEX (export), HSV (picker)	Figma, Sketch
JavaScript Canvas API uses RGB (integer or float)	RGB (0-255)	Canvas API, WebGL
WCAG contrast calculations require RGB luminance values	RGB (normalized 0-1)	WCAG tools
Offset printing and PDFs require CMYK values	CMYK	InDesign, PDF
Design tokens often store colors as HSL for easy manipulation	HSL	Design tokens
Three.js and WebGL shaders use float RGB (0.0 - 1.0)	RGB (0.0 - 1.0)	Three.js, GLSL
CSS animations interpolate better in oklch() than rgb()	oklch()	CSS animations

Color Conversion Formulas

HEX to RGB

Converting HEX to RGB is straightforward: parse each 2-character hex pair as a base-16 integer.

// HEX to RGB
function hexToRgb(hex) {
  // Remove # prefix and expand shorthand (#FFF -> #FFFFFF)
  hex = hex.replace(/^#/, '');
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }
  const num = parseInt(hex, 16);
  return {
    r: (num >> 16) & 255,
    g: (num >> 8) & 255,
    b: num & 255,
  };
}

console.log(hexToRgb('#3B82F6'));
// { r: 59, g: 130, b: 246 }

RGB to HEX

Converting RGB to HEX: convert each decimal channel to a 2-digit hex string, zero-padded if needed.

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

console.log(rgbToHex(59, 130, 246));
// '#3b82f6'

RGB to HSL

Converting RGB to HSL requires normalizing to 0-1 range, finding the min/max channels, then computing each HSL component:

// RGB to HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;
  let h = 0, s = 0;
  const l = (max + min) / 2;

  if (delta !== 0) {
    s = delta / (1 - Math.abs(2 * l - 1));
    if (max === r) h = ((g - b) / delta + 6) % 6;
    else if (max === g) h = (b - r) / delta + 2;
    else h = (r - g) / delta + 4;
    h = Math.round(h * 60);
  }

  return {
    h: h < 0 ? h + 360 : h,
    s: Math.round(s * 100),
    l: Math.round(l * 100),
  };
}

console.log(rgbToHsl(59, 130, 246));
// { h: 217, s: 91, l: 60 }

HSL to RGB

The HSL to RGB conversion uses a helper function to map hue sectors to channel intensities:

// HSL to RGB
function hslToRgb(h, s, l) {
  s /= 100; l /= 100;
  const c = (1 - Math.abs(2 * l - 1)) * s;
  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
  const m = l - c / 2;
  let r = 0, g = 0, b = 0;

  if (h < 60)        { r = c; g = x; b = 0; }
  else if (h < 120)  { r = x; g = c; b = 0; }
  else if (h < 180)  { r = 0; g = c; b = x; }
  else if (h < 240)  { r = 0; g = x; b = c; }
  else if (h < 300)  { r = x; g = 0; b = c; }
  else               { r = c; g = 0; b = x; }

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

console.log(hslToRgb(217, 91, 60));
// { r: 59, g: 130, b: 246 }

RGB to CMYK

Converting RGB to CMYK: normalize to 0-1, compute the Key (black) channel, then derive Cyan, Magenta, Yellow:

// RGB to CMYK
function rgbToCmyk(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const k = 1 - Math.max(r, g, b);
  if (k === 1) return { c: 0, m: 0, y: 0, k: 100 };
  return {
    c: Math.round(((1 - r - k) / (1 - k)) * 100),
    m: Math.round(((1 - g - k) / (1 - k)) * 100),
    y: Math.round(((1 - b - k) / (1 - k)) * 100),
    k: Math.round(k * 100),
  };
}

console.log(rgbToCmyk(59, 130, 246));
// { c: 76, m: 47, y: 0, k: 4 }

HSL Color Theory: Intuitive Color Selection

HSL is the most useful color model for developers because it separates the type of color (Hue) from how vivid it is (Saturation) and how light it is (Lightness). This separation enables powerful color operations.

Creating a shade scale: Start with your brand color at HSL(H, S, 50%). Create lighter shades by increasing Lightness (60%, 70%, 80%, 90%) and darker shades by decreasing it (40%, 30%, 20%, 10%). This gives you a consistent 10-shade scale from the same Hue.

Dark mode color shifting: In light mode, a surface might be hsl(220, 14%, 96%). In dark mode, invert the lightness to hsl(220, 14%, 14%). This preserves the color character while dramatically changing the apparent brightness.

Muted vs. vivid variants: Same Hue, different Saturation. A brand blue of hsl(217, 91%, 60%) produces a muted variant at hsl(217, 30%, 60%) and a vivid accent at hsl(217, 100%, 55%).

Complementary colors: Add 180 degrees to the Hue for the complementary color. If your brand is hsl(217, 91%, 60%) (blue), the complement is hsl(37, 91%, 60%) (orange). Analogous colors are 30-60 degrees apart on the wheel.

CMYK for Print: How It Differs from Screen Colors

The fundamental difference between screen and print color is the light model. Screens emit light (additive), paper reflects it (subtractive). On a screen, mixing all colors at maximum gives white. With ink, mixing all colors gives a muddy dark brown — which is why CMYK adds a separate Key (Black) channel for true blacks.

The gamut problem: Standard sRGB can represent many colors that CMYK inks physically cannot reproduce. Vivid neon greens (rgb(0, 255, 0)), bright cyans, and electric blues all fall outside the CMYK gamut. When you convert these out-of-gamut colors to CMYK, they are clipped to the nearest reproducible color.

ICC profiles: Professional print workflows use ICC color profiles (such as FOGRA39 for European offset printing or SWOP for US publications) to accurately model the specific gamut of a printing process. A formula-based RGB-to-CMYK conversion ignores profiles and produces only an approximation.

Practical advice: If you are preparing files for professional printing, always work with your print provider's recommended ICC profile in software that supports it (Photoshop, Illustrator, InDesign). For web-to-print workflows, use a library like colorimetry or color in Node.js that supports profile-based conversion.

Color Accessibility: Contrast Ratio and WCAG

Color accessibility ensures that text and UI elements are visible to all users, including the approximately 8% of men and 0.5% of women with some form of color vision deficiency. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between foreground text and background colors.

WCAG 2.1 Contrast Requirements:

Level AA (minimum standard): 4.5:1 for normal text (under 18pt or 24px bold), 3:1 for large text (18pt bold or 24px regular), 3:1 for UI components and graphical objects.
Level AAA (enhanced standard): 7:1 for normal text, 4.5:1 for large text.

The contrast ratio formula: ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker. Relative luminance linearizes sRGB values: values below 0.04045 divide by 12.92; others use ((c + 0.055) / 1.055) ^ 2.4. Then: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.

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

function contrastRatio(r1, g1, b1, r2, g2, b2) {
  const l1 = getLuminance(r1, g1, b1);
  const l2 = getLuminance(r2, g2, b2);
  const lighter = Math.max(l1, l2);
  const darker  = Math.min(l1, l2);
  return ((lighter + 0.05) / (darker + 0.05)).toFixed(2);
}

// White text (#FFFFFF) on Tailwind blue-500 (#3B82F6)
console.log(contrastRatio(255, 255, 255, 59, 130, 246));
// '3.14' (fails AA for normal text — use blue-700 instead)

console.log(contrastRatio(255, 255, 255, 29, 78, 216));
// '5.95' (passes AA for normal text)

Practical tips for accessible color design:

Never use color as the only means of conveying information. Pair color with icons, labels, or patterns.
Test with color blindness simulators (deuteranopia, protanopia, tritanopia) before shipping.
Use HSL for building accessible palettes: keep Saturation consistent and adjust Lightness for contrast.
Test your palette in forced colors mode (Windows High Contrast) to ensure usability.
The prefers-contrast: more media query lets you serve high-contrast variants to users who request them.

CSS Color Functions: rgb(), hsl(), oklch()

Modern CSS supports far more than basic <code>#hex</code> values. Here is a complete reference of color formats supported in contemporary CSS:

Classic formats: rgb(255, 87, 51), rgba(255, 87, 51, 0.5), hsl(14, 100%, 60%), hsla(14, 100%, 60%, 0.5), #FF5733.
Modern space-separated syntax (CSS Color Level 4): rgb(255 87 51), rgb(255 87 51 / 0.5), hsl(14 100% 60%), hsl(14 100% 60% / 0.5).
oklch(): A perceptually uniform color space. oklch(0.7 0.15 250) takes Lightness (0-1), Chroma (0-0.4), and Hue (0-360). OKLCH ensures that two colors with the same Lightness value truly appear equally bright to the human eye — unlike HSL where yellow at hsl(60, 100%, 50%) appears much brighter than blue at hsl(240, 100%, 50%).
lab() and lch(): CIE Lab separates lightness from color information. lab(60 -20 50). LCH is its cylindrical form: lch(60 40 120).
color(display-p3): Accesses the Display P3 wide-gamut color space, used by modern Apple displays and HDR screens: color(display-p3 1 0.5 0). P3 can represent colors beyond sRGB gamut.
color-mix(): Blends two colors in any color space: color-mix(in oklch, #3b82f6 60%, #ef4444).

Always provide sRGB fallbacks for modern color spaces:

/* Always provide sRGB fallback for oklch() */
.button-primary {
  /* Fallback for older browsers */
  background-color: #3b82f6;
  /* Modern: perceptually uniform, wide-gamut capable */
  background-color: oklch(0.6 0.2 250);
}

/* color-mix() blending */
.card-hover {
  background-color: color-mix(in oklch, #3b82f6 80%, #ef4444 20%);
}

/* HSL shade scale example */
:root {
  --blue-50:  hsl(214, 100%, 97%);
  --blue-100: hsl(214, 95%, 93%);
  --blue-200: hsl(213, 97%, 87%);
  --blue-300: hsl(212, 96%, 78%);
  --blue-400: hsl(213, 94%, 68%);
  --blue-500: hsl(217, 91%, 60%);
  --blue-600: hsl(221, 83%, 53%);
  --blue-700: hsl(224, 76%, 48%);
  --blue-800: hsl(226, 71%, 40%);
  --blue-900: hsl(224, 64%, 33%);
  --blue-950: hsl(226, 55%, 21%);
}

/* WCAG-safe dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary:   hsl(220, 14%, 12%);
    --bg-surface:   hsl(220, 14%, 18%);
    --text-primary: hsl(220, 14%, 94%);
    --text-muted:   hsl(220, 14%, 65%);
    --border:       hsl(220, 14%, 28%);
  }
}

Color Palettes: Generating Harmonious Colors

A well-designed color palette starts from a single brand color and systematically derives all the shades, tints, and semantic colors needed. Here are the main approaches:

Shade scale (the Tailwind approach): For each hue, create 11 shades from 50 (lightest) to 950 (darkest). In HSL, hold Hue constant, reduce Saturation slightly for extreme shades, and vary Lightness from ~97% (shade 50) to ~10% (shade 950). OKLCH produces more perceptually even shade scales.
Complementary palette: The complement of any hue is found by adding 180 degrees. Red (0) complements Cyan (180). Blue (240) complements Orange (60). Use the primary color for main actions and the complement for accents or warnings.
Split-complementary: Instead of the exact complement, use two colors 150 and 210 degrees from the base. This creates a vibrant but less harsh contrast than a direct complement.
Triadic palette: Three colors equally spaced at 0, 120, and 240 degrees on the wheel. Triadic palettes are rich and balanced but require care to prevent visual chaos — use one as dominant and the others as accents.
Analogous palette: Colors within 30-60 degrees of the base hue. Analogous palettes feel harmonious and natural — perfect for backgrounds, surfaces, and UI where you want a cohesive feel without high contrast between color areas.

JavaScript Code Examples for Color Conversion

These are complete, production-ready JavaScript functions. No external dependencies required.

Complete toolkit (all conversions + WCAG contrast):

// Color Conversion Toolkit (no dependencies)
// HEX to RGB
function hexToRgb(hex) {
  // Remove # prefix and expand shorthand (#FFF -> #FFFFFF)
  hex = hex.replace(/^#/, '');
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }
  const num = parseInt(hex, 16);
  return {
    r: (num >> 16) & 255,
    g: (num >> 8) & 255,
    b: num & 255,
  };
}

console.log(hexToRgb('#3B82F6'));
// { r: 59, g: 130, b: 246 }

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

console.log(rgbToHex(59, 130, 246));
// '#3b82f6'

// RGB to HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;
  let h = 0, s = 0;
  const l = (max + min) / 2;

  if (delta !== 0) {
    s = delta / (1 - Math.abs(2 * l - 1));
    if (max === r) h = ((g - b) / delta + 6) % 6;
    else if (max === g) h = (b - r) / delta + 2;
    else h = (r - g) / delta + 4;
    h = Math.round(h * 60);
  }

  return {
    h: h < 0 ? h + 360 : h,
    s: Math.round(s * 100),
    l: Math.round(l * 100),
  };
}

console.log(rgbToHsl(59, 130, 246));
// { h: 217, s: 91, l: 60 }

// HSL to RGB
function hslToRgb(h, s, l) {
  s /= 100; l /= 100;
  const c = (1 - Math.abs(2 * l - 1)) * s;
  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
  const m = l - c / 2;
  let r = 0, g = 0, b = 0;

  if (h < 60)        { r = c; g = x; b = 0; }
  else if (h < 120)  { r = x; g = c; b = 0; }
  else if (h < 180)  { r = 0; g = c; b = x; }
  else if (h < 240)  { r = 0; g = x; b = c; }
  else if (h < 300)  { r = x; g = 0; b = c; }
  else               { r = c; g = 0; b = x; }

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

console.log(hslToRgb(217, 91, 60));
// { r: 59, g: 130, b: 246 }

// RGB to CMYK
function rgbToCmyk(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const k = 1 - Math.max(r, g, b);
  if (k === 1) return { c: 0, m: 0, y: 0, k: 100 };
  return {
    c: Math.round(((1 - r - k) / (1 - k)) * 100),
    m: Math.round(((1 - g - k) / (1 - k)) * 100),
    y: Math.round(((1 - b - k) / (1 - k)) * 100),
    k: Math.round(k * 100),
  };
}

console.log(rgbToCmyk(59, 130, 246));
// { c: 76, m: 47, y: 0, k: 4 }

// 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 delta = max - min;
  let h = 0;
  const s = max === 0 ? 0 : delta / max;
  const v = max;

  if (delta !== 0) {
    if (max === r) h = ((g - b) / delta + 6) % 6;
    else if (max === g) h = (b - r) / delta + 2;
    else h = (r - g) / delta + 4;
    h = Math.round(h * 60);
  }

  return { h: h < 0 ? h + 360 : h, s: Math.round(s * 100), v: Math.round(v * 100) };
}

Python Code Examples

Python's standard library includes the colorsys module for HSL and HSV conversions. Here are complete implementations including CMYK:

import colorsys

# RGB to HSL
def rgb_to_hsl(r, g, b):
    r, g, b = r / 255.0, g / 255.0, b / 255.0
    # colorsys uses HLS order, not HSL
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return {
        'h': round(h * 360),
        's': round(s * 100),
        'l': round(l * 100),
    }

# HSL to RGB
def hsl_to_rgb(h, s, l):
    h, s, l = h / 360.0, s / 100.0, l / 100.0
    r, g, b = colorsys.hls_to_rgb(h, l, s)
    return {
        'r': round(r * 255),
        'g': round(g * 255),
        'b': round(b * 255),
    }

# RGB to HEX
def rgb_to_hex(r, g, b):
    return '#{:02x}{:02x}{:02x}'.format(r, g, b)

# HEX to RGB
def hex_to_rgb(hex_str):
    hex_str = hex_str.lstrip('#')
    if len(hex_str) == 3:
        hex_str = ''.join(c*2 for c in hex_str)
    return {
        'r': int(hex_str[0:2], 16),
        'g': int(hex_str[2:4], 16),
        'b': int(hex_str[4:6], 16),
    }

# RGB to CMYK
def rgb_to_cmyk(r, g, b):
    r, g, b = r / 255.0, g / 255.0, b / 255.0
    k = 1 - max(r, g, b)
    if k == 1:
        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
    c = (1 - r - k) / (1 - k)
    m = (1 - g - k) / (1 - k)
    y = (1 - b - k) / (1 - k)
    return {
        'c': round(c * 100),
        'm': round(m * 100),
        'y': round(y * 100),
        'k': round(k * 100),
    }

# Examples
print(rgb_to_hsl(59, 130, 246))   # {'h': 217, 's': 91, 'l': 60}
print(rgb_to_hex(59, 130, 246))   # '#3b82f6'
print(hex_to_rgb('#3B82F6'))      # {'r': 59, 'g': 130, 'b': 246}
print(rgb_to_cmyk(59, 130, 246))  # {'c': 76, 'm': 47, 'y': 0, 'k': 4}

Named CSS Colors and Their Values

CSS defines 148 named colors. Here are the most commonly used ones grouped by color family, with their HEX and RGB values:

Name	HEX	RGB
red	#FF0000	rgb(255, 0, 0)
crimson	#DC143C	rgb(220, 20, 60)
orange	#FFA500	rgb(255, 165, 0)
gold	#FFD700	rgb(255, 215, 0)
yellow	#FFFF00	rgb(255, 255, 0)
lime	#00FF00	rgb(0, 255, 0)
green	#008000	rgb(0, 128, 0)
teal	#008080	rgb(0, 128, 128)
cyan	#00FFFF	rgb(0, 255, 255)
dodgerblue	#1E90FF	rgb(30, 144, 255)
blue	#0000FF	rgb(0, 0, 255)
navy	#000080	rgb(0, 0, 128)
purple	#800080	rgb(128, 0, 128)
violet	#EE82EE	rgb(238, 130, 238)
magenta	#FF00FF	rgb(255, 0, 255)
pink	#FFC0CB	rgb(255, 192, 203)
white	#FFFFFF	rgb(255, 255, 255)
silver	#C0C0C0	rgb(192, 192, 192)
gray	#808080	rgb(128, 128, 128)
black	#000000	rgb(0, 0, 0)
brown	#A52A2A	rgb(165, 42, 42)
chocolate	#D2691E	rgb(210, 105, 30)
coral	#FF7F50	rgb(255, 127, 80)
salmon	#FA8072	rgb(250, 128, 114)
tomato	#FF6347	rgb(255, 99, 71)
slategray	#708090	rgb(112, 128, 144)
darkgreen	#006400	rgb(0, 100, 0)
forestgreen	#228B22	rgb(34, 139, 34)
olive	#808000	rgb(128, 128, 0)
indigo	#4B0082	rgb(75, 0, 130)

Frequently Asked Questions

Q: What is the best color format for CSS?

For most projects, HEX is the most common choice due to its compact syntax and universal support in design tools. Use HSL when you need to programmatically create shade scales or adjust colors dynamically. Use oklch() for new design systems where perceptual uniformity and wide-gamut colors matter. Always provide an sRGB fallback for oklch() until browser support is universal.

Q: How do I convert HEX to RGB?

Remove the # prefix, split the 6 characters into three 2-character pairs (RR, GG, BB), and convert each pair from hexadecimal to decimal. For example, #3B82F6: R = parseInt("3B", 16) = 59, G = parseInt("82", 16) = 130, B = parseInt("F6", 16) = 246. In JavaScript: const r = parseInt(hex.slice(1, 3), 16). Our free tool performs this conversion instantly.

Q: What is the difference between HSL and HSV?

Both models use the same Hue wheel (0-360 degrees). The difference is in how they handle brightness. HSL uses Lightness where 0% = black, 50% = pure color, and 100% = white. HSV uses Value where 0% = black and 100% = the brightest possible expression of the color. HSL is used in CSS. HSV is used in design tool color pickers (Photoshop, Figma) because its square picker is more intuitive for color selection.

Q: Why do my screen colors look different when printed?

Screens emit light (additive RGB model) while printers absorb it using inks (subtractive CMYK model). The CMYK gamut is smaller than sRGB, meaning many vivid screen colors — particularly bright greens, cyans, and blues — cannot be physically reproduced with standard printing inks. Additionally, paper white and ink behavior vary by stock. Professional printing uses ICC profiles and soft-proofing to predict the final printed result.

Q: What WCAG contrast ratio do I need for accessibility?

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or 24px bold) and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Non-text UI elements (buttons, form controls, icons) need at least 3:1. The contrast ratio is calculated from the relative luminance of the two colors using the formula (L1 + 0.05) / (L2 + 0.05).

Q: What is OKLCH and why should I use it?

OKLCH is a perceptually uniform color space introduced in CSS Color Level 4. Unlike HSL where the same Lightness value looks very different across hues (yellow at L=50% appears much brighter than blue at L=50%), OKLCH ensures that colors with the same Lightness value truly appear equally bright. This makes OKLCH ideal for generating harmonious shade scales, accessible palettes, and smooth color interpolation in animations. Browser support: Chrome 111+, Safari 15.4+, Firefox 113+.

Q: How do I create a dark mode color palette?

The recommended approach is to use HSL or OKLCH and systematically adjust the Lightness dimension. For light mode, use high lightness values for backgrounds (95-98%) and low values for text (5-15%). For dark mode, invert this: dark backgrounds at 10-20% lightness and light text at 85-95%. Define all colors as CSS custom properties so dark mode is just a different set of variable values. Avoid simply inverting colors — design dark mode as a deliberate, separate palette.

Q: How does the RGB to HSL formula work?

To convert RGB to HSL: (1) Normalize R, G, B to 0-1 range by dividing by 255. (2) Find Cmax (the largest channel) and Cmin (the smallest). (3) Lightness = (Cmax + Cmin) / 2. (4) If Cmax equals Cmin, Saturation = 0 (achromatic). Otherwise, Saturation = delta / (1 - |2L - 1|) where delta = Cmax - Cmin. (5) Hue: if Cmax is R, H = 60 * ((G-B)/delta mod 6). If Cmax is G, H = 60 * ((B-R)/delta + 2). If Cmax is B, H = 60 * ((R-G)/delta + 4).

Color conversion is a foundational skill connecting design tools, CSS authoring, print production, and accessibility compliance. Whether you need a quick HEX to RGB lookup, want to build a programmatic shade scale in HSL, or are preparing for CMYK print output, mastering these conversions makes your work more precise and professional. Use our free online Color Converter tool for instant results and keep this guide as your reference.

Convert colors instantly between HEX, RGB, HSL, HSV, and CMYK with our free tool.

Open Color Converter Tool