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


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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 2021年电子设计大赛预测–球形机器人设计方案

    随着2021年电赛的临近和清单的出炉,各参赛队伍都在紧张的备赛当中。然而在电赛清单中,我们能看到一个比较特别的器件–空心透明球。这个器件的特别之处在于它的吃尺寸过大,以至于让人摸不着头脑。在网上看过很多预测,关于这个球的预测大家也是众说纷纭。那么现在就根据预测的最多的一种情况–球形机器人,来进行简单的设计方案分析。准备材料三个直流电机,一个舵机,飞轮一片,空心透明亚克力球(直径在20~30cm),TB6612电机驱动模块两片,STM32F1最小系统板一块,杜邦线若…

  • js数组怎么删除指定元素_给数组添加一个元素的方法

    js数组怎么删除指定元素_给数组添加一个元素的方法js数组是js部分非常重要的知识,有时我们有这么个需求js数组删除指定元素,先定义一个函数来获取删除指定元素索引值,然后用js数组删除的方法,来删除指定元素即可,就两步不难,很简单。1、JS的数组对象定义一个函数,用于查找指定的元素在数组中的位置,也就是索引值,代码如下: 1 2 3 4 5 6 Array….

  • Spring整合Hibernate的步骤

    Spring整合Hibernate的步骤

  • 4种基站相关概念——宏基站、微基站、皮基站、飞基站

    根据3GPP组织的规则,无线基站分为4类,分别是宏基站、微基站、皮基站和飞基站。4种基站的区别如下表格所示:类型 单载波发射功率(20MHz带宽) 覆盖能力(覆盖半径) 名称 英文名 别称 宏基站 MacroSite 宏站 10W以上 200米以上 微基站 MicroSite 微站 500mW-10W 50~200米 皮基站 PicoSite 微微站 企业级小基站

  • C# WinForm 设置DataGridView选中指定行

    C# WinForm 设置DataGridView选中指定行introwIndex=3;//指定行号this.dgvInGoodsInfo.Rows[rowIndex].Selected=true;this.dgvInGoodsInfo.CurrentCell=this.dgvInGoodsInfo.Rows[rowIndex].Cells[2];也有其他网友代码Cells[0];如下:我试了,填0和1调试报…

  • Unity3D中Isometric Tilemap功能实践「建议收藏」

    Unity3D中Isometric Tilemap功能实践「建议收藏」前言最近出于兴趣想自己做一个2D的游戏,因为有着C的基础,所以决定使用Unity3D来做。之前对于Unity3D其实了解不多,不过看了一些Unity3D的视频和官方文档后,暂时做起来也没遇到什么

发表回复

您的电子邮箱地址不会被公开。

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