網(wǎng)頁設(shè)計(jì)常用色彩搭配表

山陰教育信息 2013-03-18

展開全文

網(wǎng)頁設(shè)計(jì)常用色彩搭配表 - 配色表

按色相的搭配分類

本節(jié)將網(wǎng)頁設(shè)計(jì)中常見的色彩搭配按照色相的順序歸類。每類都以該色相為主，配以其他色相或者同色相的，應(yīng)用對(duì)比和調(diào)和的方法，并按照從輕快到濃烈的順序排序。

紅色

#FFFFCC

#CCFFFF

#FFCCCC

#99CCCC

#FFCC99

#FFCCCC

#FF9999

#996699

#FFCCCC

#CC9999

#FFFFCC

#CCCC99

#FFCCCC

#FFFF99

#CCCCFF

#0099CC

#CCCCCC

#FF6666

#FF9966

#FF6666

#FFCCCC

#CC9966

#666666

#CC9999

#FF6666

#FFFF66

#99CC66

#CC3333

#CCCCCC

#003366

#993333

#CCCC00

#663366

#CCCC99

#666666

#CC9999

#FF6666

#FFFF00

#0066CC

#CC0033

#333333

#CCCC00

#336633

#990033

#FFCC99

#993333

#CC9966

#003300

#FF0033

#333399

#CCCC00

#CC0033

#000000

#003399

#000000

#99CC00

#CC0033

#999933

#993333

#333300

橙色

#FFCC99

#FFFF99

#99CC99

#FFCC99

#CCFF99

#CCCCCC

#FFCC99

#FFFFCC

#99CCFF

#FF9966

#FFFFCC

#99CC99

#FF9900

#FFFFCC

#336699

#CCCC33

#FFFF99

#CC9933

#996600

#FFCC33

#FFFFCC

#CC9933

#336666

#FF9900

#FFFF00

#0099CC

#99CC33

#FF9900

#FFCC00

#FF9933

#99CC33

#CC6699

#FF9933

#FFFF00

#3366CC

#FF9933

#FFFFCC

#009966

#FF6600

#FFFF66

#009966

#990033

#CCFF66

#FF9900

#FF9966

#996600

#CCCC00

#CC6600

#999999

#CCCC33

#CC6600

#CCCC33

#336699

#000000

#FF9933

#999966

#663300

#FF9933

#FFFF66

黃色

#FFFFCC

#CCFFFF

#FFCCCC

#FFFF00

#FFFFFF

#CCCC00

#99CCFF

#FFCC33

#FFFFCC

#FFFF33

#99CCFF

#CCCCCC

#FFFF00

#FFFFFF

#9933FF

#99CCFF

#FFCC33

#FFFF33

#FFCC00

#66CC00

#FFFF99

#FF9900

#FFFF00

#0099CC

#FFCC00

#0000CC

#FFFF99

#CC9999

#FFFFCC

#6666CC

#999933

#FFFFCC

#CC99CC

#CCCC00

#666600

#FFFF66

#FF9966

#FFFFCC

#99CC99

#FFCC33

#FFFFCC

#999966

#FFCC99

#FF6666

#FFFF66

#FFCC99

#999966

#FFFF00

#FFFF99

#99CC99

#666600

#999966

#FFFF99

#333333

#006633

#333300

#CCCC99

#006633

#663300

#CCCC66

黃綠色

#33CC33

#6666CC

#FFFFFF

#CCCC33

#FFFFFF

#CCFFCC

#FFCC99

#CCFF99

#CCCCCC

#CCCC00

#999966

#FFFFCC

#CCCC33

#FFFFFF

#336699

#CCCC33

#999999

#CCFFFF

#00CC00

#0066CC

#99CCCC

#99CC33

#FF9900

#FFCC00

#99CC33

#CCCCFF

#663300

#CCCC33

#993399

#000000

#CC6600

#999999

#CCCC33

#CC9933

#FFFF99

#99CC99

#669933

#CCCC33

#663300

#99CC33

#CCCCCC

#000000

#CC6600

#CCCC33

#336699

#666600

#CCCC66

#CCFFCC

#333366

#99CC33

#336699

#666666

#99CC33

