RGB的三维模型与渐变色-颜色系列之一

一、前言

以下与颜色相关的日志记录了俺学习颜色的有关容,限于编写时的水平,难免存在缺点与错误,希望得到朋友、同行和前辈的指教,非常感谢。
1.  RGB的三维模型与渐变色-颜色系列之一
2.  《颜色代码自调器》的构成及其操作-颜色系列之二
3.  H型各颜色代码渐变的调色规律-颜色系列之三
4. 教你如何分析颜色代码的颜色-颜色系列之四
5. GIF综述及彩信格式-颜色系列之五
6.  颜色代码-色卡-带中文名颜色代码汇总-颜色系列之六

7.  十六进制速记的html颜色代码-已命名颜色

二、问题的提出

在《RGB色彩模式》里,有这样的介绍:

RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。

  RGB色彩模式使用RGB模型为图像中每一个像素的RGB分量分配一个0~255范围内的强度值。RGB图像只使用三种颜色,就可以使它们按照不同的比例混合,在屏幕上重现16777216种颜色。

  在 RGB 模式下,每种 RGB 成分都可使用从 0(黑色)到 255(白色)的值。 例如,亮红色使用 R 值 255、G 值 0 和 B 值 0。 当所有三种成分值相等时,产生灰色阴影。 当所有成分的值均为 255 时,结果是纯白色;当该值为 0 时,结果是纯黑色。 

三、 建立渐变色的立方体(三维)模型

依据以上资料,确定原点为黑色、顶点为白色和三条坐标轴的顶点分别为R-红、G-绿、B-蓝,那么其它3个顶点的颜色也就确定了,绘出连颜色代码[255-ff,(255,255,255)-ffffff-fff]一起的立方体如下图所示。

上图是参照F8的颜色样式代码数列《0-3-6-9-c-f》绘制的,其差为:(2e)=3*16+3=51,用此差值分割大立方体,便得到6*6*6=216个小立方体,每个小立方体代表着一种渐变色。

四、 根据立方体六个面的顶点颜色做出该平面的渐变颜色如下


1.  黑-绿-蓝-青面的中立方颜色渐变如下表

           
           
           
           
           
           

2.  黑-红-蓝-紫面的中立方颜色渐变如下表

           
           
           
           
           
           

3.  黑-绿-红-黄面的中立方颜色渐变如下表

           
           
           
           
           
           

4.  红-黄-紫-白面的中立方颜色渐变如下表

           
           
           
           
           
           

5.  绿-青-黄-白面的中立方颜色渐变如下表

           
           
           
           
           
           

6.  蓝-青-紫-白面的中立方颜色渐变如下表

           
           
           
           
           
           

五、 将以上6个面的立方体外观渐变颜色组合的大立方体全貌

从下图可以数出黑-白-红-绿-蓝-黄-青-紫各颜色与后一种颜色之间的渐变,共有7+6+5+4+3+2+1=28种基本渐变关系。

六、 立方体六个面的外观渐变颜色代码   


1.  蓝-青-黑-绿面的中立方颜色渐变如下表

0f0 0f3 0f6 0f9 0fc 0ff
0c0 0c3 0c6 0c9 0cc 0cf
090 093 096 099 09c 09f
060 063 066 069 06c 06f
030 033 036 039 03c 03f
000 003 006 009 00c 00f

2.  黑-红-蓝-紫面的中立方颜色渐变如下表

f00 f03 f06 f09 f0c f0f
c00 c03 c06 c09 c0c c0f
900 903 906 909 90c 90f
600 603 606 609 60c 60f
300 303 306 309 30c 30f
000 003 006 f09 f0c 00f

3.  黑-绿-红-黄面的中立方颜色渐变如下表

0f0 3f0 6f0 9f0 cf0 ff0
0c0 3c0 6c0 9c0 cc0 fc0
090 390 690 990 c90 f90
060 360 660 960 c60 f60
030 330 630 930 c30 f30
000 300 600 900 c00 f00

