設(shè)計(jì)師的顏色理論理解概念和術(shù)語

創(chuàng)美優(yōu)品設(shè)計(jì)師珍藏版配色方案，拿出來和大家一起學(xué)習(xí)和探討。

如果要在設(shè)計(jì)中有效的使用顏色，那么就需要了解一下顏色的概念和顏色理論術(shù)語。透徹的了解

像色度、明度和順口度這樣的概念是創(chuàng)建屬于你自己的非常棒的配色方案的關(guān)鍵。在我們的顏色

理論系列第1部分：顏色的含義中，提到了不同顏色的意義。在此我們首先將溫習(xí)一下這個(gè)理

論的基礎(chǔ)：什么條件將影響到T已知的顏色，例如添加灰色、白色或灰色到純色相中，此外，

還有這樣做將如何影響設(shè)計(jì)，當(dāng)然示例是必不可少的。

色相

色相是最基本的顏色術(shù)語，通常指的是一個(gè)物體的顏色。當(dāng)我們說"藍(lán)色"、"綠色"或"紅色"

時(shí)，我們所談?wù)摰木褪巧?。設(shè)計(jì)當(dāng)中色相的使用向網(wǎng)站的訪問者傳遞了重要的信息。閱讀本文

第J理分可以了解不同色相傳遞的意義。

示例

MMWKV1?X>0?T*wg*CaravwaIMO

HappyTwitmas網(wǎng)站背景和版式的一些部分所使用的主色相是鮮紅色。

ch^potito

POflTTtXC

CONTACTMEIDESIGNCREATIVE,INNOVATIVEg

EFFECTIVEWEBSITESFORTHE

760.814.0831

FASHION.MUSICANDPOP

CULTUREINDUSTRIES.

Chancesar*,you'vecomsher*Marchingforhvlpstandinfout.

RTFOLIO

同時(shí)使用大量的純色相可以增添外觀的有趣性，看起來妙趣橫生，如這個(gè)網(wǎng)站的標(biāo)題和其他一些

地方所體現(xiàn)的那樣。

estllorsms"homenosocrosservidostrabajosbtog*conlacto

Hacemospaginaswebcongustoysentidocomun.

Perocomoesoesdificildeexplicar,lomejorseMque

leechesunvistazoanuestrostrabajosotepongasen

contactoconnosotros.

Trabajos

ServiciosNovedades

PvocaamMdacormo(?duaorNKk>)

Actu—ydhamaa?autsiwlo*

proowacan*VM?9Mrvrtor"cww

?E-WHDBCraven：diWMB?

aCQfIM

純紅色在網(wǎng)頁設(shè)計(jì)中是非常受歡迎的顏色。

FOLLOWIVtfMlNONUNIQBUMCMM

LABSABOUTEVENTS

WEAREA

OurSeathb.Incarnate,Gnd>>vuravatanaroundthe

web.aoyvudon*thawtouploadanewoneeveryUxneyou

join■wmc*oracomnwcl.KradMow...COMMUNITY加

Designers,Developers,

&WebBuilders

ARTICLES&OPINIONSMIXLABSEVENTS&SPEAKING

laMifhufromourtramandOurfree,openaource.ready-to-Wehost,ipeakA,andattend

otherindustryproa.downloadprolotypeaandtool*.lot*ofevent*

這個(gè)網(wǎng)站的標(biāo)題和log。混合使用了大量的純色相。

WodcAboutContactLogin

WelcometotheportfolioofSeattle

basedWebDesigner/Developer

SteveOttenad.

UMamorrw*ornbnxrwmyrKMtwortiIamcurvWy

aootQOTQalt>p??of>?ekine?pra^ctstorwrnmartM2008ITyouwart