#003366

#003333

#99CC33

#999999

#996633

#FFFF99

#99CC66

綠色

#009966

#FFFFFF

#FFFF00

#339933

#FFFFFF

#9933CC

#339933

#FFFFFF

#000000

#339933

#99CC00

#FFFFCC

#CCCC66

#336666

#99CC33

#FFFF66

#336600

#339933

#CC9900

#666666

#339966

#CCCCCC

#003366

#669933

#CCCCCC

#000000

#339933

#CCCCCC

#6699CC

#006633

#CCCC33

#CC9933

#339933

#666633

#CCCC66

#339933

#FFCC33

#336699

#006633

#669933

#99CC99

#336666

#996633

#CCCC33

#003300

#669933

#CCCC99

#006633

#990033

#FF9900

#006633

#333300

#CCCC99

#006633

#663300

#CCCC66

#993333

#CC9966

#003300

青綠色

#CCFF99

#FFFFFF

#66CCCC

#339999

#FFFFFF

#99CCFF

#66CC99

#FFFFFF

#666699

#009999

#66CCCC

#CCFFFF

#66CCCC

#CCFF66

#FF99CC

#339999

#FFFF00

#336699

#CC9933

#339999

#FFCC33

#FFCC00

#009999

#CC3333

#669999

#CCCCCC

#CC99CC

#339999

#CCCCCC

#000000

#339999

#666699

#CCCCCC

#003333

#99CC99

#FFFFCC

#669999

#CCFFCC

#996699

#CCCC99

#669999

#999966

#CCCC99

#339999

#336666

#669999

#CCCC99

#999999

#003366

#669999

#663333

#339999

#CCCC66

#333333

#339999

#CCFFCC

#336666

#3399CC

#666666

藍(lán)色

#FFFFCC

#CCFFFF

#FFCCCC

#99CCCC

#FFFFFF

#3399CC

#CCFFCC

#99CCCC

#FFFFCC

#CCCCFF

#FFFFFF

#99CCFF

#FFCC99

#FFFFCC

#99CCFF

#336699

#FFFFFF

#99CCCC

#FFFFFF

#CCFF99

#CCCCFF

#FFFFCC

#CCFFFF

#99CCCC

#FFFFFF

#336699

#99CCFF

#CCFFFF

#6699CC

#99CC33

#FFFFFF

#3399CC

#0099CC

#FFFFCC

#666699

#CCCCCC

#003366

#99CCFF

#0099CC

#FFFFFF

#666666

#CCCCCC

#6699CC

#666666

#336699

#CCCC99

#003366

#3399CC

#003366

#CCCCCC

#6699CC

#006699

#000000

#003366

#CCCCCC

#006699

#999933

#336699

#333333

藍(lán)紫色

#CCFFFF

#FFFFFF

#CCCCFF

#CCCCCC

#FFFFFF

#666699

#99CCFF

#FFFFFF

#333399

#6666CC

#FFFFFF

#FF9999

#9999FF

#FFCC33

#FFFFCC

#0099CC

#FFFFCC

#666699

#0000FF

#6699FF

#CCFFFF

#6666FF

#66CCFF

#CCFF66

#669999

#FFFFCC

#6666CC

#9999CC

#FF9999

#666699

#003399

#FFCCCC

#6699CC

#CC6666

#333399

#CCCC00

#000066

#6666FF

#CCCCCC

#003399

#CCFF99

#333333

#333366

#CC0033

#CCCCCC

#336699

#CCCC66

#333300

#003399

#FFFF99

#000000

#990066

#CCCC33

#003399

#CC3333

#000000

#003399

#333366

#999966

#333333

紫色

#FFFFCC

#FFFF99

#CCCCFF

#9999CC

#99CC99

#FFFFFF

#FFCCCC

#CCCCFF

#CCCC99

#9999CC

#FFFFCC

#FFCCCC

#FF99CC

#CCCCFF

#660066

#FFFFFF

#663333

#CCCC99

#333333

#9966CC

#CCCC00

#FF9966

#663399

#996699

#FFCCCC

#CC99CC

#996666

#CC99CC

#FFCCCC

#FFCC99

#FF9933

#663366

#333399

