如何将CSS命名颜色转换为hsla值并调整其明暗度

固定值直接转换 #

CSS官方命名颜色对应固定的色值，你可以直接使用对应标准HSLA值：

• orange 对应的HSLA值为 hsla(39, 100%, 50%, 1)
• blue 对应的HSLA值为 hsla(240, 100%, 50%, 1)

动态转换任意命名颜色的JS方案 #

如果需要批量转换或者处理不常见的命名颜色，可以用以下代码实时计算：

function nameToHsla(colorName, alpha = 1) {
  // 创建临时元素获取命名颜色对应的RGB值
  const tempEle = document.createElement('div');
  tempEle.style.color = colorName;
  document.body.appendChild(tempEle);
  const rgbaStr = window.getComputedStyle(tempEle).color;
  document.body.removeChild(tempEle);

  // 解析RGB值并转换为HSLA格式
  const [r, g, b, a = alpha] = rgbaStr.match(/\d+/g).map(Number);
  const rNorm = r / 255, gNorm = g / 255, bNorm = b / 255;
  const max = Math.max(rNorm, gNorm, bNorm), min = Math.min(rNorm, gNorm, bNorm);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    const diff = max - min;
    s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
    switch(max) {
      case rNorm: h = (gNorm - bNorm) / diff + (gNorm < bNorm ? 6 : 0); break;
      case gNorm: h = (bNorm - rNorm) / diff + 2; break;
      case bNorm: h = (rNorm - gNorm) / diff + 4; break;
    }
    h = Math.round(h * 60);
  }
  s = Math.round(s * 100);
  l = Math.round(l * 100);
  return `hsla(${h}, ${s}%, ${l}%, ${a})`;
}

// 调用示例
console.log(nameToHsla('orange')) // 输出 hsla(39, 100%, 50%, 1)

调整颜色深浅的方法 #

HSLA的第三个参数是亮度（Lightness），取值范围0~100%，数值越小颜色越深，数值越大颜色越浅，仅调整该参数即可得到同色系的深浅版本：

• 深蓝色：把blue对应的HSLA亮度从50%调低到20%，得到 hsla(240, 100%, 20%, 1)
• 浅橙色：把orange对应的HSLA亮度从50%调高到70%，得到 hsla(39, 100%, 70%, 1)
• 第四个参数为透明度，取值0~1，0为完全透明，1为完全不透明，可按需调整。

内容的提问来源于stack exchange，提问作者chovy