设计师的颜色理论理解概念和术语

创美优品设计师珍藏版配色方案，拿出来和大家一起学习和探讨。

如果要在设计中有效的使用颜色，那么就需要了解一下颜色的概念和颜色理论术语。透彻的了解

像色度、明度和顺口度这样的概念是创建属于你自己的非常棒的配色方案的关键。在我们的颜色

理论系列第1部分：颜色的含义中，提到了不同颜色的意义。在此我们首先将温习一下这个理

论的基础：什么条件将影响到T已知的颜色，例如添加灰色、白色或灰色到纯色相中，此外，

还有这样做将如何影响设计，当然示例是必不可少的。

色相

色相是最基本的颜色术语，通常指的是一个物体的颜色。当我们说"蓝色"、"绿色"或"红色"

时，我们所谈论的就是色相。设计当中色相的使用向网站的访问者传递了重要的信息。阅读本文

第J理分可以了解不同色相传递的意义。

示例

MMWKV1•X>0»T*wg*CaravwaIMO

HappyTwitmas网站背景和版式的一些部分所使用的主色相是鲜红色。

ch^potito

POflTTtXC

CONTACTMEIDESIGNCREATIVE,INNOVATIVEg

EFFECTIVEWEBSITESFORTHE

760.814.0831

FASHION.MUSICANDPOP

CULTUREINDUSTRIES.

Chancesar*,you'vecomsher*Marchingforhvlpstandinfout.

RTFOLIO

同时使用大量的纯色相可以增添外观的有趣性，看起来妙趣横生，如这个网站的标题和其他一些

地方所体现的那样。

estllorsms"homenosocrosservidostrabajosbtog*conlacto

Hacemospaginaswebcongustoysentidocomun.

Perocomoesoesdificildeexplicar,lomejorseMque

leechesunvistazoanuestrostrabajosotepongasen

contactoconnosotros.

Trabajos

ServiciosNovedades

PvocaamMdacormo(«duaorNKk>)

Actu—ydhamaa•autsiwlo*

proowacan*VM»9Mrvrtor"cww

»E-WHDBCraven：diWMB・

aCQfIM

纯红色在网页设计中是非常受欢迎的颜色。

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*

这个网站的标题和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

纯绿色通常很少看到，因此较之其他颜色显得更出众。

色度

色度指的是颜色的纯度。高色度的色相当中没有黑色、白色或灰色。添加白色、黑色或灰色将降

低色度。它类|以于断口度，但又不完全一致。色度可被看作是一个颜色相对于白色的亮度。

在设计当中，要避免使用具有非常相似色度的色相。而要选择那些具有相同或差异较大色度的色

相。

示例

HOME192°39291930^19391940/19491950/195919601969

