CSS rgb颜色产生原理 & 颜色对照表
2016-05-07 17:12
253 查看
转自：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就等于把调光旋钮开到最大。
我们一起来思考一些常用的各种颜色的rgb值，比如纯黑、纯白、最红色、最绿色、最蓝色、最黄色的RGB值各是多少？
黑色，因为屏幕上没有任何色光存在，相当于RGB三种色光都没有发光，所以黑色的RGB值是0,0,0。
白色，是RGB三种色光都发到最强的亮度，所以纯白的RGB值就是255,255,255。
最红色，意味着只有红色存在，且亮度最强，绿色和蓝色都不发光。因此最红色的数值是255,0,0。同理，最绿色就是0,255,0；而最蓝色就是0,0,255。
执行“窗口——颜色”，打开“颜色”面板，输入RGB值或者拖动R、G、B滑块查看颜色。
R、G、B值中没有黄色。那么黄色的RGB值是多少呢？要知道某个颜色具体的RGB值，就需要知道色彩的色相谱。
所谓色相就是指颜色的色彩种类，分别是：红色橙色黄色绿色青色蓝色紫色。这七种颜色头尾相接，形成一个闭合的环。
在上面这个色相环中，位于180度夹角的两种颜色(也就是圆的某条直径两端的颜色)，称为反转色，又称为互补色。互补的两种颜色之间是此消彼长的关系。
色相环中间是白色，如要得到最黄色，就需要把选色框向最黄色的方向移动，同时也逐渐远离最蓝色。当达到圆环黄色部分的边缘时，就是最黄色，同时离最蓝色也就最远了。由此得出，黄色＝白色－蓝色。用RGB值来运算：R（255-0），G（255-0），B（255-255），得到R255G255B0
通过上面色相环的相邻关系，我们还可以说:纯黄色＝纯红色＋纯绿色。
明白了上面这些原理，我们才知道各种颜色的rgb值的由来。
桃紅~紛紅
紫
褐~橘~米白
金~黃
~黃
綠
藍
黑~灰~白
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就等于把调光旋钮开到最大。
我们一起来思考一些常用的各种颜色的rgb值，比如纯黑、纯白、最红色、最绿色、最蓝色、最黄色的RGB值各是多少？
黑色，因为屏幕上没有任何色光存在，相当于RGB三种色光都没有发光，所以黑色的RGB值是0,0,0。
白色，是RGB三种色光都发到最强的亮度，所以纯白的RGB值就是255,255,255。
最红色，意味着只有红色存在，且亮度最强，绿色和蓝色都不发光。因此最红色的数值是255,0,0。同理，最绿色就是0,255,0；而最蓝色就是0,0,255。
执行“窗口——颜色”，打开“颜色”面板，输入RGB值或者拖动R、G、B滑块查看颜色。
R、G、B值中没有黄色。那么黄色的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 |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- div+css3绘制基本图形
- CSS三列自适应布局
- CSS中background:url(图片) 不能显示的问题
- 实现CSS等分布局的4种方式
- [CSS3] CSS :target Selector
- Flex 布局教程:语法篇
- CSS position 定位
- css学习小结
- CSS小技巧
- 关于纯css实现简单的下拉菜单
- css的继承性
- Css的优先级
- Css的优先级
- Css的优先级
- Css的优先级
- 可否控制<link type=text/css rel=stylesheet href=style.css>
- 让两个<div>在一个<div>里水平显示
- CSS HACK
- 毕设笔记--CSS样式修改
- 前端学习 CSS定位属性整理