kangkk

BACK HOME

配色

基本的16色

仅以下16种颜色的英文名称可以被w3cHTML 4.01 Specification标准支持,详见Basic HTML data types:Colors

The attribute value type "color" (%Color;) refers to color definitions as specified in SRGB. A color value may either be a hexadecimal number (prefixed by a hash mark) or one of the following sixteen color names. The color names are case-insensitive.

██ Black (#000000) ██ Gray (#808080) ██ Silver (#C0C0C0) ██ White (#FFFFFF)
██ Red (#FF0000) ██ Yellow (#FFFF00) ██ Lime (#00FF00) ██ Aqua (#00FFFF)
██ Blue (#0000FF) ██ Fuchsia (#FF00FF) ██ Maroon (#800000) ██ Olive (#808000)
██ Green (#008000) ██ Teal (#008080) ██ Navy (#000080) ██ Purple (#800080)

基本的17色

基本的16色是指HTML 4.01 Specification标准支持的16个颜色名,但在CSS2.1中,规范的是17个颜色名,与16色相比多出来了一个橙色(orange),详见Syntax and basic data typess:Colors

██ Orange (#ffA500)

WEB安全色

browser-safe palette, Netscape palette, 216 palette, Web palette, and/or 6x6x6 color cube

web安全色是指在不同的平台下显示效果一致的颜色。在256色里有40种颜色在Macintosh和Windows里显示的效果不一样,所以能安全使用的只有216色。

在《CSS权威指南》中第四章“值和单位”(第90页:Web安全颜色)中阐述:

所谓“Web安全”颜色是指,在256色计算机系统上总能避免抖动的颜色。

抖动

在前几年里,当大多数计算机受显存大小的限制,一般只有4位~16位的颜色存储空间并只支持256种颜色时,提出了抖动(dithering)的技术。

dithering color

参考:

WEB安全色预览

██ #000000 ██ #000033 ██ #000066 ██ #000099 ██ #0000CC ██ #0000FF
██ #003300 ██ #003333 ██ #003366 ██ #003399 ██ #0033CC ██ #0033FF
██ #006600 ██ #006633 ██ #006666 ██ #006699 ██ #0066CC ██ #0066FF
██ #009900 ██ #009933 ██ #009966 ██ #009999 ██ #0099CC ██ #0099FF
██ #00CC00 ██ #00CC33 ██ #00CC66 ██ #00CC99 ██ #00CCCC ██ #00CCFF
██ #00FF00 ██ #00FF33 ██ #00FF66 ██ #00FF99 ██ #00FFCC ██ #00FFFF
██ #330000 ██ #330033 ██ #330066 ██ #330099 ██ #3300CC ██ #3300FF
██ #333300 ██ #333333 ██ #333366 ██ #333399 ██ #3333CC ██ #3333FF
██ #336600 ██ #336633 ██ #336666 ██ #336699 ██ #3366CC ██ #3366FF
██ #339900 ██ #339933 ██ #339966 ██ #339999 ██ #3399CC ██ #3399FF
██ #33CC00 ██ #33CC33 ██ #33CC66 ██ #33CC99 ██ #33CCCC ██ #33CCFF
██ #33FF00 ██ #33FF33 ██ #33FF66 ██ #33FF99 ██ #33FFCC ██ #33FFFF
██ #660000 ██ #660033 ██ #660066 ██ #660099 ██ #6600CC ██ #6600FF
██ #663300 ██ #663333 ██ #663366 ██ #663399 ██ #6633CC ██ #6633FF
██ #666600 ██ #666633 ██ #666666 ██ #666699 ██ #6666CC ██ #6666FF
██ #669900 ██ #669933 ██ #669966 ██ #669999 ██ #6699CC ██ #6699FF
██ #66CC00 ██ #66CC33 ██ #66CC66 ██ #66CC99 ██ #66CCCC ██ #66CCFF
██ #66FF00 ██ #66FF33 ██ #66FF66 ██ #66FF99 ██ #66FFCC ██ #66FFFF
██ #990000 ██ #990033 ██ #990066 ██ #990099 ██ #9900CC ██ #9900FF
██ #993300 ██ #993333 ██ #993366 ██ #993399 ██ #9933CC ██ #9933FF
██ #996600 ██ #996633 ██ #996666 ██ #996699 ██ #9966CC ██ #9966FF
██ #999900 ██ #999933 ██ #999966 ██ #999999 ██ #9999CC ██ #9999FF
██ #99CC00 ██ #99CC33 ██ #99CC66 ██ #99CC99 ██ #99CCCC ██ #99CCFF
██ #99FF00 ██ #99FF33 ██ #99FF66 ██ #99FF99 ██ #99FFCC ██ #99FFFF
██ #CC0000 ██ #CC0033 ██ #CC0066 ██ #CC0099 ██ #CC00CC ██ #CC00FF
██ #CC3300 ██ #CC3333 ██ #CC3366 ██ #CC3399 ██ #CC33CC ██ #CC33FF
██ #CC6600 ██ #CC6633 ██ #CC6666 ██ #CC6699 ██ #CC66CC ██ #CC66FF
██ #CC9900 ██ #CC9933 ██ #CC9966 ██ #CC9999 ██ #CC99CC ██ #CC99FF
██ #CCCC00 ██ #CCCC33 ██ #CCCC66 ██ #CCCC99 ██ #CCCCCC ██ #CCCCFF
██ #CCFF00 ██ #CCFF33 ██ #CCFF66 ██ #CCFF99 ██ #CCFFCC ██ #CCFFFF
██ #FF0000 ██ #FF0033 ██ #FF0066 ██ #FF0099 ██ #FF00CC ██ #FF00FF
██ #FF3300 ██ #FF3333 ██ #FF3366 ██ #FF3399 ██ #FF33CC ██ #FF33FF
██ #FF6600 ██ #FF6633 ██ #FF6666 ██ #FF6699 ██ #FF66CC ██ #FF66FF
██ #FF9900 ██ #FF9933 ██ #FF9966 ██ #FF9999 ██ #FF99CC ██ #FF99FF
██ #FFCC00 ██ #FFCC33 ██ #FFCC66 ██ #FFCC99 ██ #FFCCCC ██ #FFCCFF
██ #FFFF00 ██ #FFFF33 ██ #FFFF66 ██ #FFFF99 ██ #FFFFCC ██ #FFFFFF

Netscape色

Netscape Navigator 用以下的英文名定义各种颜色。

#000000 black #000080 navy #00008B darkblue #0000CD mediumblue #0000FF blue
#006400 darkgreen #008000 green #008080 teal #008B8B darkcyan #00BFFF deepskyblue
#00CED1 darkturquoise #00FA9A mediumspringgreen #00FF00 lime #00FF7F springgreen #00FFFF aqua
#00FFFF cyan #191970 midnightblue #1E90FF dodgerblue #20B2AA lightseagreen #228B22 forestgreen
#2E8B57 seagreen #2F4F4F darkslategray #32CD32 limegreen #3CB371 mediumseagreen #40E0D0 turquoise
#4169E1 royalblue #4682B4 steelblue #483D8B darkslateblue #48D1CC mediumturquoise #4B0082 indigo
#556B2F darkolivegreen #5F9EA0 cadetblue #6495ED cornflowerblue #66CDAA mediumaquamarine #696969 dimgray
#6A5ACD slateblue #6B8E23 olivedrab #708090 slategray #778899 lightslategray #7B68EE mediumslateblue
#7CFC00 lawngreen #7FFF00 chartreuse #7FFFD4 aquamarine #800000 maroon #800080 purple
#808000 olive #808080 gray #87CEEB skyblue #87CEFA lightskyblue #8A2BE2 blueviolet
#8B0000 darkred #8B008B darkmagenta #8B4513 saddlebrown #8FBC8F darkseagreen #90EE90 lightgreen
#9370DB mediumpurple #9400D3 darkviolet #98FB98 palegreen #9932CC darkorchid #9ACD32 yellowgreen
#A0522D sienna #A52A2A brown #A9A9A9 darkgray #ADD8E6 lightblue #ADFF2F greenyellow
#AFEEEE paleturquoise #B0C4DE lightsteelblue #B0E0E6 powderblue #B22222 firebrick #B8860B darkgoldenrod
#BA55D3 mediumorchid #BC8F8F rosybrown #BDB76B darkkhaki #C0C0C0 silver #C71585 mediumvioletred
#CD5C5C indianred #CD853F peru #D2691E chocolate #D2B48C tan #D3D3D3 lightgrey
#D8BFD8 thistle #DA70D6 orchid #DAA520 goldenrod #DB7093 palevioletred #DC143C crimson
#DCDCDC gainsboro #DDA0DD plum #DEB887 burlywood #E0FFFF lightcyan #E6E6FA lavender
#E9967A darksalmon #EE82EE violet #EEE8AA palegoldenrod #F08080 lightcoral #F0E68C khaki
#F0F8FF aliceblue #F0FFF0 honeydew #F0FFFF azure #F4A460 sandybrown #F5DEB3 wheat
#F5F5DC beige #F5F5F5 whitesmoke #F5FFFA mintcream #F8F8FF ghostwhite #FA8072 salmon
#FAEBD7 antiquewhite #FAF0E6 linen #FAFAD2 lightgoldenrodyellow #FDF5E6 oldlace #FF0000 red
#FF00FF fuchsia #FF00FF magenta #FF1493 deeppink #FF4500 orangered #FF6347 tomato
#FF69B4 hotpink #FF7F50 coral #FF8C00 darkorange #FFA07A lightsalmon #FFA500 orange
#FFB6C1 lightpink #FFC0CB pink #FFD700 gold #FFDAB9 peachpuff #FFDEAD navajowhite
#FFE4B5 moccasin #FFE4C4 bisque #FFE4E1 mistyrose #FFEBCD blanchedalmond #FFEFD5 papayawhip
#FFF0F5 lavenderblush #FFF5EE seashell #FFF8DC cornsilk #FFFACD lemonchiffon #FFFAF0 floralwhite
#FFFAFA snow #FFFF00 yellow #FFFFE0 lightyellow #FFFFF0 ivory #FFFFFF white

6x6x6 Color Cube

6x6x6 Color Cube

6x6x6 彩色立方体的相关内容我还没有安利明白(PД`q。)・,目前只有有限的知道std[1]网站

色卡

计算

RGB数值表示颜色信息的格式为(255 0 0),除此之外还存在色相,饱和度,亮度,明度和灰度大小的数值,分别对应0°, 100%, 100%, 76, 127,其彼此之间的换算公式为:

名称 公式
色相 原色色相(RGB最大值色相[2])+(-)(中间值-最小值)*60/(最大值-最小值)
饱和度 [(最大值-最小值)/最大值]*100%
亮度 (最大值 /255)*100%
明度 30%R+59%G+11%*B
灰度 (最大值+最小值)/2

按照对应的换算公式,分别实例计算三组(255 0 0),(0 255 255),(60 200 95)信息对应的色相,饱和度,亮度,明度和灰度。

<!--(255 0 0)-->
色相=0°+(0-0)*60/(255-0)= 0°
  或=360°-(0-0)*60/(255-0)= 0°
饱和度=[(255-0)/255]*100% = 100%
亮度=(255/255)*100% = 100%
明度=30%*255+59%*0+11%*0 = 76
灰度=(255+0)/2=127
<!--(0 255 255)-->
色相=120°+(255-0)*60/(255-0)= 180°
  或=240°-(255-0)*60/(255-0)= 180°
饱和度=[(255-0)/255]*100% = 100%
亮度=(255/255)*100% = 100%
明度=30%*0+59%*255+11%*255 = 179
灰度=(255+0)/2=127
<!--(60 200 95)-->
色相=120°+(95-60)*60/(200-60)= 135°
饱和度=[(200-60)/200]*100% = 70%
亮度=(200/255)*100%=78%
明度=30%*60+59%*200+11%*95 = 146
灰度=(200+60)/2 = 130

思考

现在大多数电脑都有能力显示数以百万计的颜色,起码浏览器制造商是这样说的,但是真实情况是这样么?那么安全色的定义还会维持多久呢?

配色方案

参考:

References