#CCCCFF

#CC99CC

#663366

#CCCCCC

#CC99CC

#996699

#9999CC

#CCCCFF

#CC9966

#999999

#663366

#330033

#666666

#669999

#CCCCCC

#999999

#663366

#FF33CC

#CCCC99

#663366

#999999

#CCCCFF

#999966

#993333

#330033

紫紅色

#FFCCCC

#FFFFFF

#99CC00

#FF99CC

#FFFFFF

#993366

#66CC99

#FFFFFF

#CC6699

#CC9999

#FFCCCC

#CC99CC

#FFCCCC

#FFFF99

#CCCCFF

#FFFF99

#993399

#FF99CC

#66CCCC

#CCFF66

#FF99CC

#003399

#CCCC00

#FFCCCC

#FF99CC

#CCCCFF

#FF9999

#FFCCCC

#FF99CC

#669966

#CC6699

#FFCCFF

#CCCCCC

#CC99CC

#CC3399

#FFCC99

#FF6666

#FF3399

#CCCC99

#663366

#FFFFCC

#FFCCCC

#663366

#CCCCCC

#CC99CC

#990066

#FFCC00

#CC0033

#990066

#CCCCCC

#006699

#999900

#990033

#000000

#990066

#000000

#009966

按印象的搭配分類

色彩搭配看似復(fù)雜，但并不神秘。既然每種色彩在印象空間中都有自己的位置，那么色彩搭配得到的印象可以用加減法來近似估算。如果每種色彩都是高亮度的，那么它們的疊加，自然會(huì)是柔和、明亮的；如果每種色彩都是濃烈的，那么它們疊加，就會(huì)是濃烈的。當(dāng)然在實(shí)際設(shè)計(jì)過程中，設(shè)計(jì)師還要考慮到乘除法，比如同樣亮度和對(duì)比度的色彩，在色環(huán)上的角度不同，搭配起來就會(huì)得到千變?nèi)f化的感覺。因此本書除了要列舉出按色相的搭配，也要將印象作為重點(diǎn)的搭配分類列舉出來，以供讀者參考。

柔和、明亮、溫柔

亮度高的色彩搭配在一起就會(huì)得到柔和、明亮、溫和的感覺。為了避免刺眼，設(shè)計(jì)師一般會(huì)用低亮度的前景色調(diào)和，同時(shí)色彩在色環(huán)之間的距離也有助于避免沉悶。

#FFFFCC

#CCFFFF

#FFCCCC

#FFFF99

#CCCCFF

#FF9966

#FF6666

#FFCCCC

#FFCC99

#CCFF99

#CCCCCC

#FFCCCC

#CCCCFF

#CCFFCC

#CCFFFF

#CCCCCC

#CCFF99

#FFCCCC

#FFFFFF

#99CC99

#99CCCC

#FFCC99

#FFCCCC

#CCCCFF

#FFCCCC

#CCFFFF

#FFCC99

#FFFFCC

#99CCCC

柔和、潔凈、爽朗

對(duì)于柔和、清潔、爽朗的印象，色環(huán)中藍(lán)到綠相鄰的顏色應(yīng)該是最適合的。并且亮度偏高。可以看到，幾乎每個(gè)組合都有白色參與。當(dāng)然在實(shí)際設(shè)計(jì)時(shí)，可以用藍(lán)綠相反色相的高亮度有彩色代替白色。

#CCFF99

#FFFFFF

#99CCFF

#99CCCC

#FFFFFF

#CCFF99

#CCFFCC

#FFFFFF

#66CCCC

#CCCCFF

#FFFFFF

#99CCCC

#CCFFCC

#99CCCC

#FFFFCC

#CCFFFF

#FFFFFF

#CCCCFF

#CCFFFF

#FFFFFF

#99CCFF

#66CCFF

#FFFFFF

#CCFFFF

#6699CC

#FFFFFF

#99CCFF

#CCCCFF

#FFFFFF

#99CCFF

可愛、快樂、有趣

可愛、快樂、有趣印象中的色彩搭配特點(diǎn)是，色相分布均勻，冷暖搭配，飽和度高，色彩分辨度高。

#66CCCC

#CCFF66

