網(wǎng)頁設(shè)計(jì)之色彩理論

涉及到顏色時(shí)，您可以使用幾乎無限的調(diào)色板。 了解如何正確地做到這一點(diǎn)。

在設(shè)計(jì)網(wǎng)站時(shí)，您可以選擇高達(dá)1680萬種顏色。 當(dāng)你開始將它們組合成一個(gè)調(diào)色板時(shí)？ 您的一系列選擇立即變得無限。

為了讓您入門，我將深入探討以下主題：

詞匯 - 從色調(diào)到飽和到溫暖等等，我們將涵蓋語言設(shè)計(jì)師在說話時(shí)使用的顏色

色輪 - 用于可視化顏色之間關(guān)系的強(qiáng)大工具

配色方案 - 如何使用色輪選擇您的配色方案

色彩心理學(xué) - 人們通常與特定顏色相關(guān)的感受和意義

工具和資源 - 應(yīng)用程序和指南幫助您掌握顏色設(shè)計(jì)

為什么你應(yīng)該關(guān)心顏色

如果有人把你的鑰匙交給你的夢想車，免費(fèi)的話，你的頭會(huì)興奮地爆炸，對吧？ 當(dāng)然！

但如果這輛車被漆成你最討厭的色調(diào)呢？ 或者每個(gè)面板完全是不同的顏色？ 或者如果室內(nèi)混合石灰綠和建筑黃色？

你可能不太興奮，對吧？

顏色有意義。 它們就像字體一樣傳遞語氣和情感沖擊，這使得它成為一個(gè)強(qiáng)大的設(shè)計(jì)工具。

顏色的詞匯
在我們深入理論之前，您需要了解以下術(shù)語：

原色是所有其他色調(diào)的基礎(chǔ)。 人類感知三種基本顏色：品紅色，青色和黃色。 我們所看到的每一種顏色都包含這三種顏色的組合，其數(shù)量，亮度，色彩和陰影（見下文）不盡相同。

傳統(tǒng)上，我們認(rèn)為紅色，藍(lán)色和黃色是主要顏色，但研究表明洋紅色，青色和黃色更能描述我們的顏色體驗(yàn)。

在網(wǎng)絡(luò)上，我們使用RGB（紅綠藍(lán)）和十六進(jìn)制值來表示顏色。

RGB顏色系統(tǒng)將所有顏色定義為三個(gè)不同值的組合：一個(gè)特定的紅色，另一個(gè)綠色，另一個(gè)藍(lán)色。 所以：

- rgb（59,89,145）等于Facebook藍(lán)色

- rgb（0，0，0）等于黑色

- rgb（255,255,255）等于白色

十六進(jìn)制顏色系統(tǒng)將每個(gè)值轉(zhuǎn)換為十六進(jìn)制（基數(shù)為16）的表示形式，如下所示：

- ＃3b599b等于Facebook藍(lán)色

- ＃000000等于黑色

- #ffffff等于白色

每兩個(gè)字符代表一個(gè)顏色值，因此對于Facebook藍(lán)色，紅色為3b，綠色為59，而9b為藍(lán)色。

熱和冷

顏色也有"溫暖"，每種顏色都可以分為溫暖或涼爽的顏色。

溫暖的顏色含有更多的紅色和黃色。 他們可以在設(shè)計(jì)中喚起一種溫暖和激情。 他們也可以感覺到非常具有侵略性和大膽，提醒我們國際停車標(biāo)志。 這就是為什么紅色經(jīng)常用于錯(cuò)誤消息。

涼爽的顏色包含更多的藍(lán)色，引起寒冷的氣候，冰，冬天，水，夜間，死亡和悲傷。 它們可以帶有孤獨(dú)，冷漠和恐懼的內(nèi)涵。 涼爽的顏色也不那么積極和舒緩。 想想藍(lán)天，或者海灘上清澈湛藍(lán)的海水。 放松了嗎？

溫度

增加圖像的溫度意味著增加其橙色水平。 它通常使圖像看起來更暖和更快樂，類似于當(dāng)太陽在其上投射橙色光芒時(shí)世界看起來更快樂。 相比之下，降低圖像的溫度使其看起來更冷，更不容易吸引，就像陰天。

色調(diào)和陰影
當(dāng)您添加黑色時(shí)，將顏色添加到白色 - 色調(diào)會(huì)導(dǎo)致色調(diào)。 色調(diào)和陰影可讓您通過將不同級(jí)別的白色和黑色添加到基本顏色來創(chuàng)建單色配色方案。

