CSS 2.1 快速導覽 - CSS 3 的 X11 延伸顏色關鍵字列表

由 X Window 系统制定的延伸色彩名稱，現在已經被 CSS 3 列入標準，大致可分成十個色系。



紅色系
顏色名稱RGB值瀏覽器顯示的顏色
red#FF0000, rgb(255, 0, 0)
lightsalmon#FFA07A, rgb(255, 160, 122)
salmon#FA8072, rgb(250, 128, 114)
darksalmon#E9967A, rgb(233, 150, 122)
lightcoral#F08080, rgb(240, 128, 128)
indianred#CD5C5C, rgb(205, 92, 92)
crimson#DC143C, rgb(220, 20, 60)
firebrick#B22222, rgb(178, 34, 34)
darkred#8B0000, rgb(139, 0, 0)

粉紅色系
顏色名稱RGB值瀏覽器顯示的顏色
pink#FFC0CB, rgb(255, 192, 203)
lightpink#FFB6C1, rgb(255, 182, 193)
hotpink#FF69B4, rgb(255, 105, 180)
deeppink#FF1493, rgb(255, 20, 147)
palevioletred#DB7093, rgb(219, 112, 147)
mediumvioletred#C71585, rgb(199, 21, 133)


橙色系
顏色名稱RGB值瀏覽器顯示的顏色
orange#FFA500, rgb(255, 165, 0)
darkorange#FF8C00, rgb(255, 140, 0)
coral#FF7F50, rgb(255, 127, 80)
tomato#FF6347, rgb(255, 99, 71)
orangered#FF4500, rgb(255, 69, 0)


黃色系
顏色名稱RGB值瀏覽器顯示的顏色
yellow#FFFF00, rgb(255, 255, 0)
lightyellow#FFFFE0, rgb(255, 255, 224)
lemonchiffon#FFFACD, rgb(255, 250, 205)
lightgoldenrodyellow#FAFAD2, rgb(250, 250, 210)
papayawhip#FFEFD5, rgb(255, 239, 213)
moccasin#FFE4B5, rgb(255, 228, 181)
peachpuff#FFDAB9, rgb(255, 218, 185)
palegoldenrod#EEE8AA, rgb(238, 232, 170)
khaki#F0E68C, rgb(240, 230, 140)
darkkhaki#BDB76B, rgb(189, 183, 107)
gold#FFD700, rgb(255, 215, 0)


紫色系
顏色名稱RGB值瀏覽器顯示的顏色
purple#800080, rgb(128, 0, 128)
lavender#E6E6FA, rgb(230, 230, 250)
thistle#D8BFD8, rgb(216, 191, 216)
plum#DDA0DD, rgb(221, 160, 221)
violet#EE82EE, rgb(238, 130, 238)
orchid#DA70D6, rgb(218, 112, 214)
fuchsia#FF00FF, rgb(255, 0, 255)
magenta#FF00FF, rgb(255, 0, 255)
mediumorchid#BA55D3, rgb(186, 85, 211)
mediumpurple#9370DB, rgb(147, 112, 219)
blueviolet#8A2BE2, rgb(138, 43, 226)
darkviolet#9400D3, rgb(148, 0, 211)
darkorchid#9932CC, rgb(153, 50, 204)
darkmagenta#8B008B, rgb(139, 0, 139)
mediumslateblue#7B68EE, rgb(123, 104, 238)
slateblue#6A5ACD, rgb(106, 90, 205)
darkslateblue#483D8B, rgb(72, 61, 139)
indigo#4B0082, rgb(75, 0, 130)


綠色系
顏色名稱RGB值瀏覽器顯示的顏色
green#008000, rgb(0, 128, 0)
palegreen#98FB98, rgb(152, 251, 152)
lightgreen#90EE90, rgb(144, 238, 144)
yellowgreen#9ACD32, rgb(154, 205, 50)
greenyellow#ADFF2F, rgb(173, 255, 47)
chartreuse#7FFF00, rgb(127, 255, 0)
lawngreen#7CFC00, rgb(124, 252, 0)
lime#00FF00, rgb(0, 255, 0)
limegreen#32CD32, rgb(50, 205, 50)
mediumspringgreen#00FA9A, rgb(0, 250, 154)
springgreen#00FF7F, rgb(0, 255, 127)
mediumaquamarine#66CDAA, rgb(102, 205, 170)
aquamarine#7FFFD4, rgb(127, 255, 212)
lightseagreen#20B2AA, rgb(32, 178, 170)
mediumseagreen#3CB371, rgb(60, 179, 113)
seagreen#2E8B57, rgb(46, 139, 87)
darkseagreen#8FBC8F, rgb(143, 188, 143)
forestgreen#228B22, rgb(34, 139, 34)
darkgreen#006400, rgb(0, 100, 0)
olivedrab#6B8E23, rgb(107, 142, 35)
olive#808000, rgb(128, 128, 0)
darkolivegreen#556B2F, rgb(85, 107, 47)
teal#008080, rgb(0, 128, 128)


