第四篇 css - 基础 - 颜色

颜色基本概述

1、颜色

  颜色是指不能透过其他颜色的混合调配而得出的“基本色”，以不同比例将原色混合可以产生出其它的新颜色。
  
  由于人类肉眼有 三种 不同颜色的感光体，因此所见的色彩空间通常可以由 三种 基本色所表达，这三种颜色被称为“三原色”
  
  一般来说叠加型的三原色是 红色、绿色、蓝色
  
  又称三基色，用于电视机、投影仪等显示设备
  
2、色彩空间

  对色彩的组织方式，借助色彩空间和针对物理设备的测试，可以得到色彩的固定模拟和数字表示
  
  例如 Adobe RGB 和 sRGB
  
3、色彩模型  

   是一种抽象数学模型，通过一组数字来描述颜色
   
   例如 RGB 使用 三元组

CSS 中颜色的表示和转换

颜色词

color: red;   // 红色
color: green; // 绿色
color: blue;  // 蓝色

RGB

color: rgb(255, 0, 0, 1);  // 红色
color: rgb(0, 255, 0, 1);  // 绿色
color: rgb(0, 0, 255, 1);  // 蓝色

RGB 是以一组十进制数值表示颜色，结构为 rgb(R, G, B, A)

   其中 A 表示透明度
   
   RGB 色彩模型的创建方式是将 红色、绿色、蓝色 映射到 三维笛卡尔 坐标系中

HEX

color: #FF0000; // 红色
color: #00FF00; // 绿色
color: #0000FF; // 蓝色

HEX 是以一组十六进制数值表示颜色，结构为 #RRGGBB[AA] 或 #RGB[A]

  其中 A 表示透明度
  
  下面这个等式可以成立
  
  color: #FF0000;
   // 等价于
  color: #F00;
   // 等价于
  color: #F00F;

HSL

color: hsl(0, 1000%, 50%);   // 红色
color: hsl(120, 100%, 50%); // 绿色
color: hsl(240, 100%, 50%);   // 蓝色

HSL 的结构为 hsl(H,S,L,A) 其中 A 表示透明度

是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示方式

这种色彩模型能够做到比基于笛卡尔坐标系的几何结构更加直观

1、色相（Hue）：取值 0～360，指色彩的基本属性，0（或360）表示红色，120 表示绿色，240表示蓝色。

2、饱和度（Saturation）：取值 0～100%，指色彩的纯度，越高色彩越纯，低则逐渐变灰。

3、明度（Lightness）：取值 0～100%。

RGB 转 HEX 算法

function rgbToHex(r, g, b, allow3Char) {
  var hex = [
    pad2(mathRound(r).toString(16)),
    pad2(mathRound(g).toString(16)),
    pad2(mathRound(b).toString(16))
  ];

  // Return a 3 character hex if possible
  if (allow3Char &&
    hex[0].charAt(0) == hex[0].charAt(1) &&
    hex[1].charAt(0) == hex[1].charAt(1) &&
    hex[2].charAt(0) == hex[2].charAt(1)
  ) {
    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
  }
  return hex.join("");
}

RGB 转 HSL 算法

function rgbToHsl(r, g, b) {
  r = bound01(r, 255);
  g = bound01(g, 255);
  b = bound01(b, 255);
  var max = mathMax(r, g, b), min = mathMin(r, g, b);
  var h, s, l = (max + min) / 2;
  if (max == min) {
    h = s = 0; // achromatic
  }
  else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }

    h /= 6;
  }
  return { h: h, s: s, l: l };
}