Color Keywods

  • 颜色关键字

16个基本颜色关键字 Basic color keywords

Color Color Name HEX RGB
  black #000000 0,0,0
  silver #C0C0C0 192,192,192
  gray #808080 128,128,128
  white #FFFFFF 255,255,255
  maroon #800000 128,0,0
  red #FF0000 255,0,0
  purple #800080 128,0,128
  fuchsia #FF00FF 255,0,255
  green #008000 0,128,0
  lime #00FF00 0,255,0
  olive #808000 128,128,0
  yellow #FFFF00 255,255,0
  navy #000080 0,0,128
  blue #0000FF 0,0,255
  teal #008080 0,128,128
  aqua #00FFFF 0,255,255

示例代码:

body{color:black;background:white;}
h1{color:maroon;}
h2{color:olive;}

28个系统颜色 CSS system colors

Color Color Name
  activeborder
  activecaption
  appworkspace
  background
  buttonface
  buttonhighlight
  buttonshadow
  buttontext
  captiontext
  graytext
  highlight
  highlighttext
  inactiveborder
  inactivecaption
  inactivecaptiontext
  infobackground
  infotext
  menu
  menutext
  scrollbar
  threeddarkshadow
  threedface
  threedhighlight
  threedlightshadow
  threedshadow
  window
  windowframe
  windowtext

示例代码:

body{color:windowtext;background:background;}
h1,h2{color:highlight;}

CSS系统颜色在CSS3中已经不被建议使用了。尽可能的使用其它的方式来模拟系统色的色彩。

拓展颜色关键字 Extended color keywords