#FF99CC

#FF9999

#FFFFFF

#FFCC99

#FF6666

#FFFF66

#99CC66

#666699

#FFFFFF

#FF9999

#99CC33

#FF9900

#FFCC00

#FF0033

#FFFFFF

#FF9966

#FF9900

#CCFF00

#CC3399

#99CC33

#FFFFFF

#FF6600

#993366

#CCCC33

#666633

#66CCCC

#FFFFFF

#666699

活潑、快樂、有趣

活潑、快樂、有趣相對(duì)前一種印象，色彩選擇更加廣泛，?最重要的變化是將純白色用低飽和有彩色或者灰色取代。

#CC9999

#FFFF99

#666699

#FF9900

#FFFF00

#0099CC

#CCCC99

#CC3399

#99CC00

#FF6666

#FFFF00

#3399CC

#CC6600

#999999

#CCCC33

#FF9933

#FFFFCC

#009933

#0099CC

#CCCCCC

#FF6666

#FF6600

#FFFF66

#009966

#CC6633

#FFCC99

#CC6600

#CC0066

#009999

#FFCC33

運(yùn)動(dòng)型、輕快

運(yùn)動(dòng)的色彩要強(qiáng)化激烈、刺激的感受，同時(shí)還要體現(xiàn)健康、快樂、陽光。因此飽和度較高、亮度偏低的色彩在這類印象中經(jīng)常登場(chǎng)。

#FF6666

#FFFF00

#006699

#FF9966

#FFFFFF

#0066CC

#339933

#FFCC33

#336699

#FF9900

#FFFFCC

#336699

#CC6600

#CCCC44

#336699

#99CC33

#FFFFFF

#0099CC

#99CC33

#FF6666

#336699

#FFFFFF

#99CCCC

#FF0033

#333399

#CCCC00

#33CC99

#FFFF00

#336699

輕快、華麗、動(dòng)感

華麗的印象要求頁面充斥有彩色，并且飽和度偏高，而亮度適當(dāng)減弱則能強(qiáng)化這種印象。

#990066

#FFCC00

#CC0033

#FFCC33

#333399

#FF0033

#666699

#FFFF00

#FF0033

#006699

#FFFF33

#FFCC00

#009999

#CC3366

#FF0033

#CCCC00

#006699

#CCCC00

#FF9933

#663399

#FF9933

#FFFF00

#336699

#CC3333

#FFCCCC

#99CC00

#003399

#FFFF00

#FF6600

狂野、充沛、動(dòng)感

狂野的印象空間中少不了低亮度的色彩，甚至可以用適當(dāng)?shù)暮谏钆?。其他有彩色的飽和度高，?duì)比強(qiáng)烈。

#990066

#FFFF00

#003399

#CC0033

#000000

#003399

#FFFF00

#F00000

#CC3333

#CCCCCC

#003366

#CC0033

#333333

#CCCC00

#000000

#99CC00

#CC0033

#FF0033

#333333

#FF9900

#990066

#000000

#009966

#666666

#FF6600

#333333

#993333

#CCCC00

#663366

華麗、花哨、女性化

女性化的頁面中紫色和品紅是主角、粉紅、綠色也是常用色相。一般它們之間要進(jìn)行高飽和的搭配。

#FFFF99

#993399

#FF99CC

#FF6666

#FFFFFF

#339999

#FF99CC

#003399

#CCFF00

#66CC99

#FFFFFF

#CC6699

#CC3399

#FFCC99

#FF6666

#FFCCCC

#FFFFFF

#993366

#CC6699

#FFFF00

#666699

#CC6699

#99CC66

#663366

#FF33CC

#CCCC99

#663366

#CC3399

#FFCC99

#FF6666

回味、女性化、優(yōu)雅

優(yōu)雅的感覺很奇特，色彩的飽和度一般要降下來。一般以藍(lán)、紅之間的相鄰，調(diào)節(jié)亮度和飽和度進(jìn)行搭配。

#CCCCCC

#CC99CC

#CC3399

#FFCCCC

#FF99CC

#CCCCFF

#CC3399

#9933CC

#CC99CC

#9999CC

#FFFFCC

#FFCCCC

