Color Converter

Convert colors between different CSS color formats instantly with live preview. Perfect for designers and developers working with web colors.

Supported Formats

HEX (Hexadecimal)

The most common color format in web design. Uses 6 hexadecimal digits to represent RGB values.

• Format: #RRGGBB (e.g., #3B82F6)
• Use case: CSS, HTML, design tools

RGB (Red, Green, Blue)

Defines colors using red, green, and blue values from 0-255.

• Format: rgb(r, g, b) (e.g., rgb(59, 130, 246))
• Use case: CSS, JavaScript, image processing

HSL (Hue, Saturation, Lightness)

A more intuitive color model for humans. Easier to adjust colors by tweaking saturation or lightness.

• Format: hsl(h, s%, l%) (e.g., hsl(217, 91%, 60%))
• Use case: CSS, color variations, theming

OKLCH (Oklab Lightness Chroma Hue)

A modern, perceptually uniform color space. Provides better color consistency and more predictable results.

• Format: oklch(l c h) (e.g., oklch(0.62 0.19 254))
• Use case: Modern CSS, accessible color palettes, color interpolation

Features

• Live Conversion: Type in any format and see instant conversion to all other formats
• Visual Preview: Large color swatch to see the actual color
• Copy to Clipboard: Quick copy buttons for each format
• Preset Colors: Common colors for quick selection
• Random Generator: Generate random colors for inspiration

Why Use Different Formats?

• HEX: Best for traditional CSS and sharing colors with designers
• RGB: Essential for JavaScript manipulation and canvas operations
• HSL: Perfect when you need to create color variations (lighter/darker)
• OKLCH: Ideal for modern, accessible color systems with consistent perceived brightness

OKLCH Benefits

OKLCH is a newer color space that solves many problems with traditional RGB-based colors:

• Perceptual Uniformity: Equal numeric changes result in equal perceived color differences
• Better Color Mixing: Interpolation between colors looks more natural
• Wider Color Gamut: Access to more vibrant colors on modern displays
• Accessibility: Easier to maintain consistent contrast ratios

Browser support for OKLCH is growing. Check caniuse.com for current compatibility.