色碼表

色碼表英文為 Color code table,是網頁設計師在做設計時,挑選顏色常常會用到的參考表,好的設計往往需要做許多不同的顏色搭配與比較,才能呈現出最適合的網頁風格,舉凡表格的設計、網頁背景顏色、元素邊框顏色、圖層陰影效果、文字顏色...等,都可以使用色碼表來挑選所需要的顏色,通常使用顏色有三種不同的寫法,分別是使用顏色的英文名稱、十六進位色碼以及 RGB 色碼,看個人習慣使用哪一種表示方式,以下為編輯們所整理的十六進位制色碼表,共有 432 種不同的顏色可以挑選,應該可以滿足大部分設計時所需要的色碼。

十六進位色碼表
#FFF2F2#FFE8E8#FFDEDE#FFD4D4#FFC9C9#FFBFBF#FFB5B5#FFABAB
#FFA1A1#FF9696#FF8C8C#FF8282#FF7878#FF6E6E#FF6363#FF5959
#FF5F5F#FF4545#FF3B3B#FF3030#FF2626#FF1C1C#FF1212#FF0000
#F50000#F00000#EB0000#E60000#E00000#DB0000#D60000#D10000
#CC0000#C70000#C20000#BD0000#B80000#B20000#AD0000#A80000
#A30000#9E0000#990000#940000#8F0000#8A0000#850000#800000
#FFFAF2#FFF7E8#FFF3DE#FFF0D4#FFECC9#FFE8BF#FFE5B5#FFE1AB
#FFDEA1#FFDA96#FFD78C#FFD382#FFCF78#FFCC6E#FFC863#FFC559
#FFC14F#FFBD45#FFBA3B#FFB630#FFB326#FFB01C#FFAC12#FFA600
#F59F00#F09C00#EB9900#E69500#E09200#DB8F00#D68B00#D18800
#CC8500#C78100#C27E00#BD7B00#B87800#B27400#AD7100#A86E00
#A36A00#9E6700#996400#946000#8F5D00#8A5A00#855600#805300
#FFFFF2#FFFFE8#FFFFDE#FFFFD4#FFFFC9#FFFFBF#FFFFB5#FFFFAB
#FFFFA1#FFFF96#FFFF8C#FFFF82#FFFF78#FFFF6E#FFFF63#FFFF59
#FFFF4F#FFFF45#FFFF3B#FFFF30#FFFF26#FFFF1C#FFFF0F#FFFF00
#F5F500#F0F000#EBEB00#E6E600#E0E000#DBDB00#D6D600#D1D100
#CCCC00#C7C700#C2C200#BDBD00#B8B800#B2B200#ADAD00#A8A800
#A3A300#9E9E00#999900#949400#8F8F00#8A8A00#858500#808000
#F2FFF2#E8FFE8#DEFFDE#D4FFD4#C9FFC9#BFFFBF#B5FFB5#ABFFAB
#A1FFA1#96FF96#8CFF8C#82FF82#78FF78#6EFF6E#63FF63#59FF59
#4FFF4F#45FF45#3BFF3B#30FF30#26FF26#1AFF19#0DFF0D#00FF00
#00F500#00F000#00EB00#00E600#00E000#00DB00#00D600#00D100
#00CC00#00C700#00C200#00BD00#00B800#00B200#00AD00#00A800
#00A300#009E00#009900#009400#008F00#008A00#008500#008000
#F2FFFF#E8FFFF#DEFFFF#D4FFFF#C9FFFF#BFFFFF#B5FFFF#ABFFFF
#A1FFFF#96FFFF#8CFFFF#82FFFF#78FFFF#6EFFFF#63FFFF#59FFFF
#4FFFFF#45FFFF#3DFFFF#30FFFF#26FFFF#1CFFFF#12FFFF#00FFFF
#00F5F5#00F0F0#00EBEB#00E6E6#00E0E0#00DBDB#00D6D6#00D1D1
#00CCCC#00C7C7#00C2C2#00BDBD#00B8B8#00B2B2#00ADAD#00A8A8
#00A3A3#009E9E#009999#009494#008F8F#008A8A#008585#008080
#EBEBFF#E0E0FF#D6D6FF#CCCCFF#C2C2FF#B8B8FF#ADADFF#A3A3FF
#9999FF#8C8CFF#8282FF#7878FF#6E6EFF#6363FF#5959FF#4F4FFF
#4545FF#3B3BFF#3030FF#2626FF#1C1CFF#1212FF#0808FF#0000FF
#0000FA#0000F5#0000EB#0000E6#0000E0#0000DB#0000D6#0000D1
#0000CC#0000C7#0000C2#0000BD#0000B8#0000B2#0000AD#0000A8
#0000A3#00009E#000099#000094#00008F#00008A#000085#000080
#FAF2FF#F5E8FF#F1DEFF#EDD4FF#E8C9FF#E4BFFF#E0B5FF#DBABFF
#D7A1FF#D396FF#CE8CFF#CA82FF#C678FF#C26EFF#BD63FF#B959FF
#B54FFF#B045FF#AC3BFF#A830FF#A326FF#9F1CFF#990DFF#9300FF
#9300FF#8D00F5#8700EB#8400E6#8100E0#7F00DB#7C00D6#7900D1
#7600CC#7300C7#7000C2#6D00BD#6A00B8#6700B2#6400AD#6100A8
#5E00A3#5B009E#580099#550094#52008F#4F008A#4C0085#4A0080
#FFF2FF#FFE8FF#FFDEFF#FFD4FF#FFC9FF#FFBFFF#FFB5FF#FFABFF
#FFA1FF#FF96FF#FF8CFF#FF82FF#FF78FF#FF6EFF#FF63FF#FF59FF
#FF4FFF#FF45FF#FF3BFF#FF30FF#FF26FF#FF19FF#FF0DFF#FF00FF
#F700F7#F000F0#EB00EB#E600E5#E000E0#DB00DB#D600D6#D100D1
#CC00CC#C700C7#C200C2#BD00BD#B800B8#B200B2#AD00AD#A800A8
#A300A3#9E009E#990099#940094#8F008F#8A008A#850085#800080
#FAFAFA#F5F5F5#EDEDED#E8E8E8#E3E3E3#DEDEDE#D9D9D9#D4D4D4
#CFCFCF#C9C9C9#C4C4C4#BFBFBF#BABABA#B5B5B5#B0B0B0#ABABAB
#A6A6A6#A1A1A1#9C9C9C#969696#919191#8C8C8C#878787#828282
#7D7D7D#787878#737373#6E6E6E#696969#636363#5E5E5E#595959
#545454#4F4F4F#4A4A4A#454545#404040#3B3B3B#363636#303030
#2B2B2B#262626#212121#1C1C1C#171717#0F0F0F#0A0A0A#000000
以上色碼表採紅、橙、黃、綠、藍、靛、紫以及黑色的排列方式,每一種主要顏色細分為 48 個不同色碼,這些色碼不一定能夠轉換為顏色英文名稱,但原則上可以轉換為 RGB 色碼,主流的瀏覽器幾乎都能呈現這些色碼。隨著不同螢幕以及瀏覽器的顏色顯示差異,在使用此色碼表時,建議多用幾種不同的瀏覽器以及不同的螢幕做顏色呈現的比較。