#663366

#CCCCCC

#CC99CC

#FF9999

#FFCCCC

#FF99CC

#996666

#CC99CC

#FFCCCC

#CC9999

#CCCCCC

#FFCCCC

#FF9999

#996699

#FFCCCC

#996699

#FFCCCC

#CC99CC

高尚、自然、安穩(wěn)

高尚一般要用低亮度的黃綠色，色彩亮度降下去，注意色彩的平衡，頁面就會(huì)顯得安穩(wěn)。

#CCCC33

#FFFF99

#CC9933

#CC9966

#CCCC66

#669999

#FF9966

#996600

#CCCC00

#CCCC66

#660033

#CC6600

#CCCC00

#666600

#CCCCFF

#CC9933

#009999

#FFCC33

#999966

#CCCC99

#339999

#99CC99

#669933

#336633

#666633

#999933

#CC9966

#660000

#CC9900

#CCCC99

冷靜、自然

綠色是冷靜、自然印象的主角，但是綠色作為頁面的主要色彩，容易陷入過于消極的感覺傳達(dá)，因此應(yīng)該特別重視圖案的設(shè)計(jì)。

#FFFF99

#99CC99

#666600

#996633

#FFFF99

#99CC66

#006600

#66CC66

#CCFF99

#666600

#CCCC66

#CCFFCC

#669933

#CCCC33

#663300

#666633

#999933

#CC9966

#003300

#669933

#CCCC99

#006633

#663300

#CCCC66

#666600

#FFFFCC

#999999

#006633

#333300

#CCCC99

傳統(tǒng)、高雅、優(yōu)雅

傳統(tǒng)的內(nèi)容一般要降低色彩的飽和度，特別是棕色很適合。前面介紹紫色也是高雅和優(yōu)雅印象的常用色相。

#999933

#FFFFCC

#CC99CC

#CC9966

#666666

#CC9999

#CCCC99

#333333

#9966CC

#CCCC99

#666666

#CC9999

#996699

#CCCC99

#669999

#CC9966

#999999

#666666

#339966

#CCCCCC

#996699

#663366

#999999

#CCCCFF

#996699

#9999CC

#CCCCFF

#CCCC99

#999999

#663300

傳統(tǒng)、穩(wěn)重、古典

傳統(tǒng)、穩(wěn)重、古典都是保守的印象，色彩的選擇上應(yīng)該盡量用低亮度的暖色，這種搭配符合成熟的審美。

#6699CC

#663366

#CCCC99

#990033

#CCFF66

#FF9900

#666699

#660033

#99CC99

#663300

#FF9933

#FFFF66

#990033

#006633

#CCCC00

#660033

#999933

#660099

#993366

#CCCC33

#666633

#996600

#CCCC66

#666600

#009933

#CC9900

#666666

#666633

#CCCC33

#CC3366

忠厚、穩(wěn)重、有品位

亮度、飽和度偏低的色彩會(huì)給人忠厚、穩(wěn)重的感覺。這樣的搭配為了避免色彩過于保守，使頁面僵化、消極，應(yīng)當(dāng)注重冷暖結(jié)合和明暗對(duì)比。

#FFFFCC

#CC9933

#336666

#996633

#CCCC33

#336633

#990033

#FFCC99

#333366

#669999

#996600

#993333

#CC9966

#003300

#336633

#CCCC99

#333366

#663300

#999933

#333333

#663366

#666666

#333366

#999900

#990033

#CC99CC

#333366

#990033

#CCCCCC

簡(jiǎn)單、潔凈、進(jìn)步

簡(jiǎn)單、潔凈的色彩在色相上可以用藍(lán)、綠表現(xiàn)，并大面積留白。而進(jìn)步的印象可以多用藍(lán)色，搭配低飽和甚至灰色。

#CCCCCC

#FFFFFF

#666699

#CCFF66

#FFFFFF

#003366

#99CCFF

#FFFFFF

#336699

#CCCC33

#FFFFFF

#336699

#0099FF

#FFFFCC

#666699

#99CC33

#CCCCCC

#000000

#CCCCCC

#003366

#99CCFF

#0099CC

#CCFF66

#666666

#3399CC

