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)
blank

相关推荐

  • 常见的数据交换方式有电路交换,报文交换_电路交换网络有哪些

    常见的数据交换方式有电路交换,报文交换_电路交换网络有哪些Q:如何实现数据通过网络核心从源主机到达目的主机(互联的路由器网络)A:采用的方法:数据交换网络结构包括网络边缘、接入网络和网络核心网络核心主要解决的问题就是将源主机发送数据送达目的主机对于一

  • 台式机dp接口_科普短文,高清晰音视频传输DP接口简单介绍

    DP是DisplayPort的缩写,是一种高清晰音视频流的传输接口。DisplayPort是由视频电子标准协会(VESA)发布的显示接口。作为DVI的继任者,DisplayPort能够传输未经压缩的视频和音频信号,并且支持更高的分辨率和刷新率。2006年5月,视频电子标准协会(VESA)制定了1.0版标准,随后陆续升级出现了1.1版、1.2版、1.3版、1.4版等。DisplayPort的出现赢得…

  • R、RStudio下载与安装方法

    R、RStudio下载与安装方法现如今,R语言是统计领域广泛使用的工具,是属于GNU系统的一个自由、免费、源代码开放的软件,是用于统计计算和统计绘图的优秀工具。而RStudio是R的集成开发环境,用它进行R编程的学习和实践会更加轻松和方便。下面就教大家如何下载并安装R和RStudio,比较简单。R的维护工作由一个国际化的开发者团队负责。R软件的官方下载页面叫作TheComprehensiveRArchiveNetwor…

  • 包管理器Bower使用手冊之中的一个

    包管理器Bower使用手冊之中的一个

    2021年11月14日
  • CentOS7安装MySQL(完整版)

    CentOS7安装MySQL(完整版)在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉MariaDB。1下载并安装MySQL官方的YumRepository[root@localhost~]#wget-i-chttp://dev.mysql.com/get/mysql57-community-release-…

  • springboot项目启动原理_相关滤波器的基本原理

    springboot项目启动原理_相关滤波器的基本原理一、springboot启动原理及相关流程概览springboot是基于spring的新型的轻量级框架,最厉害的地方当属自动配置。那我们就可以根据启动流程和相关原理来看看,如何实现传奇的自动配置二、springboot的启动类入口用过springboot的技术人员很显而易见的两者之间的差别就是视觉上很直观的:springboot有自己独立的启动类(独立…

发表回复

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

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