[MOVIETITLESTILLSCOLLECTI。

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

19002009

COMTAmiMGHUNMI05OF

MAINTITLESFROMFEATUREFILMS

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

SUPPORTERSUPOATCSWHATWTR£ASKINGFORQAANOWYOUCAMXLP

CONTACTYOUR

CITYCOUNCILMEMBER

RECENTNEWSWhatWillTheFutureBeForBricktown?

这是另一个具有高色度蓝色的网站，尽管其中包含了一些色度略低的浅色调和阴影色调。

FreierWeb-&PORTFOLIO

Wasichmoche.

caciNFOLfO'wt«omatiFRCISCMWIMMCR

在同样的色调中结合高潮口度和低饱和度可以呈现复祠口典雅的设计效果.

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.

具有高色度的颜色是中庸型设计的首选，如本例所示。

不同色度的应用可以制造出非常舒适的视觉渐变效果。

饱和度

饱和度指的是色调在特定的照明条件下呈现出的样子。饱和度可以使用术语弱、强，或术语弱色

相及纯色相来表示。

在设计当中，相似级别饱和度的颜色让设计看起来更具连贯的一致性。同色度一样，具有相似但

不完全相同期口度的颜色可以让访客有不和谐之感。

示例

■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

本例所使用的大量不同的色相都具有相似的饱和度水平，从而为整体的设计增添了协调感。

通过水彩效果的强调，色彩与相似的柔和饱和度水平相结合创造出一种柔和的设计效果。

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▼▼▼▼，▼▼▼

这是一个极好的例子演示如何在低饱和度背景中使用高饱和度色相以达到突出的效果。

SunrneSoyaBrandsLatestatSunnse

Otvwdwn*

Ce-rootAw«

JMB

ioyganK

这是另一个如何使用低颜口度颜色来突出临近的高饱和度颜色。

明度

明度也被称作"亮度"。它指的是颜色的明暗程度。亮的颜色具有较高的明度值。例如，橙色的

明度比深蓝色或暗紫色更高。黑色的明度是所有色相中最低的，而白色的明度是最高的。

当在设计中应用明度的时候，最好选用不同明度的颜色，特别对于高色度的颜色来说。高对比度

通常可以设计出更具美感的效果。

示例

01612358556

这里，具有高明度黄色的使用在低明度的黑色和灰色中相当突出。

CM”•

oyster€Oet工touch012433W713

HomeAteulusVtoftOMBCOHM■Bieg

该网站使用了两种不同明度的蓝色调。由于不同的明度对比强烈，整体效果更具视觉上的吸引力。

Portofoliu

Twittground

URUCSERVICE

S&AInterio

SilverDesrgn

<bveMag

ItalianJob

DesprenoiSuntembunila

Notcredemcucarte3oncecom^ani*MUservtduau

cev«oireIed*ferenti&M.

将具有相似明度的颜色放在一起创造出了一个充满活力和生动的背景，这是设计本身所产生的增

强效果。

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

这里红色的明度比淡蓝色稍低，它的明度比白色还低。

hello,IamNag,aDesigner

fromHyderabad,India

COLOJgoodinweb,print,

here&there.identity,branding&

•IOaM***8

Mb*.•JIttatMK««**<«・userinterfacedesign.

contact

offerings.

BILOCUZLEREVE

ConvergetotheNet.MEDIA

即使在非常类1以的色调中，人类的眼睛也可以选出不同的明度。

色调

当灰色加入某色相时就形成了色调。色调通常比纯色相看起来更暗淡或柔和。

色调有时在设计中非常容易使用。掺入更多灰色的色调可以使网站具有一定的古旧感。根据不同

的色调也可以为外观效果增添一些精致优雅的感觉。

示例

色调的应用可以使网站看起来非常精致，同时增添一些复古的韵味。

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

这个网站将不同色调、阴影色调和浅色调的蓝色结合使用。

如本例所示，色调可以通过在周边加入灰色来强调/

WE氏机”toftw/NE姬tAfiir物勿"&urb

仪m加叫吵a以％fidL醉,修£茄-

dnTg呼维CaJ^胪右2的

叱伊什M"血皿」

&D。

^|n4kAwU*4A^»gg/Ejn

在这个设计中，导航区和背景使用的色调让这个网站看起来具有复古师口手工制作的效果。

SMvMerprdnofofiafKrgiamtFlnuncrCbq^>dtgvai

(tratagy<mdbroughtthm-thfyfvteetfa

RECEP.BLOGPOSTSOURPORTFOLIOSIGNUPFORI

NEWSLETTER

Dtc99,9co9DalbtKQanati

这个例子极好的展现了如何在具有色调的背景下纯色相可以真正的被突出。

MetaLab

Wemakeinterf

我们认为可能是灰色的一些颜色实际上是其他颜色的色调。在本例中，背景实际上是加入了大量

灰色的蓝色色调。

阴影色调

当在色相中加入黑色使其更暗时就形成了阴影色调。这个词经常被错误的用来描述浅色调或者色

调，但实际上阴影色调只应用于加入了黑色,从而使色相更深的情况。

在设计中，较深的色调通常被用于替代黑色，并可以用作非彩色。综合应用阴影色调和浅色调是

避免外观看起来过于阳廊口厚重最好的方法。

示例

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

乔纳森・穆尔的网站在背景上应用了不同阴影色调的紫色，而在其他部分使用了一些浅色调。

只要保持其间有足够的对比度，不同阴影色调的协同使用效果也^常好。

有效结合阴影色调和浅色调，亮点在于页头的设计上这种方法的应用。

、skipvineSanaCaw

WECANCHANGE

YOURPERSPECTIVE

Tehnica.Avemtehnica.。Ultimelestiri•・

另一个具有阴影色调和少量浅色调梯度纹理的背景设计。

Alittleofourrecentwebdesignwork

Hartalvwafourfavourtepro)ectB.Ifyoulicewhatyouteeandyouthinkthatwortdngwtthu»bea

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

阴影色调和绒里的结合使用为这个网站增加了趣味性。

浅色调

当白色加入某色相使之变亮就形成了浅色调。非常亮的浅色调也称作柔和粉色，但对于任何加入

白色的纯色相来说都是浅色调。

浅色调通常应用于创建女性化的喉亮的设计当中。菊口的浅色调特别用于让设计更具女性化的

特点。这种方法在复古的设计中效果很好，在针对婴幼儿家长的网站上也非常受欢迎。

示例

CAIO

CARDOSOEsforqad。，persistente,otimista,criativo

esonhador.CaioCardoso

MtdiaImpressa

DieMimihrip«radivcnasempraaapaui^te,