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 Object-fit和Object-position

当然也有修复的方法,但所有人都在说:媒体调整的行为将会失控!是的,现在我们将要解决这个问题。CSS标准提出属性object-fit和object-positio...4月6日

15个无比华丽的HTML5/CSS3动画应用

未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心。本文主要分享了15个无比华丽的HTML5/CSS3动画应用,供大家参考学习。1...6月6日

一个栗子上手CSS3动画

列举CSS3动画的属性,若需要了解API,可前往MDN。作者:伯乐在线来源:前端大全|2017-05-1115:20最近杂七杂八的事情很多,很多知识都没来得及总结...5月11日

200页的前端开发面试题整理版之HTML5+CSS3(四)

+CSS31.CSS3有哪些新特性?1.CSS3实现圆角(border-radius),阴影(box-shadow),2.对文字加特效(text-shadow、)...4月4日

我们来做一个beautiful的css3鼠标悬停效果

其实一个冒号跟两个冒号没有本质的区别,都是表示在什么什么之前,他这么写主要只是为了区分css2和css3,也就是ie和主流浏览器...4月23日

纯CSS3画出小黄人并实现动画效果

前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分...5月3日

精选10款超酷的HTML5/CSS3菜单

款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧。1、CSS3手风琴菜单下拉展开带弹性动画利用CSS3技术可以实现各种各样的网页菜单...5月24日

网站设计中10个经典的CSS3动效库

深圳网站设计公司科慧设计一般会在网站中加入一些简单而一致的动效,我所用的技术则是用SASS+bourbon来生成出那些基于CSS3的动画效果来...5月11日

纯CSS3做炫酷环形星星发光动画,在简单没思路你也做不出来

这个特效是用CSS3制作的,虽然录制的图片出来看起来很卡,但是实际上还是很顺畅的。想要更多的企业求职加分项目,案例,学习方法可以来一下我的前端群611256580...5月23日

从矩阵与空间操作的关系理解CSS3的transform

不得不提到CSS3的transform,也就是变换。这篇文章概括了在实现时对transform的理解与总结。注:文中的图片多数截取自视频:线性代数的本质...5月13日

移动互联网之路HTML5+CSS3+jQueryMobileAPP与移动网站设计从入门到精通PDF

移动互联网之路(附光盘HTML5+CSS3+jQueryMobileAPP与移动网站设计从入门到精通)(光盘1张)》从实际应用的角度出发,系统地介绍了HTML5...5月17日

css3实现掷骰子(无图)

下面用css3实现的掷骰子效果,骰子点数、面和转动效果都是有css,css3完成的。截图如下:Paste_Image.png1.模板如下:/*span是点数*/2...4月19日

HTML5+CSS3技术(二)CSS使用方法和选择器

css->基础知识HTML负责网页的内容,CSS负责网页的样式,可以减少网页代码量,更能提高网络访问网页的速度...5月26日

精美CSS3聊天窗口 实用的Tooltip和自定义滚动条

这次我们要分享一款基于CSS3和HTML5的自定义聊天窗口,这里要声明的是它并不能完成聊天的功能,只是提供了聊天窗口的UI,包括,聊天语句的Tooltip样式...3月10日

详解用CSS3制作圆形滚动进度条动画效果

家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》,但是呢...2月9日

实现CSS3炫酷的效果可以借助哪些工具

要了解CSS3首先要了解各种浏览器对CSS3支持的情况及目前浏览器的市场占有率情况。截止2016年12月,Chrome(webkit)40.52%、IE814...3月5日

基于CSS3 column多栏布局实现水平滑页翻页交互

星期三,00:10,归类于css相关。阅读74次,今日74次byzhangxinxufromhttp://www...2月15日

CSS·导航条分享到:导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理...2016年12月19日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册