CSS rgb颜色产生原理 & 颜色对照表

CSS rgb颜色产生原理 & 颜色对照表本文转自:http://www.cnblogs.com/iteakey/articles/3016093.htmlHTMLCSS颜色对照表FFFFFF#DDDDDD#AAAAAA#888888#666666#444444#000000#FFB7DD#FF88C2#FF44AA#FF0088#C10066#A2

大家好,又见面了,我是你们的朋友全栈君。

转自:http://www.cnblogs.com/iteakey/articles/3016093.html

http://www.ittribalwo.com/article/1945.html


获取各种颜色的rgb值

  我们在屏幕上看到的任何一个颜色都可以有一组RGB值来记录和表达。

  从物理光学试验中得出:红、绿、蓝三种色光以不同比例的混合几乎可以得出自然界所有的颜色。

  一种颜色的数值一般用这种颜色的RGB值来表示。RGB值指某种颜色中的红(Red)、绿(Green)、蓝(Blue)成分。

  RGB的所谓多少就是指亮度,并且使用整数来表示。RGB各有256级亮度,用数字0、1、2……255

  按照计算,256级的RGB色彩总共能组合出约1678万种色彩,即256×256×256=16777216。通常也被简称为1600万色或千万色。也称为24位色(2的24次方)。

  对于单独的R或G或B而言,当数值为0的时候,代表这个颜色不发光;如果为255,则该颜色为最高亮度。这就好像调光台灯一样,数字0就等于把灯关了,数字255就等于把调光旋钮开到最大。

RGBA颜色表示:RGBA(R,G,B,A)

   RGBA 值:

  R – 红色(取值为0-255的正整数 | 百分数)
  G – 绿色(取值为0-255的正整数 | 百分数)
  B – 蓝色(取值为0-255的正整数 | 百分数)
  A – alpha 透明度(取值为0~1,0表示透明,1表示不透明)

  我们一起来思考一些常用的各种颜色的rgb值,比如纯黑、纯白、最红色、最绿色、最蓝色、最黄色的RGB值各是多少?

  黑色,因为屏幕上没有任何色光存在,相当于RGB三种色光都没有发光,所以黑色的RGB值是0,0,0。

  白色,是RGB三种色光都发到最强的亮度,所以纯白的RGB值就是255,255,255。

  最红色,意味着只有红色存在,且亮度最强,绿色和蓝色都不发光。因此最红色的数值是255,0,0。同理,最绿色就是0,255,0;而最蓝色就是0,0,255。

  在Phottoshop中执行“窗口——颜色”,打开“颜色”面板,输入RGB值或者拖动R、G、B滑块查看颜色。

金色的rgb值

  R、G、B值中没有黄色。那么黄色的RGB值是多少呢?要知道某个颜色具体的RGB值,就需要知道色彩的色相谱。

  所谓色相就是指颜色的色彩种类,分别是:红色橙色黄色绿色青色蓝色紫色。这七种颜色头尾相接,形成一个闭合的环。

各种颜色的rgb值

  在上面这个色相环中,位于180度夹角的两种颜色(也就是圆的某条直径两端的颜色),称为反转色,又称为互补色。互补的两种颜色之间是此消彼长的关系。

  色相环中间是白色,如要得到最黄色,就需要把选色框向最黄色的方向移动,同时也逐渐远离最蓝色。当达到圆环黄色部分的边缘时,就是最黄色,同时离最蓝色也就最远了。由此得出,黄色=白色-蓝色。用RGB值来运算:R(255-0),G(255-0),B(255-255),得到R255G255B0

  通过上面色相环的相邻关系,我们还可以说:纯黄色=纯红色+纯绿色。

  明白了上面这些原理,我们才知道各种颜色的rgb值的由来。


HTML CSS颜色对照表

FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000
#FFB7DD #FF88C2 #FF44AA #FF0088 #C10066 #A20055 #8C0044
#FFCCCC #FF8888 #FF3333 #FF0000 #CC0000 #AA0000 #880000
#FFC8B4 #FFA488 #FF7744 #FF5511 #E63F00 #C63300 #A42D00
#FFDDAA #FFBB66 #FFAA33 #FF8800 #EE7700 #CC6600 #BB5500
#FFEE99 #FFDD55 #FFCC22 #FFBB00 #DDAA00 #AA7700 #886600
#FFFFBB #FFFF77 #FFFF33 #FFFF00 #EEEE00 #BBBB00 #888800
#EEFFBB #DDFF77 #CCFF33 #BBFF00 #99DD00 #88AA00 #668800
#CCFF99 #BBFF66 #99FF33 #77FF00 #66DD00 #55AA00 #227700
#99FF99 #66FF66 #33FF33 #00FF00 #00DD00 #00AA00 #008800
#BBFFEE #77FFCC #33FFAA #00FF99 #00DD77 #00AA55 #008844
#AAFFEE #77FFEE #33FFDD #00FFCC #00DDAA #00AA88 #008866
#99FFFF #66FFFF #33FFFF #00FFFF #00DDDD #00AAAA #008888
#CCEEFF #77DDFF #33CCFF #00BBFF #009FCC #0088A8 #007799
#CCDDFF #99BBFF #5599FF #0066FF #0044BB #003C9D #003377
#CCCCFF #9999FF #5555FF #0000FF #0000CC #0000AA #000088
#CCBBFF #9F88FF #7744FF #5500FF #4400CC #2200AA #220088
#D1BBFF #B088FF #9955FF #7700FF #5500DD #4400B3 #3A0088
#E8CCFF #D28EFF #B94FFF #9900FF #7700BB #66009D #550088
#F0BBFF #E38EFF #E93EFF #CC00FF #A500CC #7A0099 #660077
#FFB3FF #FF77FF #FF3EFF #FF0 0FF #CC00CC #990099 #770077
顏色名稱 代碼

顏色

maroon #800000
darkred #8B0000
brown #A52A2A
firebrick #B22222
crimson #DC143C
red #FF0000

桃紅~紛紅

顏色名稱 代碼

顏色

mediumvioletred #C71585
palevioletred #D87093
deeppink #FF1493
fuchsia(magenta) #FF00FF
hotpink #FF69B4
pink #FFC0CB
lightpink #FFB6C1
mistyrose #FFE4E1
lavenderblush #FFF0F5


顏色名稱 代碼

顏色

indigo #4B0082
purple #800080
darkmagenta #8B008B
darkorchid #9932CC
blueviolet #8A2BE2
darkviolet #9400D3
slateblue #6A5ACD
mediumpurple #9370DB
mediumslateblue #7B68EE
mediumorchid #BA55D3
violet #EE82EE
plum #DDA0DD
thistle #D8BFD8
lavender #E6E6FA

褐~橘~米白

顏色名稱 代碼

顏色

saddlebrown #8B4513
sienna #A0522D
chocolate #D2691E
indianred #CD5C5C
rosybrown #BC8F8F
lightcorol #F08080
salmon #FA8072
lightsalmon #FFA07A
orangered #FF4500
tomato #FF6347
coral #FF7F50
darkorange #FF8C00
sandybrown #F4A460
peru #CD853F
tan #D2B48C
burlywood #DEB887
wheat #F5DEB3
moccasin #FFE4B5
navajowhite #FFDEAD
peachpuff #FFDAB9
bisque #FFE4C4
antuquewhite #FAEBD7
papayawhip #FFEFD5
cornsilk #FFF8DC
oldlace #FDF5E6
linen #FAF0E6
seashell #FFF5EE
snow #FFFAFA
floralwhite #FFFAF0
ivory #FFFFF0
mintcream #F5FFFA

金~黃

顏色名稱 代碼

顏色

darkgoldenrod #B8860B
goldenrod #DAA520
gold #FFD700
yellow #FFFF00
darkkhaki #BDB76B
khaki #F0E68C
palegoldenrod #EEE8AA
beige #F5F5DC
lemonchiffon #FFFACD
lightgoldenrodyellow #FAFAD2
lightyellow #FFFFE0

~黃

顏色名稱 代碼

顏色

darkslategray #2F4F4F
darkolivegreen #556B2F
olive #808000
darkgreen #006400
forestgreen #228B22
seagreen #2E8B57
green(teal) #008080
lightseagreen #20B2AA
madiumaquamarine #66CDAA
mediumseagreen #3CB371
darkseagreen #8FBC8F
yellowgreen #9ACD32
limegreen #32CD32
lime #00FF00
chartreuse #7FFF00
lawngreen #7CFC00
greenyellow #ADFF2F
mediumspringgreen #00FA9A
springgreen #00FF7F
lightgreen #90EE90
palegreen #98F898
aquamarine #7FFFD4
honeydew #F0FFF0

