RGB ↔ OKLCH Color Converter

Convert between RGB and OKLCH color formats with real-time preview

RGB Color

rgb(255, 0, 0)

OKLCH Color

oklch(0.628 0.258 29)
0.628
Range: 0.000 - 1.000
0.258
Range: 0.000 - 0.400
29°
Range: 0° - 360°

Conversion Details & CSS Code

RGB Input
rgb(255, 0, 0)
HEX: #ff0000
OKLCH Output
oklch(0.628 0.258 29)
L: 0.628 | C: 0.258 | H: 29°

Why Use OKLCH?

Perceptual Uniformity: Equal changes in lightness produce equal visual differences
Better Color Manipulation: Independent control of lightness, chroma, and hue
Future-Ready: Part of CSS Color Level 4 specification
Wide Gamut: Supports P3 and other modern color spaces

CSS Implementation

.modern-design {
  /* Traditional RGB (fallback) */
  background-color: rgb(255, 0, 0);
  
  /* Modern OKLCH (preferred) */
  background-color: oklch(0.628 0.258 29);
  
  /* Easy lightness variations */
  border-color: oklch(0.728 0.258 29);
}

JavaScript Implementation

// Convert current RGB to OKLCH
const rgbColor = { r: 255, g: 0, b: 0 };
const oklchColor = rgbToOklch(rgbColor);

console.log('RGB:', rgbColor);
console.log('OKLCH:', oklchColor);

// Create color variations
const lighter = { ...oklchColor, l: oklchColor.l + 0.1 };
const darker = { ...oklchColor, l: oklchColor.l - 0.1 };