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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 详解舵机的基本原理以及控制方法「建议收藏」

    详解舵机的基本原理以及控制方法「建议收藏」文章目录什么是舵机?伺服控制硬件连接舵机规格SG90MG90SMG996R总结什么是舵机?舵机是伺服电机的一种,伺服电机就是带有反馈环节的电机,我们可以通过伺服电机进行精确的位置控制或者输出较高的扭矩;舵机也叫也叫RC伺服器,通常用于机器人项目,也可以在遥控汽车,飞机等航模中找到它们。类似舵机这样的伺服系统通常由小型电动机,电位计,嵌入式控制系统和变速箱组成。电机输出轴的位置由内部电位计不断采样测量,并与微控制器(例如STM32,Arduino)设置的目标位置进行比较;根据相应的偏差,控制

    2022年6月29日
    34
  • Ubuntu 更换国内源[通俗易懂]

    Ubuntu 更换国内源[通俗易懂]Ubuntu系统自带的源都是国外的网址,国内用户在使用的时候网速比较慢。一个软件的下载是十分痛苦的,这里讲解一下如何将国外源更换为国内源,让你的网速Biu.Biu.Biu1.备份原来的源sudocp/etc/apt/sources.list/etc/apt/sources_init.list将以前的源备份一下,以防以后可以用的。2.更换源sudogedi…

    2022年5月4日
    42
  • Teahour 以太坊专访-文字版

    Teahour 以太坊专访-文字版原文地址:http://ethfans.org/shaoping/articles/talk-with-jan-about-ehtereum本文是播客Teahour以太坊专访文字版,收听地址 http://teahour.fm/2016/01/19/talk-with-jan-about-ehtereum.html ,也可以在喜马拉雅、iTunes搜索Teahour收听。(前边的开

    2022年5月16日
    41
  • vue的双向绑定原理_vue2双向绑定原理

    vue的双向绑定原理_vue2双向绑定原理1、背景今天要讲的内容是Web前端框架vue.js中的一个细节,注意是细节哦,稍不留神就掉坑里了。由于这两天在公司开发前端vue页面,踩到了一个坑,这个坑不大不小的,但是对于我这种除非公司需要,否则不会主动学习前端技术的后端开发者来说,这个坑困扰了我半天时间。无论怎么修改代码,还是实现不了效果,归根结底还是没有找到问题的点所在。凡事都有好的一面,今天上午脑子就开了光,思路比昨天下午清晰多了,顺着思路,我终于发现了问题的点所在,然后百度一搜,果然是这样,嗨!于是我决定总结一番!大家都知道,vu

    2022年10月18日
    6
  • log4j.properties 详解与配置步骤[通俗易懂]

    log4j.properties 详解与配置步骤[通俗易懂]一、入门实例1.新建一个JAva工程,导入包log4j-1.2.17.jar,整个工程最终目录如下2、src同级创建并设置log4j.properties###设置###log4j.rootLogger=debug,stdout,D,E###输出信息到控制抬###log4j.appender.stdout=org.apache.log4j.ConsoleAp…

    2022年9月30日
    4
  • attempted to return null from_unable to process jar entry

    attempted to return null from_unable to process jar entry**Springboot启动时报错Ifyouwantanembeddeddatabase(H2,HSQLorDerby),pleaseputitontheclasspath.**产生这个错误的原因是springboot的自动配置,如果你没有配置DataSource就会导致下图这个错误解决方案1@SpringBootApplication(exclude…

    2022年9月23日
    7

发表回复

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

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