配色
基本的16色
仅以下16种颜色的英文名称可以被w3c的HTML 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）的技术。
参考：
- http://www.allfreebackgrounds.com/color_3.html
- http://caca.zoy.org/study/part6.html
- http://www.htmlgoodies.com/tutorials/colors/article.php/3479001
- http://whatis.techtarget.com/definition/dithering
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 彩色立方体的相关内容我还没有安利明白(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
思考
现在大多数电脑都有能力显示数以百万计的颜色，起码浏览器制造商是这样说的，但是真实情况是这样么？那么安全色的定义还会维持多久呢？
配色方案
参考：
- http://flatuicolors.com/
- https://bjango.com/mac/skalacolor/
- http://nathanspeller.com/color-pickers/
- http://www.colorfavs.com/
- http://colllor.com/
- http://nipponcolors.com/
- http://www.0to255.com/
- http://bootflat.github.io/color-picker.html
- http://colorhunt.co/
- http://hex-code.com/
- http://www.colordic.org/s/
- http://www.colorsz.com/Article/48.aspx
References
- ^6x6x6 Color Cube，站内相关页面有Through the 6x6x6 Color Cube An Interactive Voyage、Through the 6x6x6 Color Cube Corner to Corner等。
- ^色相公式中的原色色相（RGB最大值色相）是指基色通道最大值色相，R为0°度（或360°），G为120°，B为240°.正负号取值方法是看中间值色相在最大值的色相基础上，按中间值的定位，顺时针为负，逆时针为正。再如RGB为（150 40 80），色相为（0°-40*60/110=-338°）。