例如，如果您的底色是＃8dbdd8（淺藍(lán)色），如下圖所示，您可以通過選擇兩個(gè)色調(diào)（兩個(gè)較亮的藍(lán)色）和兩個(gè)色調(diào)（兩個(gè)較暗的藍(lán)色）來創(chuàng)建單色方案。

飽和度，色調(diào)和亮度
飽和度描述了顏色的強(qiáng)度。 飽和度越高，顏色越濃，顏色越深，而飽和度越低，顏色越淡。 當(dāng)我們說"淺藍(lán)色"或"深綠色"時(shí)，我們正在描述飽和度的變化。

色調(diào)定義了顏色可以被描述為與紅色，橙色，黃色，綠色，藍(lán)色，靛藍(lán)和紫色（彩虹顏色）相似或不同的程度。 所以當(dāng)你描述一種顏色為"綠藍(lán)色"時(shí)，你用兩種色調(diào)來定義它。

亮度，也稱為價(jià)值或色調(diào)，定義了與純白色相比的顏色的感知亮度。

色輪
基本色輪包含用于創(chuàng)建配色方案的12種標(biāo)準(zhǔn)色。 餡餅的每一片代表一系列顏色，可以通過不同的飽和度，色調(diào)，色調(diào)，陰影和相鄰顏色的混合來實(shí)現(xiàn)。 組合的顏色（例如，黃色 - 橙色）由混合等量的基礎(chǔ)色調(diào)（黃色和橙色）而產(chǎn)生。

紅色，黃色和藍(lán)色是原色。 紫色，橙色和綠色是次要顏色。 其他一切都是第三種顏色，主要和次要顏色的混合。

設(shè)計(jì)使用色輪來選擇配色方案，它有四種風(fēng)格。

4種配色方案
設(shè)計(jì)師通過配對色輪中的多個(gè)顏色族來創(chuàng)建配色方案。 當(dāng)您遵循以下某種模式時(shí)，這通常效果好。

1.單色
單色配色方案由各種色調(diào)，陰影和單一基色的飽和度組成。 它們非常有凝聚力，但會(huì)冒著變得單調(diào)的風(fēng)險(xiǎn)。
2.補(bǔ)充
補(bǔ)色方案基于色輪兩側(cè)的兩種顏色。 因?yàn)檫@兩種色彩會(huì)有很大的不同，所以這種方案可以非常有效且引人注目。

專業(yè)提示：為您的號(hào)召性用語選擇一種補(bǔ)充顏色。 使用下面的方案，如果您的頁面背景為薄荷綠色，則可以使用粉紅色作為CTA按鈕。

3.類似
類似的方案具有三種顏色，在色輪上彼此相鄰。 由于色調(diào)的相似性，這些方案可以產(chǎn)生非常有凝聚力，統(tǒng)一的感覺，而沒有單色方案的單調(diào)性。

4.三位一體
要制作三色配色方案，請?jiān)谏喩侠L制等邊三角形（所有三邊長度相同的三角形），然后在三角形的點(diǎn)處選擇三種顏色。 這創(chuàng)造了一個(gè)多樣但平衡的方案。

色彩心理學(xué)
每種顏色都有其獨(dú)特的色調(diào)和意義。 通過仔細(xì)選擇你的顏色，你可以加強(qiáng)一個(gè)網(wǎng)站的整體信息。

注意：不同文化和地區(qū)的顏色含義可能會(huì)有很大差異。 以下描述主要針對美國。

紅色
這種充滿活力和積極的色彩可以根據(jù)具體情況傳達(dá)各種含義，但它具有強(qiáng)大的功能和天賦。 將它與黑色結(jié)合為一款男性氣質(zhì)，極具侵略性，適合運(yùn)動(dòng)型跑車。 將它與白色和金色搭配，它說明了愛與激情。 紅色也代表危險(xiǎn) - 認(rèn)為停止跡象 - 和血 - 認(rèn)為紅十字會(huì)。

橙色
溫暖，但不如紅色，橙色很難錯(cuò)過 - 這解釋了它在建筑，安全和狩獵設(shè)備中的用途。 它也幾乎尖叫秋天，南瓜和萬圣節(jié)。 橙色的溫暖可以喚起有趣而充滿活力的氛圍。

黃色
黃色代表陽光，溫暖和夏季。 這也是光譜中最明顯的顏色，所以它真的會(huì)跳出來。 與白色或黑色相結(jié)合時(shí)，它尤其引人注目，就像安全設(shè)備，校車和出租車一樣。 盡管如此，盡管如此，請小心，因?yàn)楹芏嗳硕几械讲贿m。

