火狐体育平台app登录:颜色空间(二):CIE 色度图与颜色空间

  新闻资讯     |      2024-05-19 10:32:10

  在上一篇文章《颜色空间(一):颜色空间根底》中我们了解到,规划软件调制的颜色会以色值的方法传递给核算机,比方:rgba(255, 0, 0, .8) 或许 #FF0000。但问题在于,单单是色值自身还不足以精确表达特定的颜色,我们还需求了解一下 “颜色空间” 这个概念。

  实践上,rgb(255, 0, 0) 或许 #FF0000 这样的色值参数,仅仅只是告知核算机显现设备:请你展现纯赤色,不掺杂一点蓝也不掺杂一点绿的纯赤色。此刻,显现设备会尽自己的全力去显现一个 100% 饱和度的纯赤色,但不同的显现设备,他们的展现作用是不同的,其间某些显现设备的赤色看起来或许会比别的一些更艳丽(比方手机屏幕看起来比电脑屏颜色艳丽)。这就带来了一个问题:RGB 色值的体现是根据显现设备的,不同的显现设备对 RGB 的表达才干有所不同,尽管他们接受到的色值参数是共同的,但呈现出来的颜色的视觉感触却并不相同,换言之便是他们并没有展现出相同的颜色,那究竟哪个赤色才是精确的呢?

  实践上这个问题早在 1931 年就得到了处理,为了界说一种与设备无关的颜色模型,让颜色能够脱离设备而精确界说,1931 年世界照明委员会(CIE)的颜色科学家们在 RGB 模型根底上,经过数学的方法推导出了理论的 RGB 三基色,并以此创建了一个规范的颜色体系。而这一颜色体系的常见展现方法,便是 CIE 色度图(CIE chromaticity diagram)(如下图),我们之后所评论的颜色空间往往都是根据这个色度图去展现的。

  你或许会很猎奇为什么 CIE 色度图会长这个姿态,一个看起来没什么规矩的古怪三角形,之前的圆形色盘不是更漂亮吗?事实上这个形状是经过数学核算得来的,之所以核算结果长这样,其间一个重要规矩是 “感知均匀性(perceptual uniformity)”,说人话便是这个形状更简略体现颜色之间的联系。仍是没理解?没联系,我们举个比方:

  比方下图(图一)中假如 A 点(绿色) 和 B 点(赤色)两个点的颜色等份额混合,那么得到的新的颜色黄色一定在 A 点和 B 点连线的中点 E 点上,反观(图二)在圆形色盘(非感知均匀性图形)上去衔接纯绿色 A 和纯赤色 B 两个点,他们的中点 E 并不是纯黄色,纯黄色在圆周 F 点上;换言之,假如 A 点和 B 点两个颜色经过恣意份额混合,那么得到的新的颜色也必定在 A B 两点的连线上。也便是说,(图三)R G B 三个点的颜色经过恣意份额混合,他们所体现出来的新颜色也必定在这个三角规模内。

  规范的颜色体系是根据人类的可视颜色规模拟定的,并以此为根底制作出 CIE 色度图,而事实上现在的显现技能并没有方法展现一切的可视颜色,不同的显现设备都只能展现可视颜色中的某一部分,这便是我们要说的 “颜色空间(Color Space)”,前面我们说到的同一个色值在不同的显现设备上看起来颜色不一样,首要也是由于他们有着不同的颜色空间,只能重现自己空间内的颜色。

  经过上面的内容我们知道,一个显现设备所能体现的颜色丰厚程度取决于它展现红、绿、蓝三原色的极限才干,因而由 R G B 三个点组成的三角形,便是该设备所能体现的悉数颜色的区域(上图三),我们称之为——颜色空间。

  R G B 三个点越挨近于图形的鸿沟,那么该颜色空间也就越大,一切的颜色空间都是 “可视颜色空间” 的子集,比方 sRGB、Adobe RGB、Display P3 和 CMYK 便是 4 个典型的颜色空间,不过我们首要讨论的是根据 RGB 的颜色空间,CMYK 并不是 RGB 颜色空间。下图是 sRGB 和 Display P3 在 CIE 色度图上的比照:

  从比照中我们能够看出,sRGB 的颜色空间要比 Display P3 小一些,一切在 sRGB 中能够被描绘的颜色都能被 Display P3 所展现,而某些在 Display P3 中的颜色却并没有方法经过 sRGB 来体现。假如你仍是有一点含糊,那我们经过苹果的颜色办理器看一下 “纯赤色” 在不同颜色空间的比照联系,就更明晰了:

  上图中,浅灰域代表的是 Display P3 颜色空间,彩域代表的是 sRGB 颜色空间, 我们能够看出,同样是纯赤色的色值 #FF0000,在 Lab 规范颜色空间中,他们所在的方位并不相同。在 sRGB 傍边,纯赤色 #FF0000 其实只相当于 Display P3 的 #EA3323(不同的空间转化算法,色值或许会有细小误差);也便是说 P3 中色值为 #EA3323 的颜色看起来和 sRGB 傍边 #FF0000 差不多,P3 的纯赤色 #F0000 要愈加纯,饱和度更高一些;P3 的纯赤色 #FF0000 在 sRGB 傍边没有方法展现出来,非要让它展现,它也只能用尽自己的全力,运用 #FF0000 这个色值来展现,但颜色却并不相同。更可怕的是,P3 颜色空间超出 sRGB 的挨近于纯红的一切颜色,都会被 sRGB 以 #FF0000 来展现,本来肉眼可区别的几个颜色,在 sRGB 里都变成了同一个颜色,会呈现颜色失真的问题。

  别的我们还能看出,赤色和绿色在这两个颜色空间中差异最大,也便是说假如选用蓝颜色作为界面主色的话,在不同的颜色空间设备上差异会小一些,相反,选用赤色和绿色,体现差异会比较大,越是饱和度高的红、绿色,差异越显着。

  所以我们说单是色值自身还不足以精确表达特定的颜色,我们需求色值合作它所在的颜色空间才干愈加精确的表达。

  接下来,我们简略了解一下几个典型的颜色空间,这也是我们在生活中或许会常常打交道的几个颜色空间(买手机、买显现器的时分假如留心的话会常常看到这些字眼):

  sRGB(Standard RGB)是由微软联合爱普生、惠普等联合开发的一个通用颜色规范,由于微软的强壮影响力,这一规范被许多厂商所选用,关于 Windows 和 Mac 来说,它是缺省的颜色形式,也是 HTML 3.2 、CSS 1.0 和 SVG 的规范颜色形式。也便是说,假如你输出的色值参数没有指明颜色空间,会默许以 sRGB 的颜色空间为他们匹配颜色。别的,一些不错的显现器,也会以 sRGB 作为颜色空间规范。

  NTSC 颜色空间要比 sRGB 大得多,不过这种颜色空间很少用于显现器设备,更多的是用于和其他颜色空间进行比较,然后描绘其他颜色空间的颜色掩盖率,比方:100% sRGB 相当于 72% NTSC,本颜色空间未在上图中标明。

  DCI P3 颜色空间是 2007 年 SMPTE 推出的颜色空间,这种颜色空间被广泛作为数字影院的颜色规范,也被许多手机屏幕、显现器作为颜色规范,在业界中假如没有明晰阐明的线 色域一般都是指 DCI P3。

  Adobe RGB 颜色空间是一种由 Adobe 公司开发的颜色空间,开发的意图是为包括 CMYK 五颜六色印刷颜色空间,然后能在显现器等设备的 RGB 颜色形式上较为精确地显现印刷颜色,它和 P3 相似,具有愈加广大的颜色空间,能展现更艳丽的颜色。现在现已被许多单反相机、显现器等设备作为规范。Adobe RGB 和 P3 各有所长,从上图中能够看出,Adobe RGB 在绿色上的体现更超卓,而 P3 则在赤色上的体现更杰出。

  一般 “色域” 一词会被常常用来指代 “颜色空间”,比方:“这个显现器选用的是 P3 色域”,这样表达是没有问题的,但假如更精确一点的话,“色域” 是指你的设备所能显现的颜色规模在某个 “颜色空间” 中所占的百分比。比方一个显现器的色域是 90% sRGB,那意思便是说,这个显现器能显现出的颜色规模在 sRGB 颜色空间中占了 90% 的面积。在同一颜色空间里,色域越高的显现器,所能显现的颜色规模就越广。

  了解了色域,你或许就知道今后该怎么选购显现器了,理论上色域越广,显现器的颜色复原度越高(当然色准、色深、亮度等也很重要)。

  别的我还制作了一个简略的图片能够协助你查看你当时运用的屏幕色域状况,图片是根据 P3 颜色空间制作的,图有 3 个与背景色挨近的表情大图标:

  假如你的显现设备能明晰区分第三个表情图标,阐明你的显现设备很优异,现已到达了 P3 或 Adobe RGB 色域规范;假如你的显现设备能含糊看到第二个浅笑图标,阐明你的显现设备还不错,现已到达了 100% sRGB 色域规范;假如只能看到第一个图标,阐明还没有到达近 100% sRGB 规范,运用该显现器从事对颜色比较灵敏的规划作业或许会受影响;假如连第一个都难以分辩若有若无,阐明你的显现器色域掩盖度比较差,有或许还不到90% sRGB,假如作业中常常与颜色打交道,主张替换。

  看不到上图中的图标,也不能彻底说显着现器就欠好,但至少能阐明色域掩盖比较差。真实看不见就别死盯着看了,伤眼睛。

  DIC P3 色域或许也看不到最后一个图标,这一点我还不太确认,由于我在 MIX 2S 手机屏上就看不到,但官网参数描绘 MIX 2S 的显现屏为 DCI P3 色域。我猜想是小米在含糊概念,由于并没写百分比,究竟 90% 的 P3 也算 P3,朴实猜想,假如有读者知道原因,欢迎点拨。

  或许在曩昔展开 UI 范畴的规划与开发作业时,即使我们不了解颜色空间的概念也没什么联系,实践作业中不呈现在太大的问题,可是选用广色域(P3、Adobe RGB)作为规范已然现已是电子设备的发展趋势,越来越多的厂商开端选用广色域来替代 sRGB 色域。假如我们仍旧不去进行颜色空间的适配和颜色办理,将会呈现越来越多的色差与颜色失真问题。即使我们仍旧选用 sRGB 颜色空间作为项意图主空间,我们也有必要清楚为什么要这么做,比较运用 P3 颜色空间有何不同… 这也是为什么 Sketch 在 48 版别新增颜色办理功用的首要原因。

  未来还或许会呈现各式各样新的颜色空间规范,为了使得不同的设备展现作用尽或许与规划共同或许尽或许发挥显现设备的才干,我们就有必要经过规划软件的颜色办理来进行颜色空间的设定。

  下一篇文章《颜色空间(三):颜色办理》的内容干货会比较多,我们将介绍:怎么在规划软件中进行颜色办理、怎么挑选合适自己的颜色空间等内容。

  感兴趣的小伙伴还能够加我微信,我们能够在群里进行一些日常学术交流(闲谈扯淡) 。