CSS colors

CSS colors

css 支持使用多种语法描述颜色

• keywords
• hex codes
• 使用 16 进制表示 #RRGGBB
• color function
  • rgb/rgba
    • rgb() 前三个参数分别指定 red, green, blue 通道，最后一个参数指定 alpha 通道
  • hsl/hsla
    • hsl() 的三个参数分别是色调、饱和度和明度，最后一个参数指定 alpha 通道
  • hwb
    • hwb() 的三个参数分别是色调、白度和黑度，最后一个参数指定 alpha 通道
  • lch
  • lab
  • color
    • 指定预定义的颜色空间
    • color(srgb …)
    • color(display-p3 …)
    • …

sRGB 色域可以用 16 进制, rgb/rgba, hsl/hsla, hwb 直接指定

// 不同用法表示同一个颜色
color: #ff0000;
color: rgb(255 0 0 / 0.5);
color: hsl(0 100% 50%);
color: hwb(0 0% 0%);

将 HSL 颜色转为 sRGB

/**
 * @param {number} hue - Hue as degrees 0..360
 * @param {number} sat - Saturation in reference range [0,100]
 * @param {number} light - Lightness in reference range [0,100]
 * @return {number[]} Array of RGB components 0..1
 */
function hslToRgb(hue, sat, light) {
  hue = hue % 360;

  if (hue < 0) {
    hue += 360;
  }

  sat /= 100;
  light /= 100;

  function f(n) {
    let k = (n + hue / 30) % 12;
    let a = sat * Math.min(light, 1 - light);
    return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
  }

  return [f(0), f(8), f(4)];
}

将 sRGB 颜色转为 HSL

/**
 * @param {number} red - Red component 0..1
 * @param {number} green - Green component 0..1
 * @param {number} blue - Blue component 0..1
 * @return {number[]} Array of HSL values: Hue as degrees 0..360, Saturation and Lightness in reference range [0,100]
 */
function rgbToHsl(red, green, blue) {
  let max = Math.max(red, green, blue);
  let min = Math.min(red, green, blue);
  let [hue, sat, light] = [NaN, 0, (min + max) / 2];
  let d = max - min;

  if (d !== 0) {
    sat = light === 0 || light === 1 ? 0 : (max - light) / Math.min(light, 1 - light);

    switch (max) {
      case red:
        hue = (green - blue) / d + (green < blue ? 6 : 0);
        break;
      case green:
        hue = (blue - red) / d + 2;
        break;
      case blue:
        hue = (red - green) / d + 4;
    }

    hue = hue * 60;
  }

  return [hue, sat * 100, light * 100];
}