00037 配色筆記一

2022-02-28 03:01:52 字數 3317 閱讀 3349

本文總結自一位前輩的文章,

位址為 

我擷取了一些我認為特別重要的字句。

1.配色方案是畫布,不是畫

網頁設計中最基本的原則之一是,不管你花多長時間創造乙個華麗的設計,其最終的角色都是這場秀中真正的明星——內容的襯托。網頁設計中不應該讓配色比內容展示更加「熱鬧」。你的設計應該是在後台的,幫助將**的內容推向前台。

2.從簡單的灰度模式開始

你可以為你的主背景和文字從無數的色彩組合中進行挑選。然而,我的建議是先掌握最簡單的,白色或淺灰色背景搭配深灰色的文字。

如果你觀察流行的**所選擇的模板或主題,你會發現它們中的大多數都是使用深灰色的文字搭配白色或淺灰背景,這是有充分的理由的。這種組合你基本保證了為訪客提供可讀性,並允許基於內容的文字和影象進入前景。

一般來說,你應該避免使用純黑的文字,深灰色相對來說更易閱讀。乙個相對舒適的範圍是#333333至#666666。

基於上述,在任何文字主體下,最保險的背景色是全白#ffffff。對於其他的背景元素,背景色的範圍可以從#ffffff至#cccccc.

再次宣告,這些並不是你必須使用的顏色準則,僅僅只是你可以開始安全設計的一些指南。

3.只選擇一種強調色

配色方案出錯的最常見的地方就是顏色使用過多。你使用的顏色越多,你想要將它們都保持在控制中就越困難。所以一開始,在灰度基礎之上只新增一種額外的顏色來強調諸如鏈結、某些標題、選單、按鈕等等元素是很有用的。你的強調色可以是藍色、綠色、紅色或其它任何你喜歡的顏色。

開始在你的基礎圖上拉乙個強調色的矩形框,這樣你可以衡量顏色是否與頁面上所有的元素匹配。然後開啟顏色選擇器,選擇在顏色面板右上角四分之一中心位置的顏色。

上下移動滑塊,選擇乙個你認為適合你設計的顏色。

至此,你已經使用了三種基本顏色:你的背景色,文本色,以及一種強調色。將來你可以,也應該使用多個強調色,但是現在最好只是想一想。如今你已經使用三種顏色了,請熟悉這三種顏色,當你更自信的時候,你可以新增更多的顏色。

你已經學會了:

你學會了怎樣選擇「色相」。簡而言之,色相就是一種基本色。當你上下移動滑塊的時候你就會看到你的顏色選擇器中的「h」值在不斷變化。

「h」代表色相,一旦你選擇強調色,文字框中數值就是色相的值。

4.如果有疑問,使用藍色

如果你對選擇什麼強調色有任何疑問,請使用藍色。藍色通常是最靈活的顏色,適合多數的**型別。紫色和黃色之類的顏色可以是很活潑的,但是如果使用不當的話,立馬會變得很花哨。

另一方面,你可以在以藍色為強調色的基礎上隨意發揮,但你也不能走的太遠。如果你不知道從**開始學習或者在專案中使用什麼顏色的時候,就用藍色就對了。如果你要選擇特別的藍色,你可以選擇深藍色(h值235)至淺綠色(h值190)的範圍以保證自己在安全的領地。

在我的布局示例中,我選擇值為205的色相。當你已經選定了強調色,將它新增到任何你認為必需的位置。假如你在按鈕或任何其他有文字的區域使用了強調色,也要相應地改變文字的顏色。在這個例子中,我將強調色區域之上的文字改成了白色。

5.為強調色新增變化

一旦你選定了強調色,將色相(h)滑條位置保持不變。你現在需要為你的設計新增額外的顏色,不過為了讓事情變得更簡單,這些顏色都是你已經選擇的強調色的變色。

在顏色選擇器上強調色周圍拖動選色點來建立變色。

6.避開調色面板右上角的位置

顏色選擇器上右上角的位置是高純度的顏色。右上角的顏色像一級方程式賽車,它們的執行力驚人,並且非常吸引人,但是我們一般需要足夠的經驗才能很好地駕馭它們。如果沒有經驗的話,它們可能會造成事故,所以最好去嘗試使用更緩和的顏色。

這就是為什麼我在本教程的第三節讓你選擇右上角四分之一中心位置的顏色,以確保以一種相對柔和的顏色開始。

