探灵笔记蹲下鬼看不见:網頁顏色搭配表及顏色搭配技巧

顏色搭配常識:

探灵笔记官网在哪下载 www.kwshe.icu 1.網頁中色彩的表達使用三種顏色,及紅(R)、綠(G)、藍(B),及通常所說的RGB色彩,它包含了人類所感知的所有顏色,網頁中表達顏色如下(紅色為例)RGB格式:紅色是(255,0,0)或十六進制hex格式為(FF0000)。

2.將色彩按"紅->黃->綠->藍->紅"依次過度漸變可得到12色環:紅,橙紅,橙,橙黃,黃,黃綠,綠,藍綠,藍,藍紫,紫,紫紅。

3.顏色分非彩色和彩色兩類。非彩色是指黑,白,灰系統色。彩色是指除了非彩色以外的所有色彩。通常內容文字用非彩色(黑色),邊框,背景,圖片用彩色。所以即使頁面豐富,看內容依然不會眼花,通常背景與內容對比要大。

按單一色彩為主色彩分類

網頁設計一般以單一色彩為主,下面每類都以該色彩為主,配以其它或類似色彩的,并按照從輕快到濃烈的順序排列。

紅色/ 是一種激奮的色彩。刺激效果,能使人產生沖動,憤怒,熱情,活力的感覺

#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
#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
#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
#996699
#CCCC99
#669999
#999966
#CCCC99
#339999
#336666
#669999
#CCCC99
#999999
#003366
#669999
#663333
#339999
#CCCC66
#333333
#339999
#CCFFCC
#336666
#3399CC
#666666

藍色 / 是最具涼爽,清新,專業的色彩。它和白色混合,能體現柔順,淡雅,浪漫的氣氛(象天空的色彩:)白色---具有潔白,明快,純真,清潔的感受

#FFFFCC
#CCFFFF
#FFCCCC
#99CCCC
#FFFFFF
#3399CC
#CCFFCC
#99CCCC
#FFFFCC
#CCCCFF
#FFFFFF
#99CCFF
#FFCC99
#FFFFCC
#99CCFF
#336699
#FFFFFF
#99CCCC
#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

藍紫色  / 

#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
#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
#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
#FF99CC
#003399
#CCCC00
#FFCCCC
#FF99CC
#CCCCFF
#FF9999
#FFCCCC
#FF99CC
#669966
#CC6699
#FFCCFF
#CCCCCC
#CC99CC
#CC3399
#CC3399
#FFCC99
#FF6666
#FF3399
#CCCC99
#663366
#663366
#FFFFCC
#FFCCCC
#663366
#CCCCCC
#CC99CC
#990066
#FFCC00
#CC0033
#990066
#CCCCCC
#006699
#999900
#990033
#000000
#990066
#000000
#009966

按印象的搭配分類

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

柔和、明亮、溫柔 /  亮度高的色彩搭配在一起就會得到柔和、明亮、溫和的感覺。為了避免刺眼,設計師一般會用低亮度的前景色調和,同時色彩在色環之間的距離也有助于避免沉悶。

#FFFFCC
#CCFFFF
#FFCCCC
#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

柔和、潔凈、爽朗  / 對于柔和、清潔、爽朗的印象,色環中藍到綠相鄰的顏色應該是最適合的。并且亮度偏高??梢鑰吹?,幾乎每個組合都有白色參與。當然在實際設計時,可以用藍綠相反色相的高亮度有彩色代替白色。

#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

可愛、快樂、有趣  /  可愛、快樂、有趣印象中的色彩搭配特點是,色相分布均勻,冷暖搭配,飽和度高,色彩分辨度高。

#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

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

#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

運動型、輕快  /  運動的色彩要強化激烈、刺激的感受,同時還要體現健康、快樂、陽光。因此飽和度較高、亮度偏低的色彩在這類印象中經常登場。

#FF6666
#FFFF00
#006699
#FF9966
#FFFFFF
#0066CC
#339933
#FFCC33
#336699
#FF9900
#FFFFCC
#336699
#CC6600
#CCCC44
#336699
#99CC33
#FFFFFF
#0099CC
#99CC33
#FF6666
#336699
#336699
#FFFFFF
#99CCCC
#FF0033
#333399
#CCCC00
#33CC99
#FFFF00
#336699

輕快、華麗、動感 / 華麗的印象要求頁面充斥有彩色,并且飽和度偏高,而亮度適當減弱則能強化這種印象。