除了使用色碼表取得顏色的色碼之外,還有沒有其他方式能夠找到顏色的色碼呢?當然有的,常見的圖片處理軟體或繪圖軟體,如專業設計師常採用的 Photoshop、Dreamweaver、GIMP 等軟體,幾乎都有內建色碼表,設計師如果使用這些專業軟體,其實不太需要額外找色碼表,直接使用內建的模組選擇顏色是最快的方式。

色碼表的使用範例一、用來設計或修改文字顏色
<span style="color:色碼;">設計文字顏色</span>
透過 <span> 標籤將文字標示起來,直接使用 color 屬性即可修改文字的顏色。

色碼表的使用範例二、用來設計或修改 DIV 區塊的背景顏色
<div style="background-color:色碼;">設計區塊的背景顏色</div>
修改 DIV 區塊的背景顏色請使用 background-color 屬性。

色碼表的使用範例三、用來設計或修改表格背景顏色
<table style="background-color:色碼;"><tr><td></td></tr></table>
HTML table 表格的背景顏色可以使用 bgcolor 或 background-color 來設計,設計師可以為整個表格的背景顏色作一次規劃,也可以分別對每個欄位 <td> 設計不同的背景顏色,例如 <td bgcolor="色碼">,詳細的表格與法請參閱:HTML table 表格

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012