4.  红-黄-紫-白面的中立方颜色渐变如下表

ff0  ff3 ff6 ff9 ffc fff
fc0 fc3 fc6 fc9 fcc fcf
f90 f93 f96 f99 f9c f9f
f60 f63 f66 f69 f6c f6f
f30 f33 f36 f39 f3c f3f
f00 f03 f06 f09 f0c f0f

5.  绿-青-黄-白面的中立方颜色渐变如下表

0ff 3ff 6ff 9ff cff fff
0fc 3fc 6fc  9fc cfc ffc
0f9 3f9 6f9 9f9 cf9 ff9
0f6 3f6 6f6 9f6 cf6 ff6
0f3 3f3 6f3 9f3 cf3 ff3
0f0 3f0 6f0 9f0 cf0 ff0

6.  紫-白-蓝-青面的中立方颜色渐变如下表

0ff 3ff 6ff 9ff cff fff
0cf 3cf 6cf 9cf ccf fcf
09f 39f 69f 99f c9f f9f
06f 36f 66f 96f c6f f6f
03f 33f 63f 93f c3f f3f
00f 30f 60f 90f c0f f0f

七、红-黄-紫-白面及以下各层小立方的颜色渐变及代码


1. 该层第1个字母“f”层

ff0  ff3 ff6 ff9 ffc fff
fc0 fc3 fc6 fc9 fcc fcf
f90 f93 f96 f99 f9c f9f
f60 f63 f66 f69 f6c f6f
f30 f33 f36 f39 f3c f3f
f00 f03 f06 f09 f0c f0f

2. 以下第1个字母“c”层

cf0 cf3 cf6 cf9 cfc cff
cc0 cc3 cc6 cc9 ccc ccf
c90 c93 c96 c99 c9c c9f
c60 c63 c66 c69 c6c c6f
c30 c33 c36 c39 c3c c3f
c00 c03 c06 c09 c0c c0f

3. 以下第1个字母“9”层

9f0 9f3 9f6 9f9 9fc 9ff
9c0 9c3 9c6 9c9 9cc 9cf
990 993 996 999 99c 99f
960 963 966 969 96c 96f
930 933 936 939 93c 93f
900 903 906 909 90c 90f

4. 以下第1个字母“6”层

6f0 6f3 6f6 6f9 6fc 6ff
6c0 6c3 6c6 6c9 6cc 6cf
690 693 696 699 69c 69f
660 663 666 669 66c 66f
630 633 636 639 63c 63f
600 603 606 609 60c 60f

5. 以下第1个字母“3”层

3f0 3f3 cf6 3f9 3fc 3ff
3c0 3c3 3c6 3c9 3cc 3cf
390 393 396 399 39c 39f
360 363 366 369 36c 36f
330 333 336 339 33c 33f
300 303 306 309 30c 30f

6. 以下第1个字母“0”层

0f0 0f3 0f6 0f9 0fc 0ff
0c0 0c3 0c6 0c9 0cc 0cf
090 093 096 099 09c 09f
060 063 066 069 06c 06f
030 033 036 039 03c 03f
000 003 006 009 00c 00f

八、 讨论

以上6层渐变颜色,当顺时针旋转90°就与下图( F8颜色样式的截图)相对应了,也与俺的日志《《颜色代码自调器》的构成及其操作》里的6个菱形颜色渐变组件是对应的。

上排从左至右:第1组  #000000(黑)-#00FFFF(青)--相当于第1个字母“0”层。

第2组   #330000-#33FFFF --相当于第1个字母“3”层。

第3组   #660000-#66FFFF--相当于第1个字母“6”层。

下排从左至右:第4组  #990000-#99FFFF -- 相当于第1个字母“9”层。

第5组  #CC0000-#CCFFFF --相当于第1个字母“c”层。

第6组   #FF0000(红)-#FFFFFF(白)--相当于第1个字母“f”层。