藍(lán)色
藍(lán)色喚起天體，熱帶和奇怪的專業(yè)。 鑒于它與水的長期聯(lián)系，我們認(rèn)為藍(lán)色是清新和清潔的。 然而，更深的藍(lán)色調(diào)可能會(huì)引起悲傷。 畢竟，我們稱之為"藍(lán)調(diào)"是有原因的。

綠色
作為大多數(shù)植物生命的顏色，綠色表現(xiàn)出增長和健康的感覺，使其成為有機(jī)，環(huán)保和健康產(chǎn)品的好選擇。 將它與藍(lán)色和棕色相結(jié)合以捕捉自然。 格林在美國也代表財(cái)富和金融。

棕色
你不會(huì)在網(wǎng)上看到太多的褐色，可能是因?yàn)樗馕吨a臟。 但如果你想創(chuàng)造一種土質(zhì)感和奢華感，這可能是一個(gè)復(fù)雜的時(shí)尚網(wǎng)站。

紫色
在古羅馬，只有富人才能買得起紫色（這種染料是由蝸牛殼制成的）。 這幾個(gè)世紀(jì)后，這種聯(lián)系依然很強(qiáng)烈，使紫色成為奢侈品牌的理想色彩。 當(dāng)與紅色相結(jié)合時(shí)，它可以感受到親密和浪漫。 隨著白人和粉紅色，它變得俏皮和孩子般。

白色
白色是關(guān)于純潔，純真和不育的。 你會(huì)在專注于婚禮，醫(yī)療保健，科學(xué)和靈性的網(wǎng)站上看到它。 它也意味著清潔和新鮮的感覺，如新洗和折疊的床單。

黑色
黑色意味著力量，奢侈，邪惡，死亡和未知。 善與惡之間的戰(zhàn)斗表現(xiàn)為白與黑 - 只看達(dá)斯維德和盧克天行者的平時(shí)服裝。

顏色工具和資源
由于所有復(fù)雜性和靈活性都可以通過顏色設(shè)計(jì)進(jìn)行設(shè)計(jì)，因此設(shè)計(jì)人員已經(jīng)構(gòu)建了一系列工具來幫助處理流程，這應(yīng)該不會(huì)讓您感到意外。 這里只是我們最喜歡的幾個(gè)。

配色方案（調(diào)色板）發(fā)電機(jī)
我最喜歡的兩個(gè)調(diào)色板生成器可讓您手動(dòng)選擇每種顏色，或者根據(jù)一種或兩種顏色自動(dòng)生成它們。

COLOURCODE為單色和互補(bǔ)等方案類型提供了預(yù)設(shè)模式，并且您可以將您的方案導(dǎo)出為.scss，.less，圖像或只是永久鏈接。 這也是一個(gè)有趣的發(fā)現(xiàn)工具，因?yàn)槭髽?biāo)在屏幕上移動(dòng)時(shí)陰影會(huì)更新。

Adobe Color CC，以前稱為"Kuler"，還具有方案類型預(yù)設(shè)功能，但增加了COLOURCODE沒有的兩個(gè)優(yōu)點(diǎn)。 首先，Color具有內(nèi)置的社交層，因此您可以探索其他人的調(diào)色板。 第二個(gè)（也是最優(yōu)越的）是從圖像中提取顏色方案的能力。

調(diào)色板的靈感
偉大的色彩組合需要靈感嗎？ 以下網(wǎng)站使用圖像和設(shè)計(jì)來說明不同顏色如何協(xié)同工作。 用它們來幫助指導(dǎo)你的選擇。

顏色使用靈感
需要同行設(shè)計(jì)師的靈感？ 除了：

色彩非常重要，星巴克等特許經(jīng)營商對其每個(gè)特許經(jīng)營地點(diǎn)的色差都有極低的容忍度。每個(gè)加盟商必須從批準(zhǔn)的顏色列表中進(jìn)行選擇。在通向咖啡廳的門打開之前，總部的一位代表將確保墻上的顏色符合嚴(yán)格的公差要求。

正確使用顏色，并且您的網(wǎng)站會(huì)感覺更加自然并放在一起。現(xiàn)在你已經(jīng)掌握了基本知識(shí)，我鼓勵(lì)你繼續(xù)走進(jìn)色彩理論的道路。但最重要的是，請務(wù)必查看正確使用顏色的美麗示例，并練習(xí)，練習(xí)和練習(xí)。

網(wǎng)站名稱：網(wǎng)頁設(shè)計(jì)之色彩理論
網(wǎng)頁網(wǎng)址：http://www.bm7419.com/news9/181159.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、網(wǎng)站制作、企業(yè)建站

廣告

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