Converting oklch to hex

[whitespacecode]

Is there a way to convert the color we get from the default theme to hex values like you do on the website with help of js?
Or how did you guys convert those values?

I'm doing custom theming and would like an easy way to convert oklch to hex and visa versa.

[arunkumarayinabathina]

1. Install culori (if needed)

npm install culori

2. Convert OKLCH to HEX in JavaScript

import { oklch, formatHex } from 'culori';

const oklchColor = { mode: 'oklch', l: 0.7, c: 0.15, h: 240 }; // Example OKLCH color
const hexColor = formatHex(oklch(oklchColor));

console.log(hexColor); // Output: #6772d9 (or similar)

3. Convert HEX to OKLCH

import { parse, convertOklch } from 'culori';

const hexColor = "#6772d9";
const oklchColor = convertOklch(parse(hexColor));

console.log(oklchColor); // Output: { mode: 'oklch', l: 0.7, c: 0.15, h: 240 }

[whitespacecode]

@arunkumarayinabathina
Not sure if i like adding a whole library 'just' to convert a color.

[arunkumarayinabathina]

If it's just for testing or a few values, I personally prefer to use tool:

https://oklch.com/

They let you input OKLCH values and instantly see the HEX result — super quick and no setup needed.

[nem64]

I'm not a fan of LLMs, but in this case I really didn't want to learn color theory and I just wanted the function to convert, I also didn't want to import an entire library just to use 1 function. After many prompts and screaming at the AI, here's the final result that actually works:

/**
 * Convert OKLCH string to Hex
 * @param {string} oklchString - OKLCH color string (e.g., "oklch(70% 0.15 30)" or "oklch(0.7 0.15 30deg)")
 * @returns {string} Hex color string (e.g., "#ff5733")
 */
function oklchToHex(oklchString) {
  // Parse OKLCH string
  const match = oklchString.match(/oklch\s*\(\s*([0-9.]+)%?\s+([0-9.]+)\s+([0-9.]+)(?:deg)?\s*\)/i);
  
  if (!match) {
    throw new Error('Invalid OKLCH string format');
  }
  
  let l = parseFloat(match[1]);
  let c = parseFloat(match[2]);
  let h = parseFloat(match[3]);
  
  // Convert percentage lightness to 0-1 range
  if (oklchString.includes('%')) {
    l = l / 100;
  }
  // Convert OKLCH to OKLAB
  const hRad = (h * Math.PI) / 180;
  const a = c * Math.cos(hRad);
  const b = c * Math.sin(hRad);
  
  // Convert OKLAB to linear RGB
  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 l3 = l_ * l_ * l_;
  const m3 = m_ * m_ * m_;
  const s3 = s_ * s_ * s_;
  
  let r = +4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3;
  let g = -1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3;
  let b_rgb = -0.0041960863 * l3 - 0.7034186147 * m3 + 1.7076147010 * s3;
  
  // Convert linear RGB to sRGB
  r = linearToSrgb(r);
  g = linearToSrgb(g);
  b_rgb = linearToSrgb(b_rgb);
  
  // Clamp and convert to 8-bit
  r = Math.max(0, Math.min(255, Math.round(r * 255)));
  g = Math.max(0, Math.min(255, Math.round(g * 255)));
  b_rgb = Math.max(0, Math.min(255, Math.round(b_rgb * 255)));
  
  // Convert to hex
  return '#' + [r, g, b_rgb].map(x => x.toString(16).padStart(2, '0')).join('');
}

function linearToSrgb(val) {
  if (val <= 0.0031308) {
    return 12.92 * val;
  }
  return 1.055 * Math.pow(val, 1 / 2.4) - 0.055;
}

// Example usage:
console.log(oklchToHex('oklch(70% 0.15 30)'));      // Warm orange
console.log(oklchToHex('oklch(0.5 0.2 200deg)'));   // Blue
console.log(oklchToHex('oklch(90% 0.05 120)'));     // Light green
console.log(oklchToHex('oklch(0.3 0.1 300deg)'));   // Dark purple

I'm not sure how optimized it is I'm only using it once in my project. Hopefully this helps someone