CSS中颜色表示方法及颜色表
一:直接用颜色的英文名表示
二:RGB(x,y,z)函数表示,x、y、z、分别是红色、绿色、蓝色的值,x,y,z∈[0,225],亦可用百分比表示;对比rgba(x,y,z,a)中a是alpha通道设置透明度取值0~1
三:十六进制表示,eg:#ff0000;前两位表示红色,中间两位表示绿色,后两位表示蓝色,范围为00-ff,注意缩写形式
四:hsl(色相,饱和度,亮度):h:色相,表示范围0~360,如下如色环;s:饱和度,取值范围是0.0%~100%l;亮度:取值范围0.0%~100%;同理hsla
五:直接设置透明度:transparent
颜色表:
颜色 | 英文代码 | 形象描述 | 十六进制 | RGB |
LightPink | 浅粉红 | #FFB6C1 | 255,182,193 | |
Pink | 粉红 | #FFC0CB | 255,192,203 | |
Crimson | 猩红 | #DC143C | 220,20,60 | |
LavenderBlush | 脸红的淡紫色 | #FFF0F5 | 255,240,245 | |
PaleVioletRed | 苍白的紫罗兰红色 | #DB7093 | 219,112,147 | |
HotPink | 热情的粉红 | #FF69B4 | 255,105,180 | |
DeepPink | 深粉色 | #FF1493 | 255,20,147 | |
MediumVioletRed | 适中的紫罗兰红色 | #C71585 | 199,21,133 | |
Orchid | 兰花的紫色 | #DA70D6 | 218,112,214 | |
Thistle | 蓟 | #D8BFD8 | 216,191,216 | |
plum | 李子 | #DDA0DD | 221,160,221 | |
Violet | 紫罗兰 | #EE82EE | 238,130,238 | |
Magenta | 洋红 | #FF00FF | 255,0,255 | |
Fuchsia | 灯笼海棠(紫红色) | #FF00FF | 255,0,255 | |
DarkMagenta | 深洋红色 | #8B008B | 139,0,139 | |
Purple | 紫色 | #800080 | 128,0,128 | |
MediumOrchid | 适中的兰花紫 | #BA55D3 | 186,85,211 | |
DarkVoilet | 深紫罗兰色 | #9400D3 | 148,0,211 | |
DarkOrchid | 深兰花紫 | #9932CC | 153,50,204 | |
Indigo | 靛青 | #4B0082 | 75,0,130 | |
BlueViolet | 深紫罗兰的蓝色 | #8A2BE2 | 138,43,226 | |
MediumPurple | 适中的紫色 | #9370DB | 147,112,219 | |
MediumSlateBlue | 适中的板岩暗蓝灰色 | #7B68EE | 123,104,238 | |
SlateBlue | 板岩暗蓝灰色 | #6A5ACD | 106,90,205 | |
DarkSlateBlue | 深岩暗蓝灰色 | #483D8B | 72,61,139 | |
Lavender | 熏衣草花的淡紫色 | #E6E6FA | 230,230,250 | |
GhostWhite | 幽灵的白色 | #F8F8FF | 248,248,255 | |
Blue | 纯蓝 | #0000FF | 0,0,255 | |
MediumBlue | 适中的蓝色 | #0000CD | 0,0,205 | |
MidnightBlue | 午夜的蓝色 | #191970 | 25,25,112 | |
DarkBlue | 深蓝色 | #00008B | 0,0,139 | |
Navy | 海军蓝 | #000080 | 0,0,128 | |
RoyalBlue | 皇家蓝 | #4169E1 | 65,105,225 | |
CornflowerBlue | 矢车菊的蓝色 | #6495ED | 100,149,237 | |
LightSteelBlue | 淡钢蓝 | #B0C4DE | 176,196,222 | |
LightSlateGray | 浅石板灰 | #778899 | 119,136,153 | |
SlateGray | 石板灰 | #708090 | 112,128,144 | |
DoderBlue | 道奇蓝 | #1E90FF | 30,144,255 | |
AliceBlue | 爱丽丝蓝 | #F0F8FF | 240,248,255 | |
SteelBlue | 钢蓝 | #4682B4 | 70,130,180 | |
LightSkyBlue | 淡蓝色 | #87CEFA | 135,206,250 | |
SkyBlue | 天蓝色 | #87CEEB | 135,206,235 | |
DeepSkyBlue | 深天蓝 | #00BFFF | 0,191,255 | |
LightBLue | 淡蓝 | #ADD8E6 | 173,216,230 | |
PowDerBlue | 火药蓝 | #B0E0E6 | 176,224,230 | |
CadetBlue | 军校蓝 | #5F9EA0 | 95,158,160 | |
Azure | 蔚蓝色 | #F0FFFF | 240,255,255 | |
LightCyan | 淡青色 | #E1FFFF | 225,255,255 | |
PaleTurquoise | 苍白的绿宝石 | #AFEEEE | 175,238,238 | |
Cyan | 青色 | #00FFFF | 0,255,255 | |
Aqua | 水绿色 | #00FFFF | 0,255,255 | |
DarkTurquoise | 深绿宝石 | #00CED1 | 0,206,209 | |
DarkSlateGray | 深石板灰 | #2F4F4F | 47,79,79 | |
DarkCyan | 深青色 | #008B8B | 0,139,139 | |
Teal | 水鸭色 | #008080 | 0,128,128 | |
MediumTurquoise | 适中的绿宝石 | #48D1CC | 72,209,204 | |
LightSeaGreen | 浅海洋绿 | #20B2AA | 32,178,170 | |
Turquoise | 绿宝石 | #40E0D0 | 64,224,208 | |
Auqamarin | 绿玉\碧绿色 | #7FFFAA | 127,255,170 | |
MediumAquamarine | 适中的碧绿色 | #00FA9A | 0,250,154 | |
MediumSpringGreen | 适中的春天的绿色 | #00FF7F | 0,255,127 | |
MintCream | 薄荷奶油 | #F5FFFA | 245,255,250 | |
SpringGreen | 春天的绿色 | #3CB371 | 60,179,113 | |
SeaGreen | 海洋绿 | #2E8B57 | 46,139,87 | |
Honeydew | 蜂蜜 | #F0FFF0 | 240,255,240 | |
LightGreen | 淡绿色 | #90EE90 | 144,238,144 | |
PaleGreen | 苍白的绿色 | #98FB98 | 152,251,152 | |
DarkSeaGreen | 深海洋绿 | #8FBC8F | 143,188,143 | |
LimeGreen | 酸橙绿 | #32CD32 | 50,205,50 | |
Lime | 酸橙色 | #00FF00 | 0,255,0 | |
ForestGreen | 森林绿 | #228B22 | 34,139,34 | |
Green | 纯绿 | #008000 | 0,128,0 | |
DarkGreen | 深绿色 | #006400 | 0,100,0 | |
Chartreuse | 查特酒绿 | #7FFF00 | 127,255,0 | |
LawnGreen | 草坪绿 | #7CFC00 | 124,252,0 | |
GreenYellow | 绿黄色 | #ADFF2F | 173,255,47 | |
OliveDrab | 橄榄土褐色 | #556B2F | 85,107,47 | |
Beige | 米色(浅褐色) | #F5F5DC | 245,245,220 | |
LightGoldenrodYellow | 浅秋麒麟黄 | #FAFAD2 | 250,250,210 | |
Ivory | 象牙 | #FFFFF0 | 255,255,240 | |
LightYellow | 浅黄色 | #FFFFE0 | 255,255,224 | |
Yellow | 纯黄 | #FFFF00 | 255,255,0 | |
Olive | 橄榄 | #808000 | 128,128,0 | |
DarkKhaki | 深卡其布 | #BDB76B | 189,183,107 | |
LemonChiffon | 柠檬薄纱 | #FFFACD | 255,250,205 | |
PaleGodenrod | 灰秋麒麟 | #EEE8AA | 238,232,170 | |
Khaki | 卡其布 | #F0E68C | 240,230,140 | |
Gold | 金 | #FFD700 | 255,215,0 | |
Cornislk | 玉米色 | #FFF8DC | 255,248,220 | |
GoldEnrod | 秋麒麟 | #DAA520 | 218,165,32 | |
FloralWhite | 花的白色 | #FFFAF0 | 255,250,240 | |
OldLace | 老饰带 | #FDF5E6 | 253,245,230 | |
Wheat | 小麦色 | #F5DEB3 | 245,222,179 | |
Moccasin | 鹿皮鞋 | #FFE4B5 | 255,228,181 | |
Orange | 橙色 | #FFA500 | 255,165,0 | |
PapayaWhip | 番木瓜 | #FFEFD5 | 255,239,213 | |
BlanchedAlmond | 漂白的杏仁 | #FFEBCD | 255,235,205 | |
NavajoWhite | 纳瓦霍白 | #FFDEAD | 255,222,173 | |
AntiqueWhite | 古代的白色 | #FAEBD7 | 250,235,215 | |
Tan | 晒黑 | #D2B48C | 210,180,140 | |
BrulyWood | 结实的树 | #DEB887 | 222,184,135 | |
Bisque | (浓汤)乳脂,番茄等 | #FFE4C4 | 255,228,196 | |
DarkOrange | 深橙色 | #FF8C00 | 255,140,0 | |
Linen | 亚麻布 | #FAF0E6 | 250,240,230 | |
Peru | 秘鲁 | #CD853F | 205,133,63 | |
PeachPuff | 桃色 | #FFDAB9 | 255,218,185 | |
SandyBrown | 沙棕色 | #F4A460 | 244,164,96 | |
Chocolate | 巧克力 | #D2691E | 210,105,30 | |
SaddleBrown | 马鞍棕色 | #8B4513 | 139,69,19 | |
SeaShell | 海贝壳 | #FFF5EE | 255,245,238 | |
Sienna | 黄土赭色 | #A0522D | 160,82,45 | |
LightSalmon | 浅鲜肉(鲑鱼)色 | #FFA07A | 255,160,122 | |
Coral | 珊瑚 | #FF7F50 | 255,127,80 | |
OrangeRed | 橙红色 | #FF4500 | 255,69,0 | |
DarkSalmon | 深鲜肉(鲑鱼)色 | #E9967A | 233,150,122 | |
Tomato | 番茄 | #FF6347 | 255,99,71 | |
MistyRose | 薄雾玫瑰 | #FFE4E1 | 255,228,225 | |
Salmon | 鲜肉(鲑鱼)色 | #FA8072 | 250,128,114 | |
Snow | 雪 | #FFFAFA | 255,250,250 | |
LightCoral | 淡珊瑚色 | #F08080 | 240,128,128 | |
RosyBrown | 玫瑰棕色 | #BC8F8F | 188,143,143 | |
IndianRed | 印度红 | #CD5C5C | 205,92,92 | |
Red | 纯红 | #FF0000 | 255,0,0 | |
Brown | 棕色 | #A52A2A | 165,42,42 | |
FireBrick | 耐火砖 | #B22222 | 178,34,34 | |
DarkRed | 深红色 | #8B0000 | 139,0,0 | |
Maroon | 栗色 | #800000 | 128,0,0 | |
White | 纯白 | #FFFFFF | 255,255,255 | |
WhiteSmoke | 白烟 | #F5F5F5 | 245,245,245 | |
Gainsboro | 亮灰色 | #DCDCDC | 220,220,220 | |
LightGrey | 浅灰色 | #D3D3D3 | 211,211,211 | |
Silver | 银白色 | #C0C0C0 | 192,192,192 | |
DarkGray | 深灰色 | #A9A9A9 | 169,169,169 | |
Gray | 灰色 | #808080 | 128,128,128 | |
DimGray | 暗淡的灰色 | #696969 | 105,105,105 | |
Black | 纯黑 | #000000 | 0,0,0 |
CSS中颜色表示方法及颜色表的更多相关文章
- CSS中垂直居中的方法
昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...
- CSS中各种居中方法
CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...
- CSS中水平居中的方法
居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...
- CSS颜色表示法、颜色表(调色板)
1.CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF). 2.十六进制值使用 ...
- CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
- css中的垂直居中方法
单行文字 (外行高度固定) line-height 行高, 将line-height值与外部标签盒子的高度值设置成一致就可以了. height:3em; line-height:3em; 多行文字 图 ...
- css中的单位和css中的颜色表示方法
css中颜色的表示方式: 图片来源http://www.w3school.com.cn
- 3.css中的颜色
css中颜色的设置形式主要有三种方式:颜色名称.十六进制代码和十进制代码. 在古老的 HTML4 时,颜色名称只有 16 种. 颜色名称 十六进制代码 十进制代码 含义 black #000000 ...
- 熟悉css/css3颜色属性
颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...
随机推荐
- CSS新增的伪类选择器
:root 选择文档的根元素,等同于 html 元素 :empty 选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 ...
- php 两种获取分类树的方法
php 两种获取分类树的方法 1. /** * 获取分类树 * @param array $array 数据源 * @param int $pid 父级ID * @param int $level 分 ...
- Mac 安装python 3.*新版本的详细步骤
Mac 系统自带python,不过自带的python版本都是2.*版本.虽然不影响老版本项目的运行, 但是python最新的3.*版本的一些语法与2.*版本并不相同,我们不论是学习还是使用,当然用最新 ...
- Ubuntu+docker+jenkins安装详细指南
最近项目上开始实行自动化测试,避免不了与jenkins等持续集成工具打交道,今天就给大家分享一下有关jenkins的简单安装和使用 1,准备环境 (1)ubuntu系统 (2)docker (3)je ...
- jenkins自动化部署项目4 -- 安装和配置jdk、maven、git
Jenkins提供了自动安装jdk,maven,git的功能,在[系统设置-全局工具配置]里,但是我自动安装没反应,因此我是先手工安装和配置它们的环境变量然后再在[系统设置-全局工具配置]里配置: 1 ...
- Java 客户端服务器范例
最近在面试,虽然学习了一些新的框架,但是可能问类似于客户端服务器模型,然后根据其设计,所以就根据面试内容梳理一下客户端服务器模型. 客户端基本思路: 1.创建Socket实例,设置端口和IP地址等 2 ...
- 多智能体系统(MAS)简介
1.背景 自然界中大量个体聚集时往往能够形成协调.有序,甚至令人感到震撼的运动场景,比如天空中集体翱翔的庞大的鸟群.海洋中成群游动的鱼群,陆地上合作捕猎的狼群.这些群体现象所表现出的分布.协调.自 ...
- wpf 使用矢量字体 fontawesome
第一步:首先下载矢量字体 :http://www.fontawesome.com.cn/ 第二步:在将fontawesome-webfont.ttf 文件引用到项目 设置fontawesome-web ...
- Redis 5.0 redis-cli --cluster help说明
背景: Redis Cluster 在5.0之后取消了ruby脚本 redis-trib.rb的支持(手动命令行添加集群的方式不变),集合到redis-cli里,避免了再安装ruby的相关环境.直接使 ...
- Spring 梳理 - @Component
使用@Component注解,表示该类定义为Spring管理Bean,使用默认value(可选)属性表示Bean标识符.如果不指定标识符,默认为首字母小写类名.例如类UserController的标识 ...