1. 程式人生 > >色碼錶

色碼錶

最近在更新設計部落格頁面,需用用到css色碼錶,以備以後使用,現轉載此處,點選此處檢視原文

色碼表英文為 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="">設計區塊的背景顏色</div>

修改 DIV 區塊的背景顏色請使用 background-color 屬性。

色碼表的使用範例三、用來設計或修改表格背景顏色

<table style=""><tr><td></td></tr></table>

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

延伸閱讀

 

點選此處檢視原文