網頁設計色彩理論配色

網頁設計中配色非常重要，直接影響著用戶的第一感覺，本文我將講述色彩理論的基礎知識以及3種簡單的配色方案，以讓你們在為 Web 站點選擇色彩時能有把握。在后面的文章中，我將講述如何簡化這些色彩選擇。聽著別人對你設計的 Web 站點的贊揚，畢竟比苦心孤詣地去進行色彩選擇更讓你愉快。

顏色、亮色、暗色 顏色，或色調，一般被劃分為原色、間色、復色。原色包括紅色、黃色和藍色，它們被稱為三原色，這是因為其它顏色不能調配出這三種顏色。在將三原色轉換為 Web 顏色時，你可以將它們表示為十六進制的顏色代碼，分別為 #ff0000，#ffff00 和 #0033cc，如圖1所示：

圖1：原色和間色，以及它們的十六進制顏色代碼

間色指紅、黃、藍三原色中的某二種原色相互混合的顏色，包括：

紅 + 黃 = 橙色（#ff9900） 黃 + 藍 = 綠色（#00cc00） 藍 + 紅 = 紫色（#660099） 復色由間色混合調配而成，它們位于上圖色環(huán)中所示的原色和間色之間。盡管 Web 顏色與“畫家”通常使用的顏色并不相同，但手頭有一個色輪（色輪如圖2所示），還是有助于你學習各種配色方案。此外，色輪還顯示所有的亮色（tint）、灰色調（tone）和暗色（shade），這樣你就可以認識到各種可能的顏色組合和搭配。以下列出了需要學習的幾個重要術語：

亮色（Tint）：加入白色時顯示出的顏色 灰色調（Tone）：加入灰色時顯示出的顏色 暗色（Shade）：加入黑色時顯示出的顏色 圖2：色輪實樣

下面為圖2中箭頭所指的色帶的說明：

最外層色帶：黃色和橙色調配而成的復色 第二色帶：該復色的亮色（加入白色） 第三色帶：顏色的灰色調（加入灰色） 最內層色帶：字輪上的暗色（加入黑色） 正如你們從以上的色輪中看到的那樣，向一種顏色加入的白色、灰色和黑色的數量是很小的，夠改變初始顏色和創(chuàng)建出所謂“單色方案”即已足夠。

單色方案 配色方案已通行很久了，因此沒有必要再重新設計一個色輪。盡管 Web 顏色與印刷顏色并不相同，但概念是一樣的。你只是把顏色名稱轉換為 16進制的顏色代碼，并使它們盡可能地完全匹配。我建議你們使用一個在線工具，即 ColorScheme Generator II（配色方案生成器II，如圖3所示），它不僅可以幫助你迅速和容易地確定配色方案，甚至還可以幫助你確定你選定的顏色是否為視力差或是色盲的用戶提供了足夠的對比度。

圖3：配色方案生成器 II

如果你在確定你選定的顏色是否提供了足夠的對比度時需要更多的幫助，可以使用我們 Paciello 小組提供的 Contrast Analyser（對比度分析器）。這個工具可檢查前景顏色和背景顏色之間的對比度。

為了實現在顏色生成器中生成黃橙色的亮色、灰色調和暗色，您要首先選擇上圖中箭頭所指的顏色，然后選擇色輪下方面板上的 Mono（單色）和圖右盒子下方面板上的 Default（默認），并在右底部的下拉式菜單中選擇 Normal Vision（正常視覺）選項。除非你是一個純粹主義者，不要在顏色盒上方的“reduce to ‘safe’ colours”（降至‘安全’顏色）方框中打勾。

備注：“Web 安全顏色”這個術語，產生于顯示器剛可以顯示 256色的那個時期，在 256色中，只有 216個顏色在 Windows/Mac/Unix 平臺上都是一樣的，因此就出現了“Web 安全顏色”這個名稱。盡管一些純粹主義者依然堅持使用“Web 安全調色板”，但現代的瀏覽器已經能夠處理所謂“24位色”。每個通道有 10至 11位的 24位色，實際上已能生成 16,777,216 種不同的顏色。換言之，我們已經可以有把握地說已不再需要“Web 安全調色板”了。

讓我們再回頭來看單色方案。遵照以上所描述的步驟，生成的顏色結果如下：黃橙色（#FFCC00）、亮色（#FFF2BF）、灰色調（#FFE680）、暗色（#B38F00）。與試圖通過將一個有形的色輪與一個 Web 瀏覽器的背光屏幕相匹配而做出的任何猜測相比，這些 16進制的數字的可靠度要高得多。同時，就像“Mono”（單色）所建議的，將這個方案轉化為一個單色方案，如圖4所示。

圖4：一個單色方案

一個單色方案等同于一種顏色，及其所有的亮色、灰色調和暗色。盡管這個配色方案是最容易使用的，但很多網頁設計師在進行網頁設計時，都不是很喜歡這種配色方案。因此，你可能希望學習其它的配色方案，為網頁中的鏈接、圖像和橫幅廣告添姿增彩。

互補色方案 下面我們學習互補色方案，即通過直接搭配色輪中相對的顏色，如圖5所示。

圖5：互補色方案的示例

當你選定一種顏色及其互補色時，你同時也選定了與這兩種顏色相關的亮色、灰色調和暗色。這提供了更廣的顏色選擇范圍，通過在線顏色工具可以很好地轉化為互補色方案，如圖6所示。

當前題目：網頁設計色彩理論配色
當前地址：http://bm7419.com/news3/324203.html

成都網站建設公司_創(chuàng)新互聯，為您提供ChatGPT、外貿建站、服務器托管、電子商務、定制網站、網站導航

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