OKLCH to RGB Converter - JavaScript Calculator & Formula Tool Online

/**
 * Convert OKLCH color to RGB format using mathematical formula
 * @param {Object} oklch - OKLCH color object
 * @param {number} oklch.l - Lightness (0-1)
 * @param {number} oklch.c - Chroma (0-0.4)
 * @param {number} oklch.h - Hue (0-360)
 * @returns {Object} RGB color object
 */
function oklchToRgb(oklch) {
  const { l, c, h } = oklch;
  
  // Convert OKLCH to Oklab using mathematical formula
  const hRad = h * Math.PI / 180;
  const a = c * Math.cos(hRad);
  const b = c * Math.sin(hRad);
  
  // Transform to RGB using color space algorithm
  return oklabToRgb({ l, a, b });
}

// Example usage for OKLCH to RGB conversion
const oklchColor = { l: 0.628, c: 0.258, h: 29.23 };
const rgbColor = oklchToRgb(oklchColor);
console.log(rgbColor); // { r: 255, g: 0, b: 0 }

// Real-time OKLCH to RGB calculator with validation
class OklchToRgbConverter {
  static convert(l, c, h) {
    // Input validation for OKLCH values
    if (l < 0 || l > 1) throw new Error('Lightness must be 0-1');
    if (c < 0 || c > 0.4) throw new Error('Chroma must be 0-0.4');
    if (h < 0 || h > 360) throw new Error('Hue must be 0-360');
    
    const oklch = { l, c, h };
    return this.oklchToRgb(oklch);
  }
  
  static oklchToRgb(oklch) {
    // Professional conversion algorithm implementation
    return oklchToRgb(oklch);
  }
}

// Usage in web applications and calculators
const converter = OklchToRgbConverter;
const rgbResult = converter.convert(0.7, 0.15, 180);

// Complete production-ready OKLCH to RGB converter
class OKLCHToRGBConverter {
  // Transformation matrices and constants
  static M1 = [
    [0.8189330101, 0.3618667424, -0.1288597137],
    [0.0329845436, 0.9293118715, 0.0361456387],
    [0.0482003018, 0.2643662691, 0.6338517070]
  ];
  
  static M2 = [
    [4.0767416621, -3.3077115913, 0.2309699292],
    [-1.2684380046, 2.6097574011, -0.3413193965],
    [-0.0041960863, -0.7034186147, 1.7076147010]
  ];
  
  static convert(l, c, h) {
    // Input validation with detailed error messages
    if (typeof l !== 'number' || l < 0 || l > 1) {
      throw new Error(`Invalid lightness: ${l}. Must be 0-1`);
    }
    if (typeof c !== 'number' || c < 0) {
      throw new Error(`Invalid chroma: ${c}. Must be >= 0`);
    }
    if (typeof h !== 'number' || h < 0 || h > 360) {
      throw new Error(`Invalid hue: ${h}. Must be 0-360 degrees`);
    }
    
    return this.oklchToRgb({ l, c, h });
  }
  
  static oklchToRgb({ l, c, h }) {
    // Step 1: OKLCH to OKLAB
    const hRad = (h * Math.PI) / 180;
    const a = c * Math.cos(hRad);
    const b = c * Math.sin(hRad);
    
    // Step 2: OKLAB to linear RGB
    const rgb = this.oklabToLinearRGB(l, a, b);
    
    // Step 3: Gamma correction and clamping
    return {
      r: Math.round(this.clamp(this.linearToSRGB(rgb[0])) * 255),
      g: Math.round(this.clamp(this.linearToSRGB(rgb[1])) * 255),
      b: Math.round(this.clamp(this.linearToSRGB(rgb[2])) * 255)
    };
  }
  
  static oklabToLinearRGB(L, a, b) {
    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
    const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
    
    const l = l_ * l_ * l_;
    const m = m_ * m_ * m_;
    const s = s_ * s_ * s_;
    
    return [
      +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
      -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
      -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s
    ];
  }
  
  static linearToSRGB(linear) {
    return linear <= 0.0031308 
      ? 12.92 * linear 
      : 1.055 * Math.pow(linear, 1/2.4) - 0.055;
  }
  
  static clamp(value) {
    return Math.max(0, Math.min(1, value));
  }
}