CSS顏色

學習如何在CSS中使用顏色 默認情況下,網頁瀏覽器在使用顏色方面的渲染效果相當低劣。 我們有白色背景、黑色文字和藍色連結。這只是這樣而已。 幸運的是,CSS給了我們在設計中添加顏色的能力。 我們有以下屬性: color background-color border-color 所有這些屬性都接受一個顏色值,可以以不同的形式呈現。 命名顏色 首先,我們有CSS關鍵字定義的顏色。CSS一開始只有16個,但如今有大量的顏色名稱: [中文翻譯略] 除了“tranparent”和“currentColor”以外,它們都是CSS顏色模組4的一部分,它們是大小寫不敏感的。 維基百科有一個很好的表格可以根據名稱選擇完美的顏色。 命名顏色並不是唯一的選擇。 RGB和RGBa 您可以使用“rgb()”函數根據RGB表示法計算顏色,根據其紅綠藍部分設置顏色。範圍從0到255: p { color: rgb(255,255,255); /* white */ background-color: rgb(0,0,0); /* black */ } “rgba()”讓您可以添加alpha通道以輸入透明部分。這可以是0到1的數字: p { background-color: rgba(0,0,0,0.5); } 十六進位表示法 另一個選擇是使用十六進位表示法表示顏色的RGB部分,它由3個塊組成。 黑色,即“rgb(0,0,0)”,可以表示為“#000000”或“#000”(如果兩個數字相等,我們可以將2個數字簡化為1個)。 白色,即“rgb(255,255,255)”,可以表示為“#ffffff”或“#fff”。 十六進位表示法允許我們使用2位數來表示0到255之間的數字,因為它們可以從0到15(f)。 通過在末尾添加1或2個更多的數字,我們可以添加alpha通道,例如“#00000033”。並非所有瀏覽器都支持簡短的表示法,因此請使用全部6個數字來表示RGB部分。 HSL和HSLa 這是CSS的一個相對較新的添加。 HSL = 色相 飽和度 明度。 在這種表示法中,黑色為“hsl(0, 0%, 0%)”,白色為“hsl(0, 0%, 100%)”。 如果您對HSL比RGB更熟悉,由於您的過去知識,您肯定可以使用它。 您還可以使用“hsla()”將alpha通道添加到混合中,再次是0到1之間的數字:hsl(0, 0%, 0%, 0.5)

RGB 色碼

