在web站點設計中,對網頁進行配色通常是設計師的直覺感受或者多次反覆實驗:例如對網頁顏色主色彩的選擇,考慮各種顏色的色調、飽和度,等等...,最終才能達到比較好的配色效果。
現在,網絡上有一些專用於配色設計的調色板工具,對網頁配色設計都很有價值。
個人覺得,比較好用、非常專業、同時對於網頁設計師(更專注於網頁配色)非常有幫助的一個在線免費工具 - 我很驚歎這是用Javascript寫的:)
http://www.pixy.cz/apps/barvy/index-en.html
簡要說明使用方法:
1. 選擇基色
在配色前,你需要在左側的調色板中先選擇一個基色(Base color),選擇基色也很有講究,調色
版爲我們劃分了暖色(warm)和冷色(cold)兩種色調,並依此進行了更精確的數值區分(直接對基色
微調按鈕進行操作)。
2. 選擇配色方案
在Scheme的選擇菜單中可以選擇多種方案進行配色,具體有:單色配色、對比色配色(基色加補色
)、可調整的對比色配色(可以調整Distance參數對補色進行微調)、雙對比色(兩個比較接近的
顏色及它們所對應的補色)、類似色(基色和它相接近的顏色)。
a. 單色配色方案(monochromatic):如果整個網頁配色由一些單一顏色漸變組成,這個方案是不錯
的選擇。
b. 對比色配色(contrast):原理是爲基色增加與其色差比較大的幾種對比色。如果整個網頁的色
彩反差比較大,並且形成反差的顏色數量不是很多,推薦用這種方案。
c. 可調整的對比色配色(soft contrast):參照b方案,可以進一步調整各對比色與基色的色差
,方法是調節Distance參數。
d. 雙對比色(double contrast):兩個比較接近的顏色及它們所對應的對比色(4個一組),爲
基色增加一個相近顏色,同時調節出這兩種顏色的對比色,如果將Distance調節至0,將只看到2個
一組的對比色,隨着Distance的增加,會逐漸顯現4個一組 - 兩對對比色。
e. 類似色(analogic):與基色比較接近的各種顏色,推薦色彩比較柔和、反差不明顯的網頁使用
。
3.自定義基色的色調(Hue)、飽和度(Saturation)、亮度(Brightness)
對這些選項進行微調後,所配置的方案顏色會起到相應變化。
4.在最底部的select選擇器中,你可以特別地爲色盲設計的相應的配色方案.
5.選擇WebColors後,使配出的顏色更符合網頁用色!
6.除此之外,點擊free editor按鈕,進行自由配色。
接着,我再推薦一些調色版的相關鏈接,有興趣的朋友可仔細琢磨一下:
http://www.colormatch.dk/
http://slayeroffice.com/tools/color_palette/
http://kohaistyle.com/scripts/quickcolor http://www.easyrgb.com/harmonies.php
http://www.stcsig.org/usability/topics/colorblind.html
http://color.twysted.net
http://www.coolhomepages.com/cda/color
http://www.masternewmedia.org/2003/04/30/
how_to_select_perfectly_matching_color_combinations.htm
http://dev.sessions.edu/ilu/ilu_1.html http://www.technetguru.com/design
http://www.mundidesign.com/webct
http://graphicdesign.about.com/library/color/blweb2.htm
http://www.pourpre.com/chromograf/en/
http://www.webwhirlers.com/colors/wizard.asp
最後, 如果你覺得我推薦的調色板好用或者還不錯的話,請不要忘記在註釋中評論。