Color Color Name HEX RGB
  aliceblue #f0f8ff 240,248,255
  antiquewhite #faebd7 250,235,215
  aqua #00ffff 0,255,255
  aquamarine #7fffd4 127,255,212
  azure #f0ffff 240,255,255
  beige #f5f5dc 245,245,220
  bisque #ffe4c4 255,228,196
  black #000000 0,0,0
  blanchedalmond #ffebcd 255,235,205
  blue #0000ff 0,0,255
  blueviolet #8a2be2 138,43,226
  brown #a52a2a 165,42,42
  burlywood #deb887 222,184,135
  cadetblue #5f9ea0 95,158,160
  chartreuse #7fff00 127,255,0
  chocolate #d2691e 210,105,30
  coral #ff7f50 255,127,80
  cornflowerblue #6495ed 100,149,237
  cornsilk #fff8dc 255,248,220
  crimson #dc143c 220,20,60
  cyan #00ffff 0,255,255
  darkblue #00008b 0,0,139
  darkcyan #008b8b 0,139,139
  darkgoldenrod #b8860b 184,134,11
  darkgray #a9a9a9 169,169,169
  darkgreen #006400 0,100,0
  darkgrey #a9a9a9 169,169,169
  darkkhaki #bdb76b 189,183,107
  darkmagenta #8b008b 139,0,139
  darkolivegreen #556b2f 85,107,47
  darkorange #ff8c00 255,140,0
  darkorchid #9932cc 153,50,204
  darkred #8b0000 139,0,0
  darksalmon #e9967a 233,150,122
  darkseagreen #8fbc8f 143,188,143
  darkslateblue #483d8b 72,61,139
  darkslategray #2f4f4f 47,79,79
  darkslategrey #2f4f4f 47,79,79
  darkturquoise #00ced1 0,206,209
  darkviolet #9400d3 148,0,211
  deeppink #ff1493 255,20,147
  deepskyblue #00bfff 0,191,255
  dimgray #696969 105,105,105
  dimgrey #696969 105,105,105
  dodgerblue #1e90ff 30,144,255
  firebrick #b22222 178,34,34
  floralwhite #fffaf0 255,250,240
  forestgreen #228b22 34,139,34
  fuchsia #ff00ff 255,0,255
  gainsboro #dcdcdc 220,220,220
  ghostwhite #f8f8ff 248,248,255
  gold #ffd700 255,215,0
  goldenrod #daa520 218,165,32
  gray #808080 128,128,128
  green #008000 0,128,0
  greenyellow #adff2f 173,255,47
  grey #808080 128,128,128
  honeydew #f0fff0 240,255,240
  hotpink #ff69b4 255,105,180
  indianred #cd5c5c 205,92,92
  indigo #4b0082 75,0,130
  ivory #fffff0 255,255,240
  khaki #f0e68c 240,230,140
  lavender #e6e6fa 230,230,250
  lavenderblush #fff0f5 255,240,245
  lawngreen #7cfc00 124,252,0
  lemonchiffon #fffacd 255,250,205
  lightblue #add8e6 173,216,230
  lightcoral #f08080 240,128,128
  lightcyan #e0ffff 224,255,255
  lightgoldenrodyellow #fafad2 250,250,210
  lightgray #d3d3d3 211,211,211
  lightgreen #90ee90 144,238,144
  lightgrey #d3d3d3 211,211,211
  lightpink #ffb6c1 255,182,193
  lightsalmon #ffa07a 255,160,122
  lightseagreen #20b2aa 32,178,170
  lightskyblue #87cefa 135,206,250
  lightslategray #778899 119,136,153
  lightslategrey #778899 119,136,153
  lightsteelblue #b0c4de 176,196,222
  lightyellow #ffffe0 255,255,224
  lime #00ff00 0,255,0
  limegreen #32cd32 50,205,50
  linen #faf0e6 250,240,230
  magenta #ff00ff 255,0,255
  maroon #800000 128,0,0
  mediumaquamarine #66cdaa 102,205,170
  mediumblue #0000cd 0,0,205
  mediumorchid #ba55d3 186,85,211
  mediumpurple #9370db 147,112,219
  mediumseagreen #3cb371 60,179,113
  mediumslateblue #7b68ee 123,104,238
  mediumspringgreen #00fa9a 0,250,154
  mediumturquoise #48d1cc 72,209,204
  mediumvioletred #c71585 199,21,133
  midnightblue #191970 25,25,112
  mintcream #f5fffa 245,255,250
  mistyrose #ffe4e1 255,228,225
  moccasin #ffe4b5 255,228,181
  navajowhite #ffdead 255,222,173
  navy #000080 0,0,128
  oldlace #fdf5e6 253,245,230
  olive #808000 128,128,0
  olivedrab #6b8e23 107,142,35
  orange #ffa500 255,165,0
  orangered #ff4500 255,69,0
  orchid #da70d6 218,112,214
  palegoldenrod #eee8aa 238,232,170
  palegreen #98fb98 152,251,152
  paleturquoise #afeeee 175,238,238
  palevioletred #db7093 219,112,147
  papayawhip #ffefd5 255,239,213
  peachpuff #ffdab9 255,218,185
  peru #cd853f 205,133,63
  pink #ffc0cb 255,192,203
  plum #dda0dd 221,160,221
  powderblue #b0e0e6 176,224,230
  purple #800080 128,0,128
  red #ff0000 255,0,0
  rosybrown #bc8f8f 188,143,143
  royalblue #4169e1 65,105,225
  saddlebrown #8b4513 139,69,19
  salmon #fa8072 250,128,114
  sandybrown #f4a460 244,164,96
  seagreen #2e8b57 46,139,87
  seashell #fff5ee 255,245,238
  sienna #a0522d 160,82,45
  silver #c0c0c0 192,192,192
  skyblue #87ceeb 135,206,235
  slateblue #6a5acd 106,90,205
  slategray #708090 112,128,144
  slategrey #708090 112,128,144
  snow #fffafa 255,250,250
  springgreen #00ff7f 0,255,127
  steelblue #4682b4 70,130,180
  tan #d2b48c 210,180,140
  teal #008080 0,128,128
  thistle #d8bfd8 216,191,216
  tomato #ff6347 255,99,71
  turquoise #40e0d0 64,224,208
  violet #ee82ee 238,130,238
  wheat #f5deb3 245,222,179
  white #ffffff 255,255,255
  whitesmoke #f5f5f5 245,245,245
  yellow #ffff00 255,255,0
  yellowgreen #9acd32 154,205,50

