随时看看五颜六色的世界

五颜六色的世界

资料整理笔记。

在craft里面自已记录内容的目录叫“五颜六色的世界”。娃小的时候，哄娃睡觉时候给娃写了一首歌，里面有一句“总有一天你要远直高飞，看未知世界五颜六色的美”。建目录的时候想到这儿，知识是世界的，世界是丰富多彩的，每一点滴的知识学习都是在探索这个五颜六色的世界。

自已平时写前端或者画图的时候，也经常用到颜色模型，虽然那些简要知识日常都够用了，但来不知道为什么中午脑子一热，有了一个想要再挖一点的念头。所以晚上就燥起来吧。

正好是这次内容是与颜色相关的，就用了目录名称当标题。

这段不喜欢的建议跳过

首先，我们理解一个概念，“比如我同事今天穿了一件好看的Raspberry（树莓红）的衬衫”，这句话日常生活中是对的，但科学上讲是错的，她的衬衫其实没有颜色，物体本身是没有颜色的。我们所看到的物体的颜色,其实是物体反射或发射出的光进入我们眼睛后,大脑对其进行解释的结果。就像一张白纸,在白光下是白色的,但如果我们用红色的光照射它,它就会变成红色。

那么光为什么有不同的颜色呢?这涉及到光的物理性质。光是一种电磁波,像海浪一样有波长和频率。可见光的波长范围大约是380纳米到780纳米。不同波长的光,我们眼睛感知到的颜色是不一样的。比如,波长在620~~750纳米之间的光,我们看到的就是红色;波长在450~~490纳米之间的光,我们看到的就是蓝色。

而我们通常看到的白光,比如太阳光,其实是由各种不同波长的光混合而成的。就像一束彩虹,红橙黄绿青蓝紫,各种颜色的光都有。

谱功率密度(SPD)

谱功率密度(SPD)可以理解为一束光中不同颜色的"配方"。就像一杯果汁,可能由不同比例的苹果汁、橙汁、葡萄汁混合而成。SPD描述了一束光中不同波长(也就是不同颜色)的光所占的比例。而且,光的混合是可以简单地"加"在一起的。就像你喝一杯果汁还不过瘾,再加一杯,味道就会更浓郁。

其次,我们人眼内有三种视锥细胞,分别对红、绿、蓝三种颜色的光最敏感。它们就像三个女孩,对不同颜色的衣服有不同的喜好。比如,绿色视锥细胞最喜欢波长500纳米左右的"绿色衣服",而红色视锥细胞则对650纳米左右的"红色衣服"情有独钟。有意思的是,每个人眼中这三种细胞的分布都不太一样,所以有时候我们看同样的一个东西，但我们的感觉是不一样的。

当一束光进入我们眼睛时,三种视锥细胞就会根据自己的"喜好"对这束光产生不同的响应,然后把这些响应"报告"给大脑。大脑再根据这些信息,判断出我们所感知到的颜色。

有时候,不同组成的光也可能会让视锥细胞产生相同的响应,从而让我们感知到相同的颜色。这就叫同色异谱。打个比方,一块纯巧克力蛋糕和一块巧克力慕斯蛋糕,虽然配方不同,但可能会给人相似的味觉感受。

最后,在自然界和电脑屏幕上,颜色都是以"加色"的方式混合的。多种颜色的光混在一起,就会让我们感觉更亮。这就像在黑暗的房间里,你打开一盏灯,房间变亮了一些;再打开一盏,房间就会变得更亮。

色域

这个图大家应该经常见色域图。

ProPhoto RGB: 由Kodak公司开发,色域非常广,几乎覆盖了人眼可见的所有颜色。常用于专业的摄影后期处理,在普通显示器上可能无法完全显示其色彩。
Adobe RGB: 由Adobe公司开发,比sRGB的色域更广,常用于印刷、平面设计等领域。
SWOP CMYK:是一种标准的CMYK印刷色彩空间,用于杂志等印刷品。
sRGB: 由微软和惠普开发的标准RGB色彩空间,是目前使用最广泛的色彩空间。适用于网页、普通级照片打印等。大部分消费级显示设备都覆盖sRGB色域。
ColorMatch RGB: 由Radius公司开发,比sRGB稍大,曾在早期的Apple显示器上使用。现在已经很少使用。
D65 white point: 并非一个色彩空间,而是一个标准光源。D65模拟正午太阳光,广泛用作显示器、照相机的白点校准标准。白点会影响色彩的显示。