#003366

#CCCCCC

#ABCDEF

簡(jiǎn)單、時(shí)尚、高雅

灰色是最為平衡的色彩，并且是塑料金屬質(zhì)感的主要色彩之一，因而要表達(dá)高雅、時(shí)尚，可以適當(dāng)使用，甚至大面積使用。但是要注重圖案和質(zhì)感的構(gòu)造。

#99CCFF

#FFFF66

#666666

#336666

#FFFFFF

#999999

#0099CC

#FFFFFF

#666666

#999999

#CCCCCC

#336666

#CCCCCC

#999999

#663366

#666666

#CCCCCC

#6699CC

#999999

#FFFFFF

#333366

#669999

#CCCCCC

#666666

#999999

#CCCCCC

#333333

#ABCDEF

簡(jiǎn)單、進(jìn)步、時(shí)尚

表現(xiàn)進(jìn)步的色彩主要以藍(lán)色為主，搭配灰色。而色彩的明度統(tǒng)一、色相相鄰，在色彩上會(huì)顯得簡(jiǎn)潔。

#333366

#99CC33

#336699

#999999

#003366

#669999

#003399

#CCFF99

#333333

#999933

#336699

#333333

#666666

#99CC33

#003366

#999999

#336699

#333333

#3366CC

#CCCC66

#333300

#6699CC

#006699

#000000

#003366

#CCCCCC

#006699

#000000

#999999

#003366

制作 by 小影

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：山陰教育信息 > 《網(wǎng)頁設(shè)計(jì)常用色彩搭配表 - 配色表》

舉報(bào)/認(rèn)領(lǐng)

0條評(píng)論

發(fā)表

請(qǐng)遵守用戶評(píng)論公約

類似文章 更多

山陰教育信息

關(guān)注對(duì)話

TA的最新館藏

教育局召開2014年春季開學(xué)民辦學(xué)校、幼兒園工作會(huì)
[轉(zhuǎn)] 五十個(gè)人生錯(cuò)覺！（三）
[轉(zhuǎn)] 中庸之歌！
[轉(zhuǎn)] 值得收藏的勵(lì)志箴言35篇！
[轉(zhuǎn)] 《醒世詩詞》二十二首！
[轉(zhuǎn)] 易經(jīng)里的做人智慧！

喜歡該文的人也喜歡更多

熱門閱讀換一換

乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

網(wǎng)頁設(shè)計(jì)常用色彩搭配表

網(wǎng)頁設(shè)計(jì)常用色彩搭配表 - 配色表

按色相的搭配分類

紅色

橙色

黃色

黃綠色

綠色

青綠色

藍(lán)色

藍(lán)紫色

紫色

紫紅色

按印象的搭配分類

柔和、明亮、溫柔

柔和、潔凈、爽朗

可愛、快樂、有趣

活潑、快樂、有趣

運(yùn)動(dòng)型、輕快

輕快、華麗、動(dòng)感

狂野、充沛、動(dòng)感

華麗、花哨、女性化

回味、女性化、優(yōu)雅

高尚、自然、安穩(wěn)

冷靜、自然

傳統(tǒng)、高雅、優(yōu)雅

傳統(tǒng)、穩(wěn)重、古典

忠厚、穩(wěn)重、有品位

簡(jiǎn)單、潔凈、進(jìn)步

簡(jiǎn)單、時(shí)尚、高雅

簡(jiǎn)單、進(jìn)步、時(shí)尚

柔和、明亮、溫柔

柔和、潔凈、爽朗

可愛、快樂、有趣

活潑、快樂、有趣

運(yùn)動(dòng)型、輕快

輕快、華麗、動(dòng)感

狂野、充沛、動(dòng)感

華麗、花哨、女性化

回味、女性化、優(yōu)雅

高尚、自然、安穩(wěn)

冷靜、自然

傳統(tǒng)、高雅、優(yōu)雅

傳統(tǒng)、穩(wěn)重、古典

忠厚、穩(wěn)重、有品位

簡(jiǎn)單、潔凈、進(jìn)步

簡(jiǎn)單、時(shí)尚、高雅

簡(jiǎn)單、進(jìn)步、時(shí)尚