九、 16*16红-黄-紫-白面颜色渐变代码

ff0 ff1 ff2 ff3 ff4 ff5 ff6 ff7 ff8 ff9 ffa ffb ffc ffd ffe fff
fe0 fe1 fe2 fe3 fe4 fe5 fe6 fe7 fe8 fe9 fea feb fec fed fee fef
fd0 fd1 fd2 fd3 fd4 fd5 fd6 fd7 fd8 fd9 fda fdb fdc fdd fde fdf
fc0 fc1 fc2 fc3 fc4 fc5 fc6 fc7 fc8 fc9 fca fcb fcc fcd fce fcf
fb0 fb1 fb2 fb3 fb4 fb5 fb6 fb7 fb8 fb9 fba fbb fbc fbd fbe fbf
fa0 fa1 fa2 fa3 fa4 fa5 fa6 fa7 fa8 fa9 faa fab fac fad fae faf
f90 f91 f92 f93 f94 f95 f96 f97 f98 f99 f9a f9b f9c f9d f9e f9f
f80 f81 f82 f83 f84 f85 f86 f87 f88 f89 f8a f8b f8c f8d f8e f8f
f70 f71 f72 f73 f74 f75 f76 f77 f78 f79 f7a f7b f7c f7d f7e f7f
f60 f61 f62 f63 f64 f65 f66 f67 f68 f69 f6a f6b f6c f6d f6e f6f
f50 f51 f52 f53 f54 f55 f56 fb7 f58 f59 f5a f5b f5c f5d f5e f5f
f40 f41 f42 f43 f44 f45 f46 f47 f48 f49 f4a f4b f4c f4d f4e f4f
f30 f31 f32 f33 f34 f35 f36 f37 f38 f39 f3a f3b f3c f3d f3e f3f
f20 f21 f22 f23 f24 f25 f26 f27 f28 f29 f2a f2b f2c f2d f2e f2f
f10 f11 f12 f13 f14 f15 f16 f17 f18 f19 f1a f1b f1c f1d f1e f1f
f00 f01 f02 f03 f04 f05 f06 f07 f08 f09 f0a f0b f0c f0d f0e f0f

十、 将上面的代码和框线都去掉时

虽然是按{(11)=16*1+1=17}颜色差绘制的颜色渐变表,用肉眼看就有很好的连续性,很难分辨出任意一处大一些颜色差,比如#f02-f05(或f32){(33)=16*3+3=51}范围内的颜色差别,所以,立方体颜色渐变没有细分得太小的必要,这就是花费那么多时间将代码和框线去掉要说明的。

                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
 
十一、 关于CMYK色彩模式
RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。           CMYK也称作印刷色彩模式,是一种依靠反光的色彩模式,和RGB类似,CMY是3种印刷油墨名称的首字母:青色Cyan、品红色Magenta、黄色Yellow。而K取的是black最后一个字母,之所以不取首字母,是为了避免与蓝色(Blue)混淆。从理论上来说,只需要CMY三种油墨就足够了,它们三个加在一起就应该得到黑色。但是由于目前制造工艺还不能造出高纯度的油墨,CMY相加的结果实际是一种暗红色。 
RGB 是人眼可见光的三原色这种颜色模式主要用于发光显示设备。            CMY 是物质的三原色加上K 就成了彩色印刷时用的四种油墨的颜色。            虽然是两种色彩系统但如果没有光物质就无法呈现各种颜色;如果没有物质除了光源之外的部分就是一片黑暗。所以这两个系统其实是一个系统!
时间: 2024-10-15 22:31:36

RGB的三维模型与渐变色-颜色系列之一的相关文章

C# RGB与16进制颜色转换方法

http://www.cnblogs.com/goldarch/archive/2010/08/16/1801053.html #region [颜色:16进制转成RGB]        /// <summary>        /// [颜色:16进制转成RGB]        /// </summary>        /// <param name="strColor">设置16进制颜色 [返回RGB]</param>       

【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变

