我想將CSS Lch顏色字符串轉(zhuǎn)換為:

--my-color: lch(20% 8.5 220.0);

轉(zhuǎn)換成RGB十六進(jìn)制代碼。我嘗試使用chroma的Lch解析器等工具，但它們似乎都使用絕對值作為第一個縱坐標(biāo)(在我的例子中是20%)。

有什么標(biāo)準(zhǔn)的方法可以將這20%轉(zhuǎn)換成大多數(shù)Lch轉(zhuǎn)換工具使用的亮度值嗎？

w3c正在起草一份草案，并附上了javascript示例代碼(在這里發(fā)布有點太長，您需要更高的數(shù)學(xué)知識才能做到這一點(至少需要sin和2.4的力量)。

我可以給你這個我自己寫的函數(shù)，從LCH轉(zhuǎn)換成十六進(jìn)制，或者RGB，如果你想的話。我是用PHP寫的，所以很容易適應(yīng)任何其他語言

function lch2hex($l, $c, $h) {
  $a=round($c*cos(deg2rad($h)));
  $b=round($c*sin(deg2rad($h)));
  unset($c,$h);
  
  // Reference white values for D65 Light Europe Observer
  // $xw = 0.95047;
  // $yw = 1.00000;
  // $zw = 1.08883;
  
  // Reference white values for CIE 1964 10° Standard Observer
  $xw = 0.948110;
  $yw = 1.00000;
  $zw = 1.07304;
  
  // Compute intermediate values
  $fy = ($l + 16) / 116;
  $fx = $fy + ($a / 500);
  $fz = $fy - ($b / 200);
  
  // Compute XYZ values
  $x = round($xw * (($fx ** 3 > 0.008856) ? $fx ** 3 : (($fx - 16 / 116) / 7.787)),5);
  $y = round($yw * (($fy ** 3 > 0.008856) ? $fy ** 3 : (($fy - 16 / 116) / 7.787)),5);
  $z = round($zw * (($fz ** 3 > 0.008856) ? $fz ** 3 : (($fz - 16 / 116) / 7.787)),5);
  unset($l,$a,$b,$xw,$yw,$zw,$fy,$fx,$fz);
  
  $r = $x * 3.2406 - $y * 1.5372 - $z * 0.4986;
  $g = -$x * 0.9689 + $y * 1.8758 + $z * 0.0415;
  $b = $x * 0.0557 - $y * 0.2040 + $z * 1.0570;
  unset($x,$y,$z);

  $r = $r > 0.0031308 ? 1.055 * pow($r, 1 / 2.4) - 0.055 : 12.92 * $r;
  $g = $g > 0.0031308 ? 1.055 * pow($g, 1 / 2.4) - 0.055 : 12.92 * $g;
  $b = $b > 0.0031308 ? 1.055 * pow($b, 1 / 2.4) - 0.055 : 12.92 * $b;

  $r = round(max(min($r, 1), 0) * 255);
  $g = round(max(min($g, 1), 0) * 255);
  $b = round(max(min($b, 1), 0) * 255);
  
  return '#' . sprintf('%02X%02X%02X', $r, $g, $b);
  }

JS-native canvasrenderingcontext 2d實例可以讀取任何CSS格式的顏色(作為字符串),并將其寫入RGBA緩沖區(qū)(0到255 ):

const myCssColor  = "lch(20% 8.5 220.0)";

function cssColor_to_rgba255Color(string) {
    const canvas = document.createElement("canvas");
    canvas.width = canvas.height = 1;
    const ctx = canvas.getContext("2d", {willReadFrequently: true});
    ctx.fillStyle = string;
    ctx.fillRect(0, 0, 1, 1);
    return ctx.getImageData(0, 0, 1, 1).data;
}

const rgba = cssColor_to_rgba255Color(myCssColor);

console.log( rgba[0], rgba[1], rgba[2], rgba[3] );
// 33 51 56 255

這個函數(shù)的性能可能很差，但是可以通過總是回收(使用clearRect)相同的& quotctx & quot對象。