tocontactme,pioaM(Topmaakw

AmafingOMigneCoding9MIMwho**p4ctur?industryXMwtodga

wmraAoiwatanartpfiorwaKNrqao*Ij?Mt■■—ywaaBpaoanc*.I

maMRga■CWVfWRMW*V??lRtr°Syou■

HM?w?rMR0^W?agraor*paoug*ratavapartMl5??

UMBN*100%MMVOiUa*gzCDR*aRyaraMRO.aa(ffw*KMerqiMMf

CQ^DWt?m<.Eoonvacss?V?et?ID*<QawCMKTW—wmoogmfwanrMt

yawa??*on-?■9)***0f0**Enor*VaMwvt*naM?G*?***?■

wttfOancorvaaMkMR

LMrattw*

ON*WIM

純綠色通常很少看到，因此較之其他顏色顯得更出眾。

色度

色度指的是顏色的純度。高色度的色相當(dāng)中沒有黑色、白色或灰色。添加白色、黑色或灰色將降

低色度。它類|以于斷口度，但又不完全一致。色度可被看作是一個(gè)顏色相對(duì)于白色的亮度。

在設(shè)計(jì)當(dāng)中，要避免使用具有非常相似色度的色相。而要選擇那些具有相同或差異較大色度的色

相。

示例

HOME192°39291930^19391940/19491950/195919601969

[MOVIETITLESTILLSCOLLECTI。

FILMNOIR1970/197919811/19891990/19992000/20092010/2019UPDATES

19002009

COMTAmiMGHUNMI05OF

MAINTITLESFROMFEATUREFILMS

青色具有很高的色度，因此在黑歆口白色之間非常突出。

SUPPORTERSUPOATCSWHATWTR￡ASKINGFORQAANOWYOUCAMXLP

CONTACTYOUR

CITYCOUNCILMEMBER

RECENTNEWSWhatWillTheFutureBeForBricktown?

這是另一個(gè)具有高色度藍(lán)色的網(wǎng)站，盡管其中包含了一些色度略低的淺色調(diào)和陰影色調(diào)。

FreierWeb-&PORTFOLIO

Wasichmoche.

caciNFOLfO'wt?omatiFRCISCMWIMMCR

在同樣的色調(diào)中結(jié)合高潮口度和低飽和度可以呈現(xiàn)復(fù)祠口典雅的設(shè)計(jì)效果.

rnJhkrfv

Buonasera.

WlrmJungeCr?fiMg?murmlt

Sp?jUl0*bi*t?nCraMdes”.

WcbdestgnundFocograftc.

0*'riiotwp*ecn.gctuNcn.zaHiertr

wndbtofeo

?Corpocat*Designtstwmcr*F?*on.

?Wtbdet?gn20

OWrHbenKundenfn?Ml?<n

Ampruchen.

?i<ndtchneil.MtirtcMcN.

具有高色度的顏色是中庸型設(shè)計(jì)的首選，如本例所示。

不同色度的應(yīng)用可以制造出非常舒適的視覺漸變效果。

飽和度

飽和度指的是色調(diào)在特定的照明條件下呈現(xiàn)出的樣子。飽和度可以使用術(shù)語弱、強(qiáng)，或術(shù)語弱色

相及純色相來表示。

在設(shè)計(jì)當(dāng)中，相似級(jí)別飽和度的顏色讓設(shè)計(jì)看起來更具連貫的一致性。同色度一樣，具有相似但

不完全相同期口度的顏色可以讓訪客有不和諧之感。

示例

■rrgmerwbmrttohbrarycontactm

tll4??7B?_4?47

StB?jt—?E?】HighestRated

CenturyG

L?B5euro?c<FvCMBfQflftfCttr

npG

MostRecent

REDTAG

SALE

Bauhaus

5?*c?aMilOosttaaantvTopContributors

UILI"

>3

PopularTags

Garamond

SemacfFareMmjirMartuasftyMMkMV

本例所使用的大量不同的色相都具有相似的飽和度水平，從而為整體的設(shè)計(jì)增添了協(xié)調(diào)感。

通過水彩效果的強(qiáng)調(diào)，色彩與相似的柔和飽和度水平相結(jié)合創(chuàng)造出一種柔和的設(shè)計(jì)效果。

disfruta

saniuan

?.com.ar

如本例所示，低飽和度水平的色相不一定要更鮮亮。

CraftSale

Afamilyrancrafteventtobuyandsellfantastichomemade

itemsandcraftsupplies.

SaturdaySeptember12th10'til3.StAndrew'sChurch,ChaseSide,SouthgateN146BE

W?"rvmyp?aMdtoMowuoarChenotWt'rtrnmncS8tAarirvw'aChurchhaBinSouthcat*.Tld*mwaadufM*calycan

wecaobeofMilorlao10,tealMatert?fiai.Iwwb?ntYtnuupottnwmrrinmandhopdallyghv?batteropcnmcrto

wtecoam.

FTrX▼▼r▼▼r▼▼r▼▼▼▼，▼▼▼

這是一個(gè)極好的例子演示如何在低飽和度背景中使用高飽和度色相以達(dá)到突出的效果。

SunrneSoyaBrandsLatestatSunnse

Otvwdwn*

Ce-rootAw?

JMB

ioyganK

這是另一個(gè)如何使用低顏口度顏色來突出臨近的高飽和度顏色。

明度

明度也被稱作"亮度"。它指的是顏色的明暗程度。亮的顏色具有較高的明度值。例如，橙色的

明度比深藍(lán)色或暗紫色更高。黑色的明度是所有色相中最低的，而白色的明度是最高的。

當(dāng)在設(shè)計(jì)中應(yīng)用明度的時(shí)候，最好選用不同明度的顏色，特別對(duì)于高色度的顏色來說。高對(duì)比度

通?？梢栽O(shè)計(jì)出更具美感的效果。

示例

01612358556

這里，具有高明度黃色的使用在低明度的黑色和灰色中相當(dāng)突出。

CM”?

oyster€Oet工touch012433W713

HomeAteulusVtoftOMBCOHM■Bieg

該網(wǎng)站使用了兩種不同明度的藍(lán)色調(diào)。由于不同的明度對(duì)比強(qiáng)烈，整體效果更具視覺上的吸引力。

Portofoliu

Twittground

URUCSERVICE

S&AInterio

SilverDesrgn

<bveMag

ItalianJob

DesprenoiSuntembunila

Notcredemcucarte3oncecom^ani*MUservtduau

cev?oireIed*ferenti&M.

將具有相似明度的顏色放在一起創(chuàng)造出了一個(gè)充滿活力和生動(dòng)的背景，這是設(shè)計(jì)本身所產(chǎn)生的增

強(qiáng)效果。

WHOSEVIEW

tMAMTOVMtXmttNCtS

BETA

VbuarvlnDubfin(A■“；=A**IA<

Bealof

Sowhatis

WHOS!.T——■■?■nhfr

Shareyour

??,?「，?一，

experiences^

?“UM—

XC1

(BMkMWtNU

LatettComments

■pMtalOf*w*

lfiFTLl-nmSR**??■tMMdtaMM

?wU■—1??*?

AMFrw<40Voucher■Thw^pM

/Bs—

—?OMBMuam

■jfl3<30Vb>?c2rhx

AMBWKM**

J.DineABMfJ^totvayMI<B

這里紅色的明度比淡藍(lán)色稍低，它的明度比白色還低。

hello,IamNag,aDesigner

fromHyderabad,India

COLOJgoodinweb,print,

here&there.identity,branding&

?IOaM***8

Mb*.?JIttatMK??**<??userinterfacedesign.

contact

offerings.

BILOCUZLEREVE

ConvergetotheNet.MEDIA

即使在非常類1以的色調(diào)中，人類的眼睛也可以選出不同的明度。

色調(diào)

當(dāng)灰色加入某色相時(shí)就形成了色調(diào)。色調(diào)通常比純色相看起來更暗淡或柔和。

色調(diào)有時(shí)在設(shè)計(jì)中非常容易使用。摻入更多灰色的色調(diào)可以使網(wǎng)站具有一定的古舊感。根據(jù)不同

的色調(diào)也可以為外觀效果增添一些精致優(yōu)雅的感覺。

示例

色調(diào)的應(yīng)用可以使網(wǎng)站看起來非常精致，同時(shí)增添一些復(fù)古的韻味。

brightkite

Thesimplewaytokeep

upwithfriends&placesJoinwithonedtcfcl

WeVeataboutMpngyoukoopupwthyrxxtrwxM.meatnewConnectwithFacebook

P?o0?.WtfecownrwplaoMAM?Ma)?uY?outandabout

beiftKlait*

M—?8tfw?》?yw

LJAppStoreanDAoo

Whatpeoplearespying

"BngHkM*OM

BusinessWeek

*Th?2hm*(mnWCmaMT

BriQMMteInto

這個(gè)網(wǎng)站將不同色調(diào)、陰影色調(diào)和淺色調(diào)的藍(lán)色結(jié)合使用。

如本例所示，色調(diào)可以通過在周邊加入灰色來強(qiáng)調(diào)/

WE氏機(jī)”toftw/NE姬tAfiir物勿"&urb

儀m加叫吵a以％fidL醉,修￡茄-

dnTg呼維CaJ^臚右2的

叱伊什M"血皿」

&D。

^|n4kAwU*4A^?gg/Ejn

在這個(gè)設(shè)計(jì)中，導(dǎo)航區(qū)和背景使用的色調(diào)讓這個(gè)網(wǎng)站看起來具有復(fù)古師口手工制作的效果。

SMvMerprdnofofiafKrgiamtFlnuncrCbq^>dtgvai

(tratagy<mdbroughtthm-thfyfvteetfa

RECEP.BLOGPOSTSOURPORTFOLIOSIGNUPFORI

NEWSLETTER

Dtc99,9co9DalbtKQanati

這個(gè)例子極好的展現(xiàn)了如何在具有色調(diào)的背景下純色相可以真正的被突出。

MetaLab

Wemakeinterf

我們認(rèn)為可能是灰色的一些顏色實(shí)際上是其他顏色的色調(diào)。在本例中，背景實(shí)際上是加入了大量

灰色的藍(lán)色色調(diào)。

陰影色調(diào)

當(dāng)在色相中加入黑色使其更暗時(shí)就形成了陰影色調(diào)。這個(gè)詞經(jīng)常被錯(cuò)誤的用來描述淺色調(diào)或者色

調(diào)，但實(shí)際上陰影色調(diào)只應(yīng)用于加入了黑色,從而使色相更深的情況。

在設(shè)計(jì)中，較深的色調(diào)通常被用于替代黑色，并可以用作非彩色。綜合應(yīng)用陰影色調(diào)和淺色調(diào)是

避免外觀看起來過于陽廊口厚重最好的方法。

示例

JONATHANMOORE

■CKAVW*

TheDecadeinDesign

Muunw?*o*m

The4rtaynfta*drvewgiwdKM*durtnftfMvamformngtroaan

mdvatrrM6MMi?mre^vctt?OM*Mcrwtarf3mt

MdaMwttaailoevtryem.MCjusttfw

?ateftnwvt■??**?<

peo*ttwh?cnM^Vorl<baaDM*?n?mtfwpUatwb?|thMtento

MKk*.>WM

CUh*MMnraMctMotogy,andr?whe?vZMttMMMvmow?w<*suM

?>>M*ttHR*dWtn*r^

?COmOMM<MO

喬納森?穆爾的網(wǎng)站在背景上應(yīng)用了不同陰影色調(diào)的紫色，而在其他部分使用了一些淺色調(diào)。

只要保持其間有足夠的對(duì)比度，不同陰影色調(diào)的協(xié)同使用效果也^常好。

有效結(jié)合陰影色調(diào)和淺色調(diào)，亮點(diǎn)在于頁頭的設(shè)計(jì)上這種方法的應(yīng)用。

、skipvineSanaCaw

WECANCHANGE

YOURPERSPECTIVE

Tehnica.Avemtehnica.。Ultimelestiri??

另一個(gè)具有陰影色調(diào)和少量淺色調(diào)梯度紋理的背景設(shè)計(jì)。

Alittleofourrecentwebdesignwork

Hartalvwafourfavourtepro)ectB.Ifyoulicewhatyouteeandyouthinkthatwortdngwtthu?bea

tun.protnaMeocpertinc*forbofhaut,getintouch-w?lovehMrtngiboutnewandntarMttngproiecta.

陰影色調(diào)和絨里的結(jié)合使用為這個(gè)網(wǎng)站增加了趣味性。

淺色調(diào)

當(dāng)白色加入某色相使之變亮就形成了淺色調(diào)。非常亮的淺色調(diào)也稱作柔和粉色，但對(duì)于任何加入

白色的純色相來說都是淺色調(diào)。

淺色調(diào)通常應(yīng)用于創(chuàng)建女性化的喉亮的設(shè)計(jì)當(dāng)中。菊口的淺色調(diào)特別用于讓設(shè)計(jì)更具女性化的

特點(diǎn)。這種方法在復(fù)古的設(shè)計(jì)中效果很好，在針對(duì)嬰幼兒家長的網(wǎng)站上也非常受歡迎。

示例

CAIO

CARDOSOEsforqad。，persistente,otimista,criativo

esonhador.CaioCardoso

MtdiaImpressa

DieMimihrip?radivcnasempraaapaui^te,