颜色插值指的是给出两个 RGB 颜色值,两个颜色之间的值通过插值函数计算得到.线性渐变是添加到 SVG 图形上的过滤器,只需给出两端的颜色值即可. 1. 颜色插值 在[高级 - 第 5.0 章]里已经提到了颜色插值,在这里做一个例子.先定义颜色插值函数如下, var a = d3.rgb(255,0,0); //红色 var b = d3.rgb(0,255,0); //绿色 var compute = d3.interpolate(a,b); 如此一来,compute 可当做函数使用,参数的范

颜色的RGB值

        各种金属颜色的RGB值,正确的颜色会有更好的表现效果 铝箔 180,180,180 铝箔(钝) 180,180,180 铝 220,223,227 磨亮的铝 220,223,227 黄铜 191,173,111 磨亮的黄铜 191,173,111 镀铬合金 150,150,150  镀铬合金2 220,230,240  镀铬铝 220,230,240  镀铬塑料 220,230,240  镀铬钢 220,230,240   纯铬 220,230,240   铜 186,110,6

【 D3.js 高级系列 — 5.0 】 颜色

颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值. RGB色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加来得到各式各样的颜色.三个通道的值的范围都为0~255,因此总共能表示16777216(256 * 256 * 256)种,即一千六百多万种.几乎包括了人类所能识别的所有颜色,是最广泛也是最容易理解的颜色系统之一. HSL色彩模式是通过对色相(Hue).饱和度(Saturation).明度(Ligh

【 D3.js 高级系列 — 6.0 】 值域和颜色

在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路 例如,有值域的范围为: [10, 500] 现希望10用浅绿表示,500用深绿表示,10到500之间的值用浅绿和深绿之间的颜色表示.显然,此处需要一个函数,传入的参数是10到500之间的值,返回值是浅绿到深绿之间的颜色值. [高级 - 第 5.1 章]介绍的颜色插值函数正好可以派上用场. var palegreen = d3.rgb(66,2

c#如何获取excel单元格的RGB颜色

这段时间一直在做office的工作.前2天获取单元格的颜色的问题一直没搞明白. 开始我想用的就是Npoi.主要前一部分的工作都是用Npoi完成的 row.GetCell(j).CellStyle.FillBackgroundColorColor 获取IColor接口.通过IColor的RGB属性获取可是经过大量用例测试这里获取的rgb并不准确只有部分颜色对的上. 如图 后来我甚至问了npoi的创始人也没有给我一个明确的回复. 我自己猜测因为row.GetCell(j).CellStyle.Fil

D3.js绘制 颜色:RGB、HSL和插值 (V3版本)

颜色和插值 计算机中的颜色,常用的标准有RGB和HSL. RGB:色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加来得到额各式各样的颜色.三个通道的值得范围都是0~255,因此总共能表示16777216(255*255*255)种,即一千六百多万种颜色.几乎包括了人类所能识别的所有颜色,是应用最广泛的色彩模式. HSL:色彩模式是通过色相(Hue).饱和度(Saturation).明度(Lightness)三个通道的相互叠加来得到各种颜色的.其中,色相的范围为0

Java知多少(96)绘图之设置字型和颜色

Java绘图中,显示文字的方法主要有三种:(1)drawString(String str,int x,int y):在指定的位置显示字符串.(2)drawChars(char data[],int offset,int length, int x, int y):在指定的位置显示字符数组中的文字,从字符数组的offset位置开始,最多显示length个字符.(3)drawBytes(byte data[],int offset,int length,int x,int y), 在指定的位置显示

2-4 Sass的函数功能-颜色函数

RGB颜色函数-RGB()颜色函数 在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等.在这章节中,将主要和大家一起探讨 Sass 颜色函数中常见的 RGB.HSL 和 Opacity 函数. 1.RGB颜色函数 RGB 颜色只是颜色中的一种表达式,其中 R 是 red 表示红色,G 是 green 表示绿色而 B 是