Color Converter

Convert colors between multiple formats including Hex, RGB, RGBA, HSL, HSLA, CSS named colors, and modern CSS color functions.

Enter Color:

Input a color in any format (hex, rgb, hsl, name, etc.) or use the color picker

Converted Colors:

Hexadecimal

RGB

RGBA

HSL

HSLA

Named Color

Display P3

Typical Use Cases

The Color Converter is an essential tool for web developers and designers who need to work with different color formats across various platforms and technologies. When developing websites or applications, you might need to convert colors between formats to match design specifications, ensure cross-browser compatibility, or implement color animations.

For designers transitioning from design tools like Figma or Adobe XD to code, this converter helps translate colors from one format to another. It's particularly useful when working with gradient overlays, opacity adjustments, or when you need to find the closest named CSS color to match your brand guidelines. Modern web applications also benefit from using the newer CSS color functions for wide gamut displays.

Supported Color Formats

Hexadecimal (Hex): The most common web color format expressed as #RRGGBB or shorthand #RGB, where R, G, and B represent red, green, and blue color values in hexadecimal.
RGB: Defines colors using the Red-Green-Blue model with values ranging from 0-255, formatted as rgb(red, green, blue).
RGBA: Extends RGB with an alpha channel for transparency, formatted as rgba(red, green, blue, alpha) where alpha ranges from 0 (transparent) to 1 (opaque).
HSL: Represents colors using Hue-Saturation-Lightness, making it more intuitive for color adjustments. Format: hsl(hue, saturation%, lightness%).
HSLA: HSL with an alpha channel, formatted as hsla(hue, saturation%, lightness%, alpha).
Named Colors: CSS predefined color names like "dodgerblue", "tomato", or "rebeccapurple".
Display-P3: Modern CSS color function for wide gamut displays, formatted as color(display-p3 r g b) with values from 0 to 1.

Understanding Color Models

Additive Color Models

RGB is an additive color model where red, green, and blue light are combined in various ways to reproduce a broad array of colors. It's used in digital displays where the absence of light produces black, and the maximum combination produces white.

rgb(255, 0, 0): Pure red
rgb(255, 255, 0): Yellow (red + green)
rgb(255, 255, 255): White (all colors at maximum)

Perceptual Color Models

HSL is designed to be more intuitive as it aligns with how humans perceive color. It separates color into hue (the base color), saturation (intensity), and lightness (brightness).

hsl(0, 100%, 50%): Pure red
hsl(0, 100%, 25%): Darker red (same hue, lower lightness)
hsl(0, 50%, 50%): Muted red (same hue, lower saturation)

Modern CSS Color Syntax

CSS has evolved to support more modern and concise color syntax:

Modern RGB/HSL syntax:
/* Modern space-separated syntax */ rgb(255 0 0) hsl(0 100% 50%)
Alpha values:
/* With alpha channel */ rgb(255 0 0 / 0.5) hsl(0 100% 50% / 0.5)
Relative color syntax:
/* Lighten by 20% */ color-mix(in srgb, #3b82f6, white 20%)

Color Accessibility Tips

When choosing colors for web projects, consider these accessibility guidelines:

Contrast ratio:
Maintain at least 4.5:1 contrast ratio between text and background for WCAG AA compliance
Color blindness:
Don't rely solely on color to convey information; use patterns, icons, or text labels as supplements
Dark mode:
Test colors in both light and dark modes; some colors behave differently in different contexts
HSL advantage:
HSL makes it easier to create accessible color variations by adjusting lightness while maintaining the same hue

Using HSL, you can easily create accessible color variations by adjusting the lightness parameter while keeping the same hue and saturation.

Practical Code Examples

Creating a Color Palette in CSS

:root {
  /* Primary colors */
  --primary-100: hsl(210, 100%, 90%);
  --primary-500: hsl(210, 100%, 50%);
  --primary-900: hsl(210, 100%, 20%);
  
  /* Accent colors with transparency */
  --accent-light: rgba(255, 122, 89, 0.15);
  --accent: #ff7a59;
  
  /* Neutral shades */
  --neutral-100: #f5f5f5;
  --neutral-300: #d4d4d4;
  --neutral-500: #737373;
  --neutral-900: #171717;
}

Dynamic Color Manipulation with JavaScript

// Convert hex to RGB
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}

// Darken a color by percentage
function darkenColor(hex, percent) {
  const { r, g, b } = hexToRgb(hex);
  const factor = 1 - percent / 100;
  
  return `rgb(${Math.floor(r * factor)}, 
    ${Math.floor(g * factor)}, 
    ${Math.floor(b * factor)})`;
}