CSS颜色介绍

威廉·克雷格
~ 8分钟阅读
WebFX总裁。Bill在互联网营销行业有超过25年的经验，专门从事SEO, UX，信息架构，营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

在本指南中，我们将介绍使用CSS指定颜色的所有可用方法。有六种方法来声明CSS的颜色:

十六进制记数法
RGB
RGBA
奥软
HSLA
颜色关键词

十六进制

例子

Div {background-color:# 000000；｝

结果

十六进制颜色表示法是一种通过表示红色、绿色和蓝色(RGB)的数量来声明一种颜色的方法。这种颜色表示法基于十六进制数字系统(以16为基数)。

我们更习惯于十进制(以10为基数)，所以十六进制在一开始理解起来有点棘手。在上面的例子中，黑色被声明为# 000000，这意味着它没有红色、绿色或蓝色。(色彩理论告诉我们，没有任何颜色就是黑色。)在CSS十六进制颜色表示法:

数量红色的由前两个字符
数量绿色由后两个字符
数量蓝色的由最后两个字符

如何阅读十六进制颜色符号有效的CSS十六进制颜色以散列(＃)后接六个或三个字。

字符可以在0-9和A-F(或小写的A-F)之间。的最小值每个颜色通道的值为00，在十进制中等于0。的最大值每个颜色通道的值为FF，在十进制中等于255。

知道了这些，如果我们指定黑色的,那么:

红色的	绿色	蓝色的	十六进制表示法
00(十进制0)	00(十进制0)	00(十进制0)	`# 000000`

如果我们想要蓝色的？我们可以将蓝色的数量设置为最大值(即FF):

红色的	绿色	蓝色的	十六进制表示法
00(十进制0)	00(十进制0)	FF(十进制255)	`# 0000 ff`

结果

我们可以简单地通过调整颜色中红色、绿色和蓝色的数量来指定大量的颜色。

假设我们想要得到颜色紫色的．我们可以把一点红色和一点蓝色混合在一起，然后去掉任何绿色。

红色的	绿色	蓝色的	十六进制表示法
80(十进制128)	00(十进制0)	80(十进制128)	`# 800080`

结果

在十六进制颜色表示法中，两个相同的连续字符可以缩短为一个字符。

这就是为什么CSS十六进制颜色符号也可以用3个字符来写。例如:

#就和# F0F
# DDCC11和# DC1
# 000000和# 000
# FFFFFF和# FFF

对于字母字符，可以使用小写。例如:

# FFFFFF和# ffffff
# C0C0C0和# c0c0c0
#六边形ABCDEF和#六边形abcdef

RGB

例子

Div {background-color:Rgb (0,0,0);｝

结果

十进制是我们最习惯使用的十进制。

这通常是我们在学校学到的系统，也是我们世界中大多数数字的显示方式。另一方面，十六进制数字系统并不是主流;在计算机编程和数学相关领域之外，它很少被使用。RGB颜色表示法是一种更直观的声明CSS颜色的方法，因为它使用十进制数字系统。

语法格式为:

Rgb(红、绿、蓝)

好的，我们已经知道了

0是最小的十进制值
255是十进制的最大值

蓝色的可以指定为:

红色的	绿色	蓝色的	RGB颜色表示法
0	0	255	`Rgb (0,0,255)`

结果

RGBA

例子

Div{颜色:Rgba (255, 255, 255, 0.20)；背景:url(bg.jpg)无重复中心中心;｝

结果

手机文字输入的软件

RGBA只是RGB的扩展，增加了一个alpha (A)参数，用于指定颜色的透明度/不透明度级别。因此，我们可以使用RGBA颜色值使HTML元素半透明。Alpha可以是0到1之间的值。RGBA的基本格式为:

Rgba(红，绿，蓝，阿尔法)

如果我们想透明度25%的蓝色：

红色的	绿色	蓝色的	不透明度	RGBA颜色表示法
0	0	255	０．２５	`Rgba (0, 0, 255, 0.25)`

关于RGBA的深入讨论，请阅读以下内容:CSS RGBA颜色指南。

奥软

例子

Div {background-color:Hsl (240, 100%， 50%)；｝

结果

奥软代表色调，饱和而且明度．HSL颜色表示法是RGB颜色表示法的替代品。它被引入CSS的想法是，与RGB颜色系统相比，它更直观地学习。

基本语法是:

Hsl(色相，饱和度，明度)

色调指的是我们能看到的颜色。人眼可见的颜色范围可以用一个圈来表示，这个圈通常被称为色轮。因此，色调之间可以是一个值0和360。源看看上面的色轮，我们可以看到红色的等于0^o，绿色90岁^o，紫色的是270^o等等。

饱和指色调的生动性或“丰富多彩”。低饱和度值导致柔和的色调，而高饱和度值导致明亮的色调。饱和度可以介于0%和100%。明度指的是色调的明暗。

数值越高，颜色越浅。亮度也可以是一个值之间0%和100%．饱和度和明度很容易被看作是色调的微调。

假设我们想要a纯红色。再看一下色轮，红色是0^o．因此，要得到纯红色，我们可以将饱和度设置为100%以获得最大数量的红色，并将明度设置为50%。

色调	饱和	明度	HSL颜色符号
0	100％	50％	`Hsl (0, 100%， 50%)`

结果

如果我们想要一个沉默/无聊的红色，我们仍然可以使用相同的色调。

我们只需要降低饱和度来降低颜色的生动性。

色调	饱和	明度	HSL颜色符号
0	50％	50％	`Hsl (0,50%， 50%)`

结果

如果我们想要深红色，我们可以降低亮度值。

色调	饱和	明度	HSL颜色符号
0	100％	25％	`Hsl (0, 100%， 25%)`

结果

HSLA

例子

Div{颜色:Hsla (120, 100%， 50%， 0.2)；背景:url(bg.jpg)无重复中心中心;｝

结果

手机文字输入的软件

HSLA就像HSL一样，增加了Alpha (A)参数，允许我们指定颜色的透明度/不透明度级别。

基本语法是:

Hsla(色相，饱和度，亮度，alpha)

Alpha可以是0到1之间的值。

颜色关键词

例子

Div {background-color:樱红色；｝

结果

基本颜色名称

CSS有16个基本颜色名称。基本颜色名称的例子有蓝色的，栗色，黑色的而且白色．

基本颜色名称表

颜色	颜色名称	十六进制
	`黑色的`	`# 000000`
	`银`	`# C0C0C0`
	`灰色的`	`# 808080`
	`白色`	`# FFFFFF`
	`栗色`	`# 800000`
	`红色的`	`# FF0000`
	`紫色的`	`# 800080`
	`樱红色`	`#就`
	`绿色`	`# 008000`
	`石灰`	`# 00 ff00`
	`橄榄`	`# 808000`
	`黄色的`	`# FFFF00`
	`海军`	`# 000080`
	`蓝色的`	`# 0000 ff`
	`蒂尔`	`# 008080`
	`阿卡`	`# 00飞行符`

源

扩展颜色名称

CSS2和CSS3引入了更多的颜色名称。

扩展颜色名称的示例如下蓟，深红色的而且重褐色．例子

Div {background-color:olivedrab；｝

结果

扩展颜色名称表

颜色	颜色名称	十六进制
	`aliceblue`	`# F0F8FF`
	`antiquewhite`	`# FAEBD7`
	`阿卡`	`# 00飞行符`
	`海蓝宝石`	`# 7 fffd4`
	`azure`	`# F0FFFF`
	`米色`	`# F5F5DC`
	`浓汤`	`# FFE4C4`
	`黑色的`	`# 000000`
	`blanchedalmond`	`# FFEBCD`
	`蓝色的`	`# 0000 ff`
	`blueviolet`	`# 8 a2be2`
	`棕色（的）`	`# A52A2A`
	`原木色`	`# DEB887`
	`cadetblue`	`# 5 f9ea0`
	`黄绿色`	`# 7 fff00`
	`巧克力`	`# D2691E`
	`珊瑚`	`# FF7F50`
	`cornflowerblue`	`# 6495艾德`
	`玉米雌穗花丝`	`# FFF8DC`
	`深红色的`	`劳工问题`
	`青色`	`# 00飞行符`
	`darkblue`	`# 00008 b`
	`darkcyan`	`# 008 b8b`
	`darkgoldenrod`	`# B8860B`
	`darkgray`	`# A9A9A9`
	`暗绿色`	`# 006400`
	`darkgrey`	`# A9A9A9`
	`darkkhaki`	`# BDB76B`
	`darkmagenta`	`# 8 b008b`
	`darkolivegreen`	`# 556 b2f`
	`darkorange`	`# FF8C00`
	`darkorchid`	`# 9932 cc`
	`darkred`	`# 8 b0000`
	`darksalmon`	`# E9967A`
	`darkseagreen`	`# 8 fbc8f`
	`darkslateblue`	`# 483 d8b`
	`darkslategray`	`# 2 f4f4f`
	`darkslategrey`	`# 2 f4f4f`
	`darkturquoise`	`# 00 ced1`
	`darkviolet`	`# 9400 d3`
	`一个`	`# FF1493`
	`deepskyblue`	`# 00 bfff`
	`dimgray`	`# 696969`
	`dimgrey`	`# 696969`
	`dodgerblue`	`# 1 e90ff`
	`耐火砖`	`# B22222`
	`floralwhite`	`# FFFAF0`
	`forestgreen`	`# 228 b22`
	`樱红色`	`#就`
	`gainsboro`	`# DCDCDC`
	`ghostwhite`	`# F8F8FF`
	`黄金`	`# FFD700`
	`秋麒麟草属植物`	`# DAA520`
	`灰色的`	`# 808080`
	`绿色`	`# 008000`
	`greenyellow`	`# ADFF2F`
	`灰色`	`# 808080`
	`蜜汁`	`# F0FFF0`
	`hotpink`	`# FF69B4`
	`indianred`	`# CD5C5C`
	`靛蓝`	`# 4 b0082`
	`象牙`	`# FFFFF0`
	`卡其色`	`# F0E68C`
	`薰衣草`	`# E6E6FA`
	`lavenderblush`	`# FFF0F5`
	`lawngreen`	`# 7 cfc00`
	`lemonchiffon`	`# FFFACD`
	`lightblue`	`# ADD8E6`
	`lightcoral`	`# F08080`
	`浅蓝色`	`# E0FFFF`
	`lightgoldenrodyellow`	`# FAFAD2`
	`浅灰色`	`# D3D3D3`
	`lightgreen`	`# 90 ee90`
	`lightgrey`	`# D3D3D3`
	`lightpink`	`# FFB6C1`
	`lightsalmon`	`# FFA07A`
	`lightseagreen`	`# 20 b2aa`
	`lightskyblue`	`# 87 cefa`
	`lightslategray`	`# 778899`
	`lightslategrey`	`# 778899`
	`lightsteelblue`	`# B0C4DE`
	`浅黄色`	`# FFFFE0`
	`石灰`	`# 00 ff00`
	`limegreen`	`# 32 cd32`
	`亚麻`	`# FAF0E6`
	`品红色的`	`#就`
	`栗色`	`# 800000`
	`mediumaquamarine`	`# 66 cdaa`
	`mediumblue`	`# 0000 cd`
	`mediumorchid`	`# BA55D3`
	`mediumpurple`	`# 9370分贝`
	`mediumseagreen`	`# 3 cb371`
	`mediumslateblue`	`# 7 b68ee`
	`mediumspringgreen`	`# 00 fa9a`
	`mediumturquoise`	`# 48 d1cc`
	`mediumvioletred`	`# C71585`
	`midnightblue`	`# 191970`
	`mintcream`	`# F5FFFA`
	`mistyrose`	`# FFE4E1`
	`软帮鞋`	`# FFE4B5`
	`navajowhite`	`# FFDEAD`
	`海军`	`# 000080`
	`oldlace`	`# FDF5E6`
	`橄榄`	`# 808000`
	`olivedrab`	`# 6 b8e23`
	`橙色`	`# FFA500`
	`橘红色`	`# FF4500`
	`兰花`	`# DA70D6`
	`淡菊黄色`	`# EEE8AA`
	`苍绿色`	`# 98 fb98`
	`苍白的宝石绿`	`# AFEEEE`
	`浅紫红`	`# DB7093`
	`番木瓜`	`# FFEFD5`
	`桃色`	`# FFDAB9`
	`秘鲁`	`# CD853F`
	`粉红色的`	`# FFC0CB`
	`李子`	`# DDA0DD`
	`浅蓝色`	`# B0E0E6`
	`紫色的`	`# 800080`
	`红色的`	`# FF0000`
	`玫瑰棕色`	`# BC8F8F`
	`宝蓝色`	`# 4169 e1`
	`重褐色`	`# 8 b4513`
	`大马哈鱼`	`# FA8072`
	`黄褐色`	`# F4A460`
	`海绿色的`	`# 2 e8b57`
	`海贝`	`# FFF5EE`
	`黄土`	`# A0522D`
	`银`	`# C0C0C0`
	`天蓝色`	`# 87 ceeb`
	`石蓝色`	`# 6 a5acd`
	`石板灰`	`# 708090`
	`slategrey`	`# 708090`
	`雪`	`# FFFAFA`
	`嫩绿`	`# 00 ff7f`
	`钢蓝色的`	`# 4682 b4`
	`棕褐色`	`# D2B48C`
	`蒂尔`	`# 008080`
	`蓟`	`# D8BFD8`
	`番茄`	`# FF6347`
	`绿松石`	`# 40 e0d0`
	`紫罗兰色的`	`# EE82EE`
	`小麦`	`# F5DEB3`
	`白色`	`# FFFFFF`
	`烟白`	`# F5F5F5`
	`黄色的`	`# FFFF00`
	`黄绿色`	`# 9 acd32`

源

关键字

的透明的Color关键字简单地说，颜色的不透明度为0%。例子

Div {background-color:透明的；｝

currentColor颜色

的currentColorcolor关键字是一个方便的关键字，意思是声明的颜色等于CSS颜色属性值:例如:

Div{颜色:蓝色的；边框:1px实体蓝色的；框影:2px 2px 15px蓝色的；背景:蓝色的；｝

也可以写成:

Div{颜色:蓝色的；边框:1px实体currentColor；框影:2px 2px 15pxcurrentColor；背景:currentColor；｝

结果

使用的好处currentColorColor关键字是，如果需要更新规则集，则只需更新颜色属性值。

为客户带来收入

为客户带来收入

CSS颜色介绍

十六进制

RGB

RGBA

奥软

HSLA

颜色关键词

基本颜色名称

基本颜色名称表

扩展颜色名称

扩展颜色名称表

关键字

currentColor颜色

相关内容

你网站的搜索引擎优化如何?

WebFX职业

接下来阅读:

我们开车过去了

为客户提供线索。

了解我们如何帮助您的业务增长

准备好与营销专家交谈了吗?给我们打个电话

160万年

500 +

1128年

服务

知识库

公司

资源

21%

平均流量
为客户增加

电商销售额增长30%以上

WebFX组合

行业领先的收入加速平台

数字化的下一个层次

宾夕法尼亚州最佳工作地点

显示1 - 10的832:

CSS颜色介绍

十六进制

RGB

RGBA

奥软

HSLA

颜色关键词

基本颜色名称

基本颜色名称表

扩展颜色名称

扩展颜色名称表

关键字

currentColor颜色

相关内容

相关资源

我们的服务

按行业划分资源

你网站的搜索引擎优化如何?

与我们合作

继续阅读

通过电子邮件获取帖子

与我们保持联系:

WebFX职业

接下来阅读:

我们开车过去了

为客户提供线索。

了解我们如何帮助您的业务增长

准备好与营销专家交谈了吗?给我们打个电话

160万年

500 +

1128年

21%

平均流量为客户增加

电商销售额增长30%以上

WebFX组合

行业领先的收入加速平台

数字化的下一个层次

宾夕法尼亚州最佳工作地点

平均流量
为客户增加