在上兩個部分你已經學會了運用色彩理論的幾個不同的方面。您學會了如何使用:飽和度和明度

當你在顏色選擇器上拖動選色點的時候,你會看到「s」和「b」的值在改變,這分別代表「飽和度」和「亮度」。同時你會也看到色相的值保持不變。所以你是通過改變基礎色的飽和度和亮度來建立變色的。

飽和度和色彩

飽和度生動地表達了你的顏色。舉個例子來說,想象一下「我的白襯衫被溢位的紅酒滲透了」。在顏色選擇器上,飽和度取決於有多少的白色與你的基本色進行混合。白色越少,飽和度越高。

當你向右拖動選色點的時候,你減少了白色的量,提高了飽和度,因此「s」值上公升了。當你向左拖動選色點的時候,你增加了白色的量,降低了飽和度,因此「s」值下降了。

這種將基本色與白色混合的方式也叫做建立一種「色彩」。這個詞來自於顏料混合,就是將白色的顏料與彩色的顏料進行混合。

亮度與色度

亮度是往你的顏色中混合多少黑色。黑色越少,亮度越大。

當你向上拖動選擇點的時候,你減少了黑色的量,提高了亮度,因此,拾色器上的「b」值就上公升了。當向下拖動選擇點的時候,你增加了黑色,「b」值就下降了。

這種將基本色與黑色混合的方式也叫做建立「色度」。這同樣來自於顏料混合,就是將黑色的顏料與彩色的顏料進行混合。

色調

當你用灰色混合基本色時就建立了「色調」。當你從色板的右上角挪出的時候,你同時降低了飽和度和亮度,也就是同時增加了白色和黑色(灰色),也就建立了色調。因此基本上任何時候只要你的飽和度和亮度都不到100%,這就是一種色調。

同樣,這個術語來自於顏料混合,將灰色顏料與一種彩色顏料混合。這也就是詞語「調淡」的由來。很酷吧?

單色配色方案

「單色」配色方案是你使用基本色以及基於基本色調整顏色的濃淡、陰影及色調來進行擴充套件。你剛剛已經學習過了所有這些術語在實踐設定中的含義。因此通過挑選一種強調色以及它的變色,你實際上已經建立了單色的配色方案。

接下來呢?

在灰度基礎上繼續練習你的單色配色方案直到你已經非常自信。試著用不同的色相作為你的強調色來進行創作,嘗試在使用中改變飽和度和亮度。

當你覺得得心應手的時候,繼續新增乙個額外的強調色。我建議你在第一次嘗試的時候使用橙色和藍色,因為它們是相處最和諧的「二人組」。然後嘗試綠色和藍色,在我的經驗中,這是第二簡單的。這些組合是最容易打動客戶的。

為了幫助你更好地理解網頁設計的配色方案,你能做的最好的事絕對是利用瀏覽器擴充套件外掛程式顏色取樣器來抓取顏色樣例,比如說colorzilla,通過它來開始研究經驗豐富的設計師是怎麼做的。當你瀏覽網頁時,看到乙個非常棒的配色方案,用顏色取樣器將配色方案分離出來。分析樣例中每個色相,看看什麼飽和度和亮度水平效果最好。也要注意這些顏色都是怎麼相互搭配的。

vim 配色筆記

用 toc 來生成目錄 vim 自帶配色模板 所在的位置 如果想使用vim 自帶的配色模板,在.vimrc 檔案內新增如下語句 colorscheme template name like below colorscheme evening.vim 配色語法引用部落格,小弟很喜歡博主快樂永恆 的這篇...

logcat輸出顯示顏色筆記

一 log.v 的除錯顏色為黑色的,任何訊息都會輸出,這裡的v代表verbose囉嗦的意思,平時使用就是log.v 二 log.d的輸出顏色是藍色的,僅輸出debug除錯的意思,但他會輸出上層的資訊,過濾起來可以通過ddms的logcat標籤來選擇.三 log.i的輸出為綠色,一般提示性的訊息inf...

操作主機角色筆記

操作主機角色 1架構主機 架構主機控制整個林的架構的全部更新 手工安裝 執行 regsvr32 schmmgmt.dll 執行 mmc 檔案 新增或刪除管理單元 active directory架構 2域命名主機 域命名主機控制林中域的新增或刪除 可以防止林中的網域名稱重複.管理工具 active ...