藍色系
顏色名稱RGB值瀏覽器顯示的顏色
blue#0000FF, rgb(0, 0, 255)
lightblue#ADD8E6, rgb(173, 216, 230)
powderblue#B0E0E6, rgb(176, 224, 230)
paleturquoise#AFEEEE, rgb(175, 238, 238)
mediumturquoise#48D1CC, rgb(72, 209, 204)
turquoise#40E0D0, rgb(64, 224, 208)
darkturquoise#00CED1, rgb(0, 206, 209)
lightcyan#E0FFFF, rgb(224, 255, 255)
cyan#00FFFF, rgb(0, 255, 255)
aqua#00FFFF, rgb(0, 255, 255)
darkcyan#008B8B, rgb(0, 139, 139)
cadetblue#5F9EA0, rgb(95, 158, 160)
lightsteelblue#B0C4DE, rgb(176, 196, 222)
steelblue#4682B4, rgb(70, 130, 180)
lightskyblue#87CEFA, rgb(135, 206, 250)
skyblue#87CEEB, rgb(135, 206, 235)
deepskyblue#00BFFF, rgb(0, 191, 255)
dodgerblue#1E90FF, rgb(30, 144, 255)
cornflowerblue#6495ED, rgb(100, 149, 237)
royalblue#4169E1, rgb(65, 105, 225)
mediumblue#0000CD, rgb(0, 0, 205)
darkblue#00008B, rgb(0, 0, 139)
navy#000080, rgb(0, 0, 128)
midnightblue#191970, rgb(25, 25, 112)


褐色系
顏色名稱RGB值瀏覽器顯示的顏色
brown#A52A2A, rgb(165, 42, 42)
cornsilk#FFF8DC, rgb(255, 248, 220)
blanchedalmond#FFEBCD, rgb(255, 235, 205)
bisque#FFE4C4, rgb(255, 228, 196)
navajowhite#FFDEAD, rgb(255, 222, 173)
wheat#F5DEB3, rgb(245, 222, 179)
burlywood#DEB887, rgb(222, 184, 135)
tan#D2B48C, rgb(210, 180, 140)
rosybrown#BC8F8F, rgb(188, 143, 143)
sandybrown#F4A460, rgb(244, 164, 96)
goldenrod#DAA520, rgb(218, 165, 32)
darkgoldenrod#B8860B, rgb(184, 134, 11)
peru#CD853F, rgb(205, 133, 63)
chocolate#D2691E, rgb(210, 105, 30)
saddlebrown#8B4513, rgb(139, 69, 19)
sienna#A0522D, rgb(160, 82, 45)
maroon#800000, rgb(128, 0, 0)


白色系
顏色名稱RGB值瀏覽器顯示的顏色
white#FFFFFF, rgb(255, 255, 255)
snow#FFFAFA, rgb(255, 250, 250)
honeydew#F0FFF0, rgb(240, 255, 240)
mintcream#F5FFFA, rgb(245, 255, 250)
azure#F0FFFF, rgb(240, 255, 255)
aliceblue#F0F8FF, rgb(240, 248, 255)
ghostwhite#F8F8FF, rgb(248, 248, 255)
whitesmoke#F5F5F5, rgb(245, 245, 245)
seashell#FFF5EE, rgb(255, 245, 238)
beige#F5F5DC, rgb(245, 245, 220)
oldlace#FDF5E6, rgb(253, 245, 230)
floralwhite#FFFAF0, rgb(255, 250, 240)
ivory#FFFFF0, rgb(255, 255, 240)
antiquewhite#FAEBD7, rgb(250, 235, 215)
linen#FAF0E6, rgb(250, 240, 230)
lavenderblush#FFF0F5, rgb(255, 240, 245)
mistyrose#FFE4E1, rgb(255, 228, 225)


灰色系
顏色名稱RGB值瀏覽器顯示的顏色
gray#808080, rgb( 128, 128, 128)
gainsboro#DCDCDC, rgb(220, 220, 220)
lightgray#D3D3D3, rgb(211, 211, 211)
silver#C0C0C0, rgb(192, 192, 192)
darkgray#A9A9A9, rgb(169, 169, 169)
dimgray#696969, rgb(105, 105, 105)
lightslategray#778899, rgb(119, 136, 153)
slategray#708090, rgb(112, 128, 144)
darkslategray#2F4F4F, rgb(47, 79, 79)
black#000000, rgb(0, 0, 0)


舉例如下
div {
    width: 100%;
    height: 14%
}

div.gray {
    background-color: gray;
}

div.gainsboro {
    background-color: gainsboro;
}

div.lightgray {
    background-color: lightgray;
}

div.silver {
    background-color: silver;
}

div.darkgray {
    background-color: darkgray;
}

div.dimgray {
    background-color: dimgray;
}

div.black {
    background-color: black;
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：demo13.css
    功能：示範 CSS 2.1 樣式表的使用 
    作者：張凱慶
    時間：西元 2011 年 7 月 */


我們以下面的 HTML 文件載入
<html>
<head>
<title>網頁標題</title>
<link rel="stylesheet" type="text/css" 
      href="demo13.css">
</head>
<body>
<div class="gainsboro"></div>
<div class="lightgray"></div>
<div class="silver"></div>
<div class="darkgray"></div>
<div class="gray"></div>
<div class="dimgray"></div>
<div class="black"></div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：demo13.html
     功能：示範 CSS 2.1 樣式表的使用 
     作者：張凱慶
     時間：西元 2011 年 7 月 -->


瀏覽器 (broswer) 開啟如下



中英文術語對照
瀏覽器broswer


您可以繼續參考

基本概念
單位
選取器
@import 規則
階層
元素呈現方式 display


相關目錄
CSS 2.1 快速導覽
HTML, CSS 教材
首頁


參考資料

http://www.w3.org/TR/2003/CR-css3-color-20030514/
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)