#990066
#FFCC00
#CC0033
#FFCC33
#333399
#FF0033
#666699
#FFFF00
#FF0033
#FF0033
#006699
#FFFF33
#FFCC00
#009999
#CC3366
#FF0033
#CCCC00
#006699
#CCCC00
#FF9933
#663399
#FF9933
#FFFF00
#336699
#CC3333
#FFCCCC
#99CC00
#003399
#FFFF00
#FF6600

狂野、充沛、動感 / 狂野的印象空間中少不了低亮度的色彩,甚至可以用適當的黑色搭配。其他有彩色的飽和度高,對比強烈。

#990066
#FFFF00
#003399
#CC0033
#000000
#003399
#003399
#FFFF00
#F00000
#CC3333
#CCCCCC
#003366
#CC0033
#333333
#CCCC00
#000000
#99CC00
#CC0033
#FF0033
#333333
#FF9900
#990066
#000000
#009966
#666666
#FF6600
#333333
#993333
#CCCC00
#663366

華麗、花哨、女性化  / 女性化的頁面中紫色和品紅是主角、粉紅、綠色也是常用色相。一般它們之間要進行高飽和的搭配。

#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

回味、女性化、優雅 / 優雅的感覺很奇特,色彩的飽和度一般要降下來。一般以藍、紅之間的相鄰,調節亮度和飽和度進行搭配。

#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

高尚、自然、安穩 /  高尚一般要用低亮度的黃綠色,色彩亮度降下去,注意色彩的平衡,頁面就會顯得安穩。

#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

冷靜、自然 /  綠色是冷靜、自然印象的主角,但是綠色作為頁面的主要色彩,容易陷入過于消極的感覺傳達,因此應該特別重視圖案的設計。

#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

傳統、高雅、優雅 / 傳統的內容一般要降低色彩的飽和度,特別是棕色很適合。前面介紹紫色也是高雅和優雅印象的常用色相。

#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

傳統、穩重、古典 / 傳統、穩重、古典都是保守的印象,色彩的選擇上應該盡量用低亮度的暖色,這種搭配符合成熟的審美。

#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

忠厚、穩重、有品位  / 亮度、飽和度偏低的色彩會給人忠厚、穩重的感覺。這樣的搭配為了避免色彩過于保守,使頁面僵化、消極,應當注重冷暖結合和明暗對比。

#FFFFCC
#CC9933
#336666
#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

簡單、潔凈、進步  / 簡單、潔凈的色彩在色相上可以用藍、綠表現,并大面積留白。而進步的印象可以多用藍色,搭配低飽和甚至灰色。

#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
#ABCDEF
#ABCDEF

簡單、時尚、高雅 / 灰色是最為平衡的色彩,并且是塑料金屬質感的主要色彩之一,因而要表達高雅、時尚,可以適當使用,甚至大面積使用。但是要注重圖案和質感的構造。

#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
#ABCDEF
#ABCDEF

簡單、進步、時尚 / 表現進步的色彩主要以藍色為主,搭配灰色。而色彩的明度統一、色相相鄰,在色彩上會顯得簡潔。

#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

工具導航地圖

JSON在線解析、JSON格式化、JSON對比、JSON壓縮

在線加密/解密 | AES | DES | MD5 | Base64

在線壓縮/格式化/美化 | JSON | JS | HTML | Java | SQL

開發文檔/API文檔

前端WEB工具/前端工具

在線轉換 | 單位轉換 | 數據轉換 | 格式轉換

二維碼生成 | 二維碼解析 | 動態二維碼 | 二維碼美化

正則表達式 | 正則表達式測試工具 | 正則表達式教程

備案查詢 | SEO查詢 | Robots生成 | 站長工具

HTTP模擬請求 | HTTP測試工具 | HTTP協議 | GET/POST

房貸計算器 | 最新房貸計算器 | 2019房貸利率

時間 | 萬年歷 | 放假 | 老黃歷 | 測網速 | 天氣

開發工具 | API文檔 | API手冊下載

工具破解 | 注冊碼 | 漢化工具

在線修改圖片 | 圖片尺寸修改 | 圖片壓縮 | 圖片美化 | 圖片批量處理 | 圖片水印

JS解密 | JS加密 | JS 美化 | JS格式化 | JS混淆

支付掃碼

所有贊助/開支都講公開明細,用于網站維護:贊助名單查看

正在加載... ...