How to convert oklch to hex

[bfg-coding]

Hello, I stumbled across this library while working on a project of mine. I'm working to extract daisyui colors, which are in oklch format and use them in my canvas system. I'm struggling getting the conversion to work and would love ideas on how to do this better. This library looks like it should be the right answer to this kind of situation

function oklchToHex(oklchStr: string): string {
	const [l, c, h] = oklchStr
		.split(",")
		.map((val) => val.replace("%", ""))
		.map(Number);
	const color = oklch({ mode: "oklch", l: l / 100, c, h });

	return formatHex(color);
}

[danburzo]

If the input is a valid CSS color string in any format, including Oklch, it’s as easy as formatHex(colorStr) to convert it to a sRGB hex string.

[bfg-coding]

Then their might be a bug or I'm hoping I'm just an idiot. Here is the complete code snippet of how I'm extracting the css values

function oklchToHex(oklchStr: string): string {
    console.log("oklch string: ", oklchStr);
    const hex = formatHex(oklchStr);
    return hex;
}

export function observeThemeChanges(callback: (theme: Theme) => void) {
// Create observer to watch for theme attribute changes
  const observer = new MutationObserver((mutations) => {
  // biome-ignore lint/complexity/noForEach: <explanation>
  mutations.forEach((mutation) => {
      if (mutation.attributeName === "data-theme") {
      // Get updated CSS variables after theme change
      const updatedTheme = getComputedStyle(document.documentElement);
      
      const theme = {
	      primary: oklchToHex(updatedTheme.getPropertyValue("--p").trim()),
	      secondary: oklchToHex(updatedTheme.getPropertyValue("--s").trim()),
	      accent: oklchToHex(updatedTheme.getPropertyValue("--a").trim()),
	      neutral: oklchToHex(updatedTheme.getPropertyValue("--n").trim()),
	      "base-100": oklchToHex(updatedTheme.getPropertyValue("--b1").trim()),
	      "base-200": oklchToHex(updatedTheme.getPropertyValue("--b2").trim()),
	      "base-300": oklchToHex(updatedTheme.getPropertyValue("--b3").trim()),
	      "base-content": oklchToHex(updatedTheme.getPropertyValue("--bc").trim()),
      };
      console.log("Calcuclated theme:", theme);
      callback(theme);
      }
  });
});

And here what happens when I run this update. You'll notice that I'm getting the same string value for --p as (firefox) browser

Thank you for taking the time to review this as getting this to work will open a ton of doors for my projects professionally and personally

[danburzo]

Ah, those strings seem to be just part of the Oklch color. The complete syntax uses the oklch(...) function.

[bfg-coding]

That was it. Thank you so much for your time and help I really appreciate this!