所以参考这部分，买显示设备的时候，根据你需求去挑选相应参数的设备吧，不要被厂商的介绍牵着你走。

色彩管理可协助您在数位相机、扫描器、电脑萤幕与印表机之间达成颜色的一致。当您将数位相机中的影像显示在萤幕上，并最终使用印表机列印时，影像颜色也会有所调移。调移之所以会发生，是因为每个装置都有不同的色域，因此会重新产生不同的颜色。

A.描述档会描述输入装置和文件的色域。 B.色彩管理系统使用描述档的描述来识别文件的实际色彩。 C.萤幕的描述档会告知色彩管理系统如何将数值转换成萤幕的色域。 D.使用输出装置的描述档，色彩管理系统可将文件的数值转换成输出装置的颜色值，以列印实际颜色。

在计算机领域,为了方便处理颜色,人们发明了RGB、CMY、HSV等不同的颜色模型。就像用不同的调色板来调配颜色一样。比如在RGB模型中,我们用红、绿、蓝三种基本色光以不同比例混合,就能得到各种不同的颜色。小时候的调色板、彩泥弄出各种颜色都是这样的方式。

Named Colors(命名颜色）模型

使用预定义的颜色名称,如"red"、"blue"、"green"等。

css支持140种命名颜色。

RGB颜色模型（三元色）

又称红绿蓝颜色模型，是一种加色模型，故名思意将红（Red）、绿（Green）、蓝（Blue）三原色的色光以不同的比例相加混色，以合成产生各种色彩光。

RGB颜色模型的主要目的是在电子设备中表示和显示色彩丰富的图像,如电视和电脑显示器。它利用了人眼和大脑的特性,通过混合红、绿、蓝三种基本色光来产生各种色彩。

起源

1802年:英国物理学家托马斯·杨提出三原色理论,认为人眼有三种感光器,对应红、绿、蓝。
1861年:苏格兰物理学家詹姆斯·麦克斯韦用红、绿、蓝滤色片拍摄同一场景,叠加后形成彩色图像,证明了三原色理论,奠定了RGB模型的应用基础。
1938年:美国科学家约翰·洛吉·贝尔德发明世界首台彩色电视机,使用RGB三原色原理,通过三种颜色的电子枪产生彩色图像。
1977年:苹果公司推出支持RGB颜色显示的Apple II个人电脑,RGB模型成为计算机显示技术的标准,延续至今。

工作原理

屏幕上有许多像素点,每个像素点由红、绿、蓝三个子像素组成。
通过调节每个子像素的亮度,可以混合出不同的颜色。
人眼看屏幕时,由于像素点很小且密集,无法分辨单独的子像素。
大脑会自动将相邻的红、绿、蓝子像素"失焦"并混合,形成我们感知到的颜色。

RGB颜色表示方式

在RGB模型中,每种原色都有一个0到255之间的数值来表示其亮度。例如:

红色: RGB(255, 0, 0)
绿色: RGB(0, 255, 0)
蓝色: RGB(0, 0, 255)
黑色: RGB(0, 0, 0)
白色: RGB(255, 255, 255)

通过调整三种原色的亮度值,可以混合出超过16,777,216种不同的颜色。也就是256256256，猜为什么是256呢

不正经科谱：女性大概能够识别大约180万种颜色，而男性只能够识别大约130万种。所以别跟女性衣服口红好不好看，因为你看不到人家看到的世界。

RGB颜色混合原理

RGB颜色混合遵循以下原则:

三种原色光以不同的比例混合,可以产生各种不同的颜色。
两种原色光混合可以产生另一种颜色:
- 红 + 绿 = 黄
- 红 + 蓝 = 品红
- 绿 + 蓝 = 青
三种原色光以相等的比例混合,可以产生白色光。
任何颜色与其互补色混合,都会产生白色光。

扩展的 RGBA

RGBA是在RGB颜色模型的基础上,增加了一个Alpha通道,用于表示颜色的透明度。因此,RGBA颜色由四个部分组成:红色(Red)、绿色(Green)、蓝色(Blue)和透明度(Alpha)。

1984年:Alpha通道概念首次提出,用于表示图像透明度。

1992年:PNG图像格式发布,支持Alpha通道。

1996年:CSS1发布,支持RGB颜色模型。

1998年:CSS2发布,引入有限的透明度支持。

2002年:SVG 1.0规范发布,支持RGBA颜色模型。

2003年:CSS3草案引入RGBA颜色模型。

2011年:CSS Color Module Level 3成为W3C推荐标准,正式支持RGBA。

所以RGBA的表示方式就是：

RGBA（255,255,255,1）

HEX16进制颜色模型

16进制颜色是基于RGB颜色模型的颜色表示方式,使用16进制数字来表示红、绿、蓝三种原色的亮度值。

在16进制颜色表示法中,每种原色(红、绿、蓝)都用两位16进制数字表示,范围从00到FF。例如:

红色: #FF0000
绿色: #00FF00
蓝色: #0000FF
黑色: #000000
白色: #FFFFFF

16进制数字的范围从0到9,然后是A到F。两位16进制数字可以表示256种不同的亮度值,三种原色组合在一起,可以表示超过16,777,216种不同的颜色。

256**3 = 16** 6 = 16,777,216

16进制颜色的转换原理

要将RGB颜色转换为16进制颜色,需要执行以下步骤:

将每种原色的亮度值(0-255)除以16,得到商和余数。
将商转换为16进制数字(0-9或A-F),作为第一位。
将余数转换为16进制数字(0-9或A-F),作为第二位。
将三种原色的16进制数字按照红、绿、蓝的顺序组合在一起,并在前面加上"#"符号。

例如,将RGB颜色(255, 165, 0)转换为16进制颜色:

红色: 255 ÷ 16 = 15 余 15,对应的16进制数字为FF
绿色: 165 ÷ 16 = 10 余 5,对应的16进制数字为A5
蓝色: 0 ÷ 16 = 0 余 0,对应的16进制数字为00

因此,RGB颜色(255, 165, 0)对应的16进制颜色为#FFA500。

HSL

HSL是一种基于人类感知的颜色模型,代表色相(Hue)、饱和度(Saturation)和亮度(Lightness)。HSL更接近人类对颜色的直观感受。

HSL、HSV/HSB在概念和数值上非常相近，主要区别在于明暗度的表示名称不同。

HSL使用亮度(Lightness)表示明暗，取值范围0-100%。
HSV和HSB使用明度(Value或Brightness)表示明暗，取值范围0-100%。

起源

1938年:Albert Munsell提出Munsell颜色系统,包括色相、明度和彩度三个维度。
1978年:Alvy Ray Smith在Munsell颜色系统基础上,提出了HSV颜色模型,更适合计算机处理。
1979年:Tektronix研究人员提出HLS颜色模型,是HSL的前身。
1996年:Wolfgang Ortmann正式提出HSL颜色模型。
2011年:CSS Color Module Level 3成为W3C推荐标准,HSL得到广泛浏览器支持。
2014年:CSS Color Module Level 4引入更多HSL相关特性,如HSLA和color()函数。

HSL的工作原理

HSL颜色模型使用三个维度来描述颜色:

色相(Hue):表示颜色的基本属性,如红色、绿色、蓝色等。色相用一个0到360度的角度表示,0度为红色,120度为绿色,240度为蓝色。
饱和度(Saturation):表示颜色的纯度,即颜色中灰色的占比。饱和度用0%到100%表示,0%为灰色,100%为纯色。
亮度(Lightness):表示颜色的明暗程度。亮度用0%到100%表示,0%为黑色,100%为白色,50%为纯色。

通过调整这三个维度的值,可以得到各种不同的颜色。例如:

hsl(0, 100%, 50%):纯红色
hsl(120, 100%, 50%):纯绿色
hsl(240, 100%, 50%):纯蓝色
hsl(0, 0%, 50%):中性灰色
hsl(0, 100%, 100%):白色
hsl(0, 100%, 0%):黑色

扩展的HSLA

HSLA是HSL的扩展，增加了一个透明度参数。例如，hsla(0, 100%, 50%, 0.5)代表半透明的红色

HWB颜色模型

HWB是一种颜色模型,代表色相(Hue)、白度(Whiteness)和黑度(Blackness)。它是HSL颜色模型的一种替代方案,旨在提供更直观、更易于理解的颜色表示方式。

起源

1996年:Alvy Ray Smith首次提出HWB颜色模型的概念。
2000年:Michael Bourgoin完善了HWB颜色模型,并与HSB(HSV)模型进行比较。
2005年:W3C的SVG工作组开始讨论在SVG中支持HWB。
2011年:CSS Color Module Level 4草案发布,包括了对HWB的支持。
2021年:CSS Color Module Level 4候选推荐标准发布,完善了HWB的定义和用法。

工作原理

HWB颜色模型使用三个分量来描述颜色:

色相(Hue):表示颜色的基本属性,如红色、绿色、蓝色等。色相用一个0到360度的角度表示,与HSL中的色相概念相同。
白度(Whiteness):表示颜色中白色的占比,用0%到100%表示。白度为100%时,颜色为纯白色;白度为0%时,颜色由色相和黑度决定。
黑度(Blackness):表示颜色中黑色的占比,用0%到100%表示。黑度为100%时,颜色为纯黑色;黑度为0%时,颜色由色相和白度决定。

通过调整这三个分量的值,可以得到各种不同的颜色。例如:

hwb(0, 0%, 0%):纯红色
hwb(120, 0%, 0%):纯绿色
hwb(240, 0%, 0%):纯蓝色
hwb(0, 100%, 0%):白色
hwb(0, 0%, 100%):黑色
hwb(60, 50%, 0%):浅黄色
hwb(180, 0%, 50%):深青色

HWB颜色模型尚未得到普遍支持

CMYK

CMYK是一种减色模型,主要用于印刷行业。它代表青色(Cyan)、品红色(Magenta)、黄色(Yellow)和黑色(Key)。

起源

1906年,美国印刷商Ira Washington Rubel发明了偏移印刷技术,奠定了现代印刷行业的基础。
20世纪30年代,印刷行业开始使用青色、品红色和黄色三种油墨进行彩色印刷。
20世纪50年代,黑色油墨被引入印刷过程,以提高图像的对比度和清晰度。这标志着CMYK颜色模型的诞生。
1970年代,美国印刷工业协会(GATF)制定了CMYK颜色标准,促进了CMYK在印刷行业的广泛应用。
1980年代,随着计算机技术的发展,CMYK颜色模型开始被用于数字图像处理和打印机驱动程序。

工作原理

CMYK颜色模型基于光的减色原理,通过吸收特定波长的光来呈现颜色。

青色(Cyan)油墨吸收红光,反射绿光和蓝光。
品红色(Magenta)油墨吸收绿光,反射红光和蓝光。
黄色(Yellow)油墨吸收蓝光,反射红光和绿光。
黑色(Key)油墨用于提高图像的对比度和清晰度,并补偿其他三种油墨的不足。

在印刷过程中,青色、品红色、黄色和黑色油墨以不同的比例叠加在白色纸张上,通过减色混合形成各种颜色。例如:

青色 + 黄色 = 绿色
青色 + 品红色 = 蓝色
品红色 + 黄色 = 红色
青色 + 品红色 + 黄色 + 黑色 = 深黑色

CMYK颜色模型中,每种颜色的值通常以百分比表示,范围从0%到100%。例如:

C=100%, M=0%, Y=0%, K=0%:纯青色
C=0%, M=100%, Y=0%, K=0%:纯品红色
C=0%, M=0%, Y=100%, K=0%:纯黄色
C=0%, M=0%, Y=0%, K=100%:纯黑色

CSS目前不直接支持CMYK颜色模型

结束了！今日循环歌曲，鹿先森风格不太一样了，

还有一些其它的，就不再介绍了，就我当前的工作和日常使用领域，基本上也跟它们没有交集了。相见不如不见，相见了还要让我去阅读。对于一个互联网刷漆的来说，上面的这些颜色模型已经能让我刷新五颜六色的互联网世界了。

CIE LAB:一种基于人类感知的颜色模型,用L表示亮度,A和B表示色度。广泛用于色彩管理和印刷行业。

CIE XYZ:国际照明委员会(CIE)制定的一种基于人眼感知的颜色模型,是许多其他颜色模型的基础。

YUV:一种常用于视频编码和传输的颜色模型,将亮度(Y)与色度(U和V)分离,以减少带宽占用。

YCbCr:与YUV类似,也是一种用于视频编码和传输的颜色模型,常用于JPEG图像压缩。

Munsell(孟塞尔颜色系统):一种基于人类感知的颜色组织方式,包括色相、明度和彩度三个维度,常用于艺术、设计和色彩教学领域。

Pantone(潘通色):一种标准化的颜色匹配系统,提供了大量预定义的颜色,广泛用于平面设计、印刷和纺织行业。

NCS(自然颜色系统):一种基于人类感知的颜色模型,用于描述和沟通颜色,常用于建筑、室内设计和色彩教学领域。

参考资料：

adobe官方的關於色彩管理

BenQ官网

颜色空间理论.pdf