网页颜色(CSS色码表)

色码表都是看不懂的英文跟数字，却都是有意义、可以推算的，
而非乱数产生的乱码。

在网页中有两种大宗的色码分类方式，
一种为RGB色码表
另一种是HSV色码表

CSS描述颜色的方式

CSS有以下这麽多种方式能描述出一个颜色

body{
    background: #F80;
    background: #FF8C00;
    background: darkorange;
    background: rgb(255, 143, 00);
    background: rgba(255, 143, 00, 0);
    background: hsl(34, 100%, 50%);
    background: hsla(34, 100%, 50%, 1);
}

RGB 三原色光

RGB顾名思义，
把红(Red) 绿(Green) 蓝(Blue)光的三原色数字化

用数字大小代表三色的程度，以表示红色、绿色、蓝色各有多亮。
(有时会以16进位 来表示)

复习一下数学进制

2进制只有0、1
10进制是用0123456789 共10个符号来表示数字
16进制则是有0123456789ABCDEF共16个符号来表示数字

16进制中 A代表数字10、F代表数字15
1A代表数字26 : "1x16 + A" => "16 + 10" => "26"
2F代表数字47: "2x16 + F" => "32 + 15" => "47"

rgb( ) 十进制

rgb()中的三个数字，
各自代表R、G、B灯亮的程度，
并将灯的亮度切分成256等份(0~255)

background: rgb(255,143,00);

rgb() 共可以表示出 256 x 256 x 256 = 16777216 种颜色。

RGB六码 #000000 (24bit)

六码则是分成前两码、中两码、後两码
各自代表R、G、B的程度
并将灯的亮度切分成256等份(0~255)

background: #FF8C00;

#7F0000 红色灯开到7F(127)，其余灯全暗。深红色。
#CCCCCC 全部灯都有开、但没开到最强，只开到CC的程度(204)。浅灰色。
#0099FF 红色灯关、绿色开一半多(153)、蓝色灯最强(255)。浅蓝色。

RGB六码总共可以表示出 256 x 256 x 256 = 16777216 种颜色，
可以比三码表现出更多种细微变化。

RGB三码 #000

三码时，
前、中、後各码各自代表R、G、B的程度
并将灯的亮度切分成16等份(0~15)

background: #F80;

#F00 红色灯开到最强，其余两色灯全暗
#00F 蓝色灯开到最强，其余两色灯全暗
#000 没有一个灯是开着的。黑色。
#FFF 全部灯都打开到最强。白色。

RGB三码仅只有 16 x 16 x 16 = 4096 种颜色

RGBA = RGB加上Alpha(透明度)

早期的Alpha仅有一个bit，只能表示是否透明的是或否，没有透一半的中间值，
而後出现Alpha通道则能表示不透明程度。

颜色透明不一定是白色，而是呈现底下图的背景色。

数值越大代表越不透明。
透明(底图白色)
半透明(橘+白混合)
不透明(橘色)

background: rgba(255,143,00,0);
background: rgba(255,143,00,0.5);
background: rgba(255,143,00,1);

HSL 色相、饱和、亮度

三个维度红绿蓝的RGB就很够用了呀，为什麽要推HSL呢？

其实因为人体视椎细胞(颜色感受器)数量不同的关系，
人的眼睛在看某一区块的变化时，觉得数值变化亮度差1就会变很多
但在看某些区块时，某数值虽然已经变化了10、20，人眼却仍无法察觉有什麽变化。

RGB这种灯亮程度的方式，在人的肉眼来看，
有些色彩有超一大块色段颜色是相似、相近的
但有些区块只有一咪咪相似相近的颜色

RGB灯光影片
影片中，灯光每次tick时都会 增加或扣去RGB其中一色，增减值为固定值
可以发现有些颜色变色是一瞬间 (在那些颜色中调整成慢慢增扣，色彩才能较均匀)

於是有人开始想能不能把色彩分类，
最後把各大颜色类别抽取出来做成一个圆状，

方法是将三原色(红绿蓝)叠加而成可得六大色彩(红绿蓝紫黄青)，
在将这六种颜色叠叠加加混混，就能产生出12种基本色(色环)

将颜色套上了坐标系後，
只要对照颜色的相位，就可以选取所要的色系了，
再来调整饱和度跟亮暗度。

将左图(RGB)改成右图(HSL)，
可以发现右图中一些颜色所占的角度较大

HSL三个属性的值分别为: 相位角度、色彩饱和度(越接近色相的位置)、亮度(黑白程度)

HSL饱和度差异

三种饱和度差异

background: hsl(34, 50%, 50%);
background: hsl(34, 75%, 50%);
background: hsl(34, 100%, 50%);

"饱和度"听起来很抽象

只要记得 离色环上的颜色越远，越不饱和
以青色为例，青色最饱和(饱和度100%)时颜色是 R=0 G=255 B=255
只要加一点点的杂色元素(R色)、或少一点点的纯色(G色B色)，就变的越不饱和，
多到R=255 G=255 B=255时，此时饱和度已是0%，变成纯白色

颜色变得越三色均匀(RGB色越平均)就越不饱和
所以灰阶色(白灰黑色等)都是不饱和颜色

HSL亮度差异

三种亮度差异

background: hsl(34, 100%, 25%);
background: hsl(34, 100%, 70%);
background: hsl(34, 100%, 100%);

0% 没亮度，全黑了
100% 直接亮到变成白色，闪瞎我

可以透过小工具选择色彩来更加了解HSL。
(先选择色相、再调整饱和度及亮暗)

HSLA = HSL加上Alpha(透明度)

和RGBA一样方式的Alpha通道

background: hsla(34, 100%, 50%, 1);

为什麽色光三原色(红绿蓝)跟色彩三原色(红黄青)会不同呢？

光的叠加性

树木的叶子为何呈现绿色？

原因是叶子反射绿光、吸收绿色以外的光线(紫光)。

"光"本身具有叠加性，越叠越亮(加法混合)。
但"色彩"、"物品"、"颜料"却是靠吸收光线来呈现另类颜色，
吸收越多光线、於是越叠越黑(减法混合)。

CMY、CMYK

减法混合就叫做CMY，分别是 青色(Cyan)、洋红色(Magenta)、黄色(Yellow)

而因为颜料叠出来的黑色不够黑，在印刷中增加了黑色，
成为CMYK印刷四原色
青色(Cyan)
洋红色(Magenta)
黄色(Yellow)
黑色(blacK)

题外话

"光原色"不是物理法则，而是便於人类区分而分类的，
因为大多数人体只有三种视锥细胞。
但有少部分人是四原色视者，
甚至有些动物(蜥蜴)有超过四种视锥细胞。

三原色已经能呈现出千万种色彩了，
那四原色、甚至更多原色到底是怎麽样的世界呢？

在物理化学中，有些肉眼无法区分的金属元素，
会不会他们用肉眼都看得出差异、能明显区别呢？
这样一来就不用还要去秤重量、去加热燃烧看会发出什麽颜色的光
这麽种方法去区别了，有助於我们少背一些东西...