P3 Colors in amcharts color function

G'day

we are heavily using your tool. now, with the new tailwind 4 colors, we started using P3 (oklch) colors. now, our charts are not rendered anymore, because the color function doesnt allow P3 colors.
do you have any plans to support P3 as well or do we need to write our own transformation util function?

Cheers

[martynasma]

Should we decided to implement it, it would mean support for P3 for color parsing only. It would not affect actual rendering as we convert all colors into RGB values anyway, for manipulations such as color morphing animations, etc.

Can you confirm that this would be enough for you?

I mean you could do this (should we decide to implement it):

am5.color("oklch(40.1% 0.123 21.57)");

But internally, it would still be RGB.

That would absolutely be enough for me.

[martynasma]

Due to lack of wider demand, we won't be introducing built-in support for P3 colors at this time.

But maybe this'll help:

function parseColor(str) {
  // Regex for oklch() syntax: oklch(L C H [/ A])
  const regex = /^oklch\(\s*([\d.]+%?)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+%?))?\s*\)$/i;
  const match = str.match(regex);
  if (!match) return am5.color(str);

  let [, L, C, H, A] = match;

  // Parse numeric values
  L = L.endsWith('%') ? parseFloat(L) / 100 : parseFloat(L);
  C = parseFloat(C);
  H = parseFloat(H);
  A = A ? (A.endsWith('%') ? parseFloat(A) / 100 : parseFloat(A)) : 1;

  // Validate value ranges
  if (L < 0 || L > 1 || C < 0 || H < 0 || H >= 360 || A < 0 || A > 1) return null;

  // Convert OKLCH → OKLab
  const a = C * Math.cos((H * Math.PI) / 180);
  const b = C * Math.sin((H * Math.PI) / 180);

  // OKLab → linear sRGB
  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_ ** 3;
  const m = m_ ** 3;
  const s = s_ ** 3;

  let r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
  let g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
  let b_ = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s;

  // Clip and convert to 0–255
  r = Math.round(Math.max(0, Math.min(1, r)) * 255);
  g = Math.round(Math.max(0, Math.min(1, g)) * 255);
  b_ = Math.round(Math.max(0, Math.min(1, b_)) * 255);
  const a255 = Math.round(A * 255);

  // Format hex
  const hex = (v) => v.toString(16).padStart(2, '0').toUpperCase();
  return A < 1
    ? `#${hex(r)}${hex(g)}${hex(b_)}${hex(a255)}`
    : `#${hex(r)}${hex(g)}${hex(b_)}`;
}

This function will check if the string is oklch, and convert it into Color, otherwise falling back to am5.color().

Here's a working chart:
https://codepen.io/team/amcharts/pen/wBMegdV/dbbc2be1b4000bf73a080a319ed5e0f1?editors=0010

Hope you find this useful.