新網(wǎng)頁(yè)大法：網(wǎng)頁(yè)設(shè)計(jì)色彩理論配色理論

網(wǎng)頁(yè)設(shè)計(jì)中配色非常重要，直接影響著用戶的第一感覺(jué)，本文我將講述色彩理論的基礎(chǔ)知識(shí)以及3種簡(jiǎn)單的配色方案，以讓你們?cè)跒?Web 站點(diǎn)選擇色彩時(shí)能有把握。在后面的文章中，我將講述如何簡(jiǎn)化這些色彩選擇。聽(tīng)著別人對(duì)你設(shè)計(jì)的 Web 站點(diǎn)的贊揚(yáng)，畢竟比苦心孤詣地去進(jìn)行色彩選擇更讓你愉快。

顏色、亮色、暗色 顏色，或色調(diào)，一般被劃分為原色、間色、復(fù)色。原色包括紅色、黃色和藍(lán)色，它們被稱為三原色，這是因?yàn)槠渌伾荒苷{(diào)配出這三種顏色。在將三原色轉(zhuǎn)換為 Web 顏色時(shí)，你可以將它們表示為十六進(jìn)制的顏色代碼，分別為 #ff0000，#ffff00 和 #0033cc，如圖1所示：

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

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

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

亮色（Tint）：加入白色時(shí)顯示出的顏色 灰色調(diào)（Tone）：加入灰色時(shí)顯示出的顏色 暗色（Shade）：加入黑色時(shí)顯示出的顏色 圖2：色輪實(shí)樣

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

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

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

圖3：配色方案生成器 II

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

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

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

讓我們?cè)倩仡^來(lái)看單色方案。遵照以上所描述的步驟，生成的顏色結(jié)果如下：黃橙色（#FFCC00）、亮色（#FFF2BF）、灰色調(diào)（#FFE680）、暗色（#B38F00）。與試圖通過(guò)將一個(gè)有形的色輪與一個(gè) Web 瀏覽器的背光屏幕相匹配而做出的任何猜測(cè)相比，這些 16進(jìn)制的數(shù)字的可靠度要高得多。同時(shí)，就像“Mono”（單色）所建議的，將這個(gè)方案轉(zhuǎn)化為一個(gè)單色方案，如圖4所示。

圖4：一個(gè)單色方案

一個(gè)單色方案等同于一種顏色，及其所有的亮色、灰色調(diào)和暗色。盡管這個(gè)配色方案是最容易使用的，但很多網(wǎng)頁(yè)設(shè)計(jì)師在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，都不是很喜歡這種配色方案。因此，你可能希望學(xué)習(xí)其它的配色方案，為網(wǎng)頁(yè)中的鏈接、圖像和橫幅廣告添姿增彩。

互補(bǔ)色方案 下面我們學(xué)習(xí)互補(bǔ)色方案，即通過(guò)直接搭配色輪中相對(duì)的顏色，如圖5所示。

??成都網(wǎng)站建設(shè)?? 成都網(wǎng)站建設(shè)公司

圖5：互補(bǔ)色方案的示例

當(dāng)你選定一種顏色及其互補(bǔ)色時(shí)，你同時(shí)也選定了與這兩種顏色相關(guān)的亮色、灰色調(diào)和暗色。這提供了更廣的顏色選擇范圍，通過(guò)在線顏色工具可以很好地轉(zhuǎn)化為互補(bǔ)色方案，如圖6所示。

當(dāng)前名稱：新網(wǎng)頁(yè)大法：網(wǎng)頁(yè)設(shè)計(jì)色彩理論配色理論
當(dāng)前鏈接：http://bm7419.com/news4/326004.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、靜態(tài)網(wǎng)站、定制開(kāi)發(fā)、軟件開(kāi)發(fā)、建站公司、外貿(mào)建站

廣告

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