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.