顏色名稱 代碼

顏色

midnightblue #191970
navy #000080
darkblue #00008B
darkslateblue #483D8B
mediumblue #0000CD
royalblue #4169E1
dodgerblue #1E90FF
cornflowerblue #6495ED
deepskyblue #00BFFF
lightskyblue #87CEFA
lightsteelblue #B0C4DE
lightblue #ADD8E6
steelblue #4682B4
darkcyan #008B8B
cadetblue #5F9EA0
darkturquoise #00CED1
mediumturquoise #48D1CC
turquoise #40E0D0
skyblue #87CECB
powderblue #B0E0E6
paleturquoise #AFEEEE
lightcyan #E0FFFF
azure #F0FFFF
aliceblue #F0F8FF
aqua(cyan) #00FFFF

黑~灰~白

 

顏色名稱 代碼

顏色

black #000000
dimgray #696969
gray #808080
slategray #708090
lightslategray #778899
darkgray #A9A9A9
silver #C0C0C0
lightgray #D3D3D3
gainsboro #DCDCDC
whitesmoke #F5F5F5
ghostwhite #F8F8FF
white


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/145372.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • centos7 本地yum源配置_centos官方yum源

    centos7 本地yum源配置_centos官方yum源准备上面三个文件。[root@localhost~]#yuminstall-ylibxml2-python-2.9.1-5.el7_0.1.x86_64.rpm[root@localhost~]#yuminstall-ycreaterepo-0.4.11-3.el5.noarch.rpm使用createrepo–version命令查看是否安装成功,出现…

    2022年8月13日
    4
  • 彻底理解js中的闭包

    彻底理解js中的闭包闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,那么什么是闭包呢?它又有什么用呢?我们都知道,js的作用域分两种,全局和局部,基于我们所熟悉的作用域链相关知识,我们知道在js作用域环境中访问变量的权利是由内向外的,内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量,反之则不能,也就是说在外层作用域下无法获取内层作用域下的变量,同样在不同的…

    2022年6月24日
    22
  • 排序算法总结

    排序算法总结

    2022年1月4日
    47
  • 研究发现VR有效地减少了不舒服的医疗过程中的痛苦_怎样照顾半身不遂的病人

    研究发现VR有效地减少了不舒服的医疗过程中的痛苦_怎样照顾半身不遂的病人VR虚拟现实到底给了半身不遂的病人什么?

    2022年4月21日
    39
  • 联想笔记本电脑键盘灯怎么开启_联想笔记本电脑的键盘背光怎么打开[通俗易懂]

    联想笔记本电脑键盘灯怎么开启_联想笔记本电脑的键盘背光怎么打开[通俗易懂]展开全部1、联想笔记本部分型号具备键盘背光功能,方法通过“FN+空格”打开,支持62616964757a686964616fe78988e69d8331333431336664此功能的机型,键盘上有相应标示。部分早期的Thinkpad笔记本电脑若带有键盘灯,需要通过“Fn+PageUp”组合键开启。发现电脑键盘的“Space(空格键)”按键上有下图所示的标识符号电脑一般带有键盘背光,使用”Fn+…

    2022年9月20日
    0
  • C# 多线程 ThreadStart和ParameterizedThreadStart

    C# 多线程 ThreadStart和ParameterizedThreadStart线程是轻量级进程。一个使用线程的常见实例是现代操作系统中并行编程的实现。使用线程节省了CPU周期的浪费,同时提高了应用程序的效率。每个线程都定义了一个独特的控制流。如果应用程序涉及到复杂的和耗时的操作,那么设置不同的线程执行路径往往是有益的,每个线程执行特定的工作。线程生命周期线程生命周期开始于System.Threading.Thread类的对象被创建时,结束于线程被终止或完成执行时。线程生命周期中的各种状态:未启动状态:当线程实例被创建但Start方法未被调用时的状况。就绪状态:

    2022年7月15日
    19

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号