一個整理了 RGB 色碼的表格,這些色碼很有用但很難記住。你可以透過色碼找到對應的顏色,或是相反地透過顏色找到對應的色碼。 快速找到 RGB 色碼的組合。 顏色 名稱 #RRGGBB (十六進位碼) R,G,B (十進位碼) maroon #800000 (128,0,0) darkred #8B0000 (139,0,0) brown #A52A2A (165,42,42) firebrick #B22222 (178,34,34) crimson #DC143C (220,20,60) red #FF0000 (255,0,0) tomato #FF6347 (255,99,71) coral #FF7F50 (255,127,80) indianred #CD5C5C (205,92,92) lightcoral #F08080 (240,128,128) darksalmon #E9967A (233,150,122) salmon #FA8072 (250,128,114) lightsalmon #FFA07A (255,160,122) orangered #FF4500 (255,69,0) darkorange #FF8C00 (255,140,0) orange #FFA500 (255,165,0) gold #FFD700 (255,215,0) darkgoldenrod #B8860B (184,134,11) goldenrod #DAA520 (218,165,32) palegoldenrod #EEE8AA (238,232,170) darkkhaki #BDB76B (189,183,107) khaki #F0E68C (240,230,140) olive #808000 (128,128,0) yellow #FFFF00 (255,255,0) yellowgreen #9ACD32 (154,205,50) darkolivegreen #556B2F (85,107,47) olivedrab #6B8E23 (107,142,35) lawngreen #7CFC00 (124,252,0) chartreuse #7FFF00 (127,255,0) greenyellow #ADFF2F (173,255,47) darkgreen #006400 (0,100,0) green #008000 (0,128,0) forestgreen #228B22 (34,139,34) lime #00FF00 (0,255,0) limegreen #32CD32 (50,205,50) lightgreen #90EE90 (144,238,144) palegreen #98FB98 (152,251,152) darkseagreen #8FBC8F (143,188,143) mediumspringgreen #00FA9A (0,250,154) springgreen #00FF7F (0,255,127) seagreen #2E8B57 (46,139,87) mediumaquamarine #66CDAA (102,205,170) mediumseagreen #3CB371 (60,179,113) lightseagreen #20B2AA (32,178,170) darkslategray #2F4F4F (47,79,79) teal #008080 (0,128,128) darkcyan #008B8B (0,139,139) aqua #00FFFF (0,255,255) cyan #00FFFF (0,255,255) lightcyan #E0FFFF (224,255,255) darkturquoise #00CED1 (0,206,209) turquoise #40E0D0 (64,224,208) mediumturquoise #48D1CC (72,209,204) paleturquoise #AFEEEE (175,238,238) aquamarine #7FFFD4 (127,255,212) powderblue #B0E0E6 (176,224,230) cadetblue #5F9EA0 (95,158,160) steelblue #4682B4 (70,130,180) cornflowerblue #6495ED (100,149,237) deepskyblue #00BFFF (0,191,255) dodgerblue #1E90FF (30,144,255) lightblue #ADD8E6 (173,216,230) skyblue #87CEEB (135,206,235) lightskyblue #87CEFA (135,206,250) midnightblue #191970 (25,25,112) navy #000080 (0,0,128) darkblue #00008B (0,0,139) mediumblue #0000CD (0,0,205) blue #0000FF (0,0,255) royalblue #4169E1 (65,105,225) blueviolet #8A2BE2 (138,43,226) indigo #4B0082 (75,0,130) darkslateblue #483D8B (72,61,139) slateblue #6A5ACD (106,90,205) mediumslateblue #7B68EE (123,104,238) mediumpurple #9370DB (147,112,219) darkmagenta #8B008B (139,0,139) darkviolet #9400D3 (148,0,211) darkorchid #9932CC (153,50,204) mediumorchid #BA55D3 (186,85,211) purple #800080 (128,0,128) thistle #D8BFD8 (216,191,216) plum #DDA0DD (221,160,221) violet #EE82EE (238,130,238) magenta / fuchsia #FF00FF (255,0,255) orchid #DA70D6 (218,112,214) mediumvioletred #C71585 (199,21,133) palevioletred #DB7093 (219,112,147) deeppink #FF1493 (255,20,147) hotpink #FF69B4 (255,105,180) lightpink #FFB6C1 (255,182,193) pink #FFC0CB (255,192,203) antiquewhite #FAEBD7 (250,235,215) beige #F5F5DC (245,245,220) bisque #FFE4C4 (255,228,196) blanchedalmond #FFEBCD (255,235,205) wheat #F5DEB3 (245,222,179) cornsilk #FFF8DC (255,248,220) lemonchiffon #FFFACD (255,250,205) lightgoldenrodyellow #FAFAD2 (250,250,210) lightyellow #FFFFE0 (255,255,224) saddlebrown #8B4513 (139,69,19) sienna #A0522D (160,82,45) chocolate #D2691E (210,105,30) peru #CD853F (205,133,63) sandybrown #F4A460 (244,164,96) burlywood #DEB887 (222,184,135) tan #D2B48C (210,180,140) rosybrown #BC8F8F (188,143,143) moccasin #FFE4B5 (255,228,181) navajowhite #FFDEAD (255,222,173) peachpuff #FFDAB9 (255,218,185) mistyrose #FFE4E1 (255,228,225) lavenderblush #FFF0F5 (255,240,245) linen #FAF0E6 (250,240,230) oldlace #FDF5E6 (253,245,230) papayawhip #FFEFD5 (255,239,213) seashell #FFF5EE (255,245,238) mintcream #F5FFFA (245,255,250) slategray #708090 (112,128,144) lightslategray #778899 (119,136,153) lightsteelblue #B0C4DE (176,196,222) lavender #E6E6FA (230,230,250) floralwhite #FFFAF0 (255,250,240) aliceblue #F0F8FF (240,248,255) ghostwhite #F8F8FF (248,248,255) honeydew #F0FFF0 (240,255,240) ivory #FFFFF0 (255,255,240) azure #F0FFFF (240,255,255) snow #FFFAFA (255,250,250) black #000000 (0,0,0) dimgray / dimgrey #696969 (105,105,105) gray / grey #808080 (128,128,128) darkgray / darkgrey #A9A9A9 (169,169,169) silver #C0C0C0 (192,192,192) lightgray / lightgrey #D3D3D3 (211,211,211) gainsboro #DCDCDC (220,220,220) whitesmoke #F5F5F5 (245,245,245) white #FFFFFF (255,255,255)