示例代码:

body{color:black;background:white;}
h1{color:violet;}
h2{color:yellowgreen;}

CSS3相关文章推荐

  • 前端开发博客
    前端开发博客:#CSS3#【CSS3卡牌旋转滑动效果】这个 CSS3 类似于幻灯片旋转的效果,是一个比较有意思并且比较受欢迎的特效。之前没有去研究过,无意在博客上看到 Wenzi 写了这个东西,来看看他的代码是怎么实现的。网页链接 #前端开发博客# ​
    3月21日 14:00来自caibaojian.com
    转发 (19) |评论 (2)
  • 硬不起来啦
    硬不起来啦:#css3#@font-face能引用多个字体吗?????
    3月7日 15:57来自vivo智能手机客户端
    转发 |评论
  • GitHub开发者
    GitHub开发者:弹性盒模型指南 作者:W.Y. @问崖不文雅 #CSS3# #Flexbox# Flexbox 布局是 CSS3 中一种新的布局模型,被称为弹性盒模型。该模型是为了改进容器中内容的对齐、方向和排序方式,即使是动态,甚至是未知大小的容器。弹性盒模型的主要特点是,可以在不同屏幕尺寸下以最佳的方式,修改其子项的高度或宽度来 ​
    3月4日 22:30来自微博 weibo.com
    转发 |评论
  • 前端开发博客
    前端开发博客:#CSS3#【CSS3硬件加速技巧】摘要:使用3D硬件加速提升动画性能时,最好给元素增加一个z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能,移动端优化效果尤为明显。以下为原文:C...请戳→网页链接 #前端开发博客# ​
    2月17日 12:00来自caibaojian.com
    转发 (3) |评论
  • i程序媛媛
    i程序媛媛:【纯css3实现饼图动画】 注: 本案例来自 CSS Screct先看效果: 你可能需要掌握下列知识CSS3 Animation Pseudo Element 使用 linear-gradient 制作不渐变 currentColor (非必须) 使用 border-radius ‘除’语法(非必...#程序员的资料库##CSS##CSS3# 查看全文:网页链接
    2016-6-27 22:29来自程序员的资料库
    转发 |评论
  • i程序媛媛
    i程序媛媛:【最直观的方式学习flexbox属性】弹性盒模型(Flexbox Layout)是CSS3新增的一种布局模式。它可以很方便地用来改善动态或未知大小的子元素在父元素中的对齐,方向和顺序等等。flex容器的主要特性是...#程序员的资料库##Android##CSS##CSS3##Git##iOS# 查看全文:网页链接
    2016-6-27 20:00来自程序员的资料库
    转发 |评论
  • 课工场
    课工场:#css3# #html5# 发布了头条文章:《css体验优化之图片容器设置宽高比》 网页链接
    2016-6-27 16:57来自微博 weibo.com
    转发 |评论
  • 吴东元丶
    吴东元丶:【文章发布】css3中的word-wrap、word-break、white-space:最近在我的网站编辑文章的时候遇到了文字过长导致溢出的情况,这才发现我的css没加文字截断,然后加上word-break:break-all就搞定了。下面给大家介绍css3中控制文字换行的三个...#Css3# 查看全文:网页链接
    2016-6-27 15:32来自那樊笼
    转发 |评论
  • i程序媛媛
    i程序媛媛:【如何理解CSS的display属性】在布局中,display属性是最重要的CSS属性之一。其最常见的属性值有block,inline,none,table以及inline-block。最近的新宠为flex,因为它是专门为布局创建的display属性。...#程序员的资料库##CSS##CSS3##HTML5##Ruby# 查看全文:网页链接
    2016-6-24 09:18来自程序员的资料库
    转发 |评论
  • i程序媛媛
    i程序媛媛:【何时需要文档兼容模式】Windows Internet Explorer的每个主要版本都会增加新功能,目的是让浏览器更好用、更安全、更符合行业标准。随着功能的增多,很多旧网站面临无法正确显示的风险。本文介绍Windows I...#程序员的资料库##CSS##CSS3##HTML5# 查看全文:网页链接
    2016-6-20 12:27来自程序员的资料库
    转发 |评论
  • i程序媛媛
    i程序媛媛:【22个必须知道的css技巧】本文是 Gredswsh的技术生活 整理的 22个必须知道的css技巧, 作为偶尔也会涉猎前端开发的我来说,特别喜欢一些前端开发的总结性的文章,文末我也附上了其它几篇关于CSS技巧的文章。1、改变...#程序员的资料库##CSS##CSS3# 查看全文:网页链接
    2016-6-18 17:04来自程序员的资料库
    转发 |评论
  • 湖南高级网络营销师
    湖南高级网络营销师:一:谈谈html控制样式的弊端1.相同的样式效果,通过不同的属性来完成的例如颜色:<body text=""> <font color="">2.程序的可维护性不高。少的工作完成更多的事情就可称之为可维护性高通过css就能解决上述问...#css3# 网页链接
    2016-6-14 11:18来自360安全浏览器
    转发 |评论
  • 前端开发博客
    前端开发博客:【HTML5和CSS3代码生成器】这篇文章分享了一些比较常用的CSS3特效生成器,有按钮、边框、圆角、渐变、系统字体和阴影等,使用这些工具能够快捷的做出你想要的小特效,值得收藏使用...请戳→ 更多《#CSS3#教程》网页链接
    2016-6-6 19:27来自caibaojian.com
    转发 (29) |评论 (6)
  • 前端开发博客
    前端开发博客:【50个有用的CSS代码片段】For this article I want to present 50 handy CSS2/CSS3 code snippets for any...请戳→ 更多《#CSS3#教程》网页链接
    2016-5-30 22:27来自caibaojian.com
    转发 (22) |评论 (1)
  • 前端开发博客
    前端开发博客:【HTML5和CSS3代码生成器】这篇文章分享了一些比较常用的CSS3特效生成器,有按钮、边框、圆角、渐变、系统字体和阴影等,使用这些工具能够快捷的做出你想要的小特效,值得收藏使用...请戳→网页链接 更多《#CSS3#教程》网页链接
    2016-5-3 13:12来自caibaojian.com
    转发 (38) |评论 (3)
  • 空倪儿
    空倪儿:Experimenting with a new crown for Kawaii-CSS framework #css3##css##网页设计##网页UI# ​
    2016-4-25 16:01来自iPhone 6s
    转发 |评论
  • 前端开发博客
    前端开发博客:【【译】走向Retina Web】在深入细节之前,有必要先明确一些关键性概念。Device Pixels(设备像素)一个设备像素(或者称为物理像素)是显示器上最小的物理显示单元。在...请戳→网页链接 更多《#CSS3#教程》网页链接
    2016-4-21 22:36来自caibaojian.com
    转发 (6) |评论 (2)
  • 前端开发博客
    前端开发博客:【50个有用的CSS代码片段】For this article I want to present 50 handy CSS2/CSS3 code snippets for any...请戳→网页链接 更多《#CSS3#教程》网页链接
    2016-4-12 12:01来自caibaojian.com
    转发 (21) |评论 (5)
  • 前端开发博客
    前端开发博客:【学习css3动画属性Transition】发现在线的css3手册中都没有提到这个属性。应该是写得不全吧,不过搜索百度的时候发现第一个位置的那个的确是有的。赞一个。下面进入学习的阶...请戳→网页链接 更多《#CSS3#教程》网页链接
    2016-4-3 09:00来自caibaojian.com
    转发 (15) |评论 (3)
  • 前端开发博客
    前端开发博客:【css3变形属性transform】这个很简单,就跟border-radius一样,就是一个参数,同样是针对不同的浏览器有不同的私有属性。w3c上的例子是这样子写的:div{transform:...全文网页链接阅读更多相关《#CSS3#教程》网页链接
    2016-3-26 18:00来自caibaojian.com
    转发 (16) |评论 (2)