如何學習色彩?

色彩理論,應用,如何配色等等,學習路徑是怎樣的?除了平時的接觸以外,如何系統地學習?


用易於人類識記和想像的格式去看去思考是學習色彩的關鍵

幾個網址:
The Dimensions of Colour
ColorMunki - ColorMunki Design
NCS Navigator

打開關於ncs以及munsell的網頁時 建議用firefox並且按照http://www.gballard.net/firefox/#config 對firefox進行一下設置
否則對於寛色域顯示器會有過飽和的問題 色域不滿足sRGB的則會欠飽和


目錄
色彩的現象和原理
第一節 色彩的基礎知識
第二節 色彩的基本要素
第三節 色彩的本質與色彩感知原理
第四節 色立體與表色系

第一節 色彩的基礎知識
色彩即各種物體在自然光或人工光下吸收和反射光量的程度不同 而顯現出各種各樣的顏色。
色彩產生的三大要素——光源 物體 人。物體分為物體色和固有色 物體色彩會隨著外界因素變化而變化 它在不同環境中呈現不同的色彩狀態 因而它是不確定的。固有色指物體在正常的白色日光下所呈現的色彩特徵 固有色比較穩定。
白光通過三稜鏡分解成七種顏色的現象叫做色散。

人眼對紅綠藍最為敏感 大多數色光都可以通過紅綠藍三色按照不同的比例進行合成。
光學三原色為紅 綠 藍 將它們混合 可以得到白色光 電腦顯示屏上的色彩均是由光學三原色組成。

色彩三原色分別為青藍 洋紅 黃 將它們混合 就會得到黑色。

第二節 色彩的基本要素
一 色彩的屬性
色相(Hue) 色彩的相貌 例如我們所說的赤橙黃綠青藍紫。
明度(Value) 色彩的明暗程度
純度(Chroma) 也叫彩度 指色彩的鮮艷程度 也就是色彩的飽和度。純度是衡量一種顏色中黑或白成分多少的概念。顏色混合次數越多 純度越低。

二 常見的色彩類型
1 原色 紅黃藍
2 間色 兩種原色的等量混合 如橙色系=黃?藍 綠色系=黃?藍 紫色系=藍?紅
3 複色 在間色的基礎上產生 如 橙?綠=橙綠 橙?紫=橙紫 綠?紫=綠紫

1 無彩色 黑 白 灰。
2 有彩色 具有色相 純度 明度三個基本屬性的顏色。
3 中性色 黑白灰金銀。

1 同類色 位於二十四色相環中15°以內的色相。
2 臨近色 二十四色相環中色相間隔在15°~45°左右的稱為臨近色相。
3 類似色 二十四色相環中間隔30°~60°左右的色相為類似色。
4 中差色 在二十四色相環上間隔90°左右的色相為中差色。
5 對比色 在二十四色相環上間隔130°左右的色相。
6 互補色 在二十四色相環上間隔180°左右的色相環。

第三節 色彩的本質與色彩感知原理
光是一種電磁波 具有波長與振幅兩個因素 不同長短的波長產生色相差別 不同振幅強弱產生同一色相的明暗差別。色溫分為冷光和暖光 即偏紅或偏藍。
視網膜上存在光敏細胞 分為桿狀細胞和椎狀細胞 桿狀細胞對入射光的強度敏感 椎狀細胞對亮度的靈敏度不高 但能分辨顏色。

第四節 色立體與表色系
色立體是依據色彩的色相 明度 純度變化關係 藉助三維空間 用旋圍直角坐標的方法 組成一個類似球體的立體模型。

參考文獻 《色彩設計——色彩構成的原理與設計》 吳振韓 著 南京師範大學出版社


其實我覺得畫畫蠻有用的,對於色彩的感覺很有用,這些東西看書上的例子有時候很不好感受,也記不住那種感受。可以畫畫風景,最好帶著感情去畫,晴天陰天是什麼感覺,春天秋天是什麼感覺,心情好的時候看一個地方是什麼感覺,不好的時候是什麼感覺。畫的不好甚至難看也沒關係,本來也不是想成為畫家,不過一定要努力想要去畫好,當你努力想要通過自己的雙手表達那種感覺的時候,你就會體會到怎麼樣的色彩會給人帶來怎麼樣的感受,可能只是手上調不出來畫不對而已,但是感覺就有了,通過電腦啦什麼的,就會根據需要挑選合適的色彩。


  • 想學習色彩,先要學習色彩模式,印刷的CMYK,顯示器的RGB,人眼識別是HSL。了解色彩是如何組成和變化的。
  • 然後可以看一些書或者視頻,學習色彩構成,主色,輔助色,點綴色等等,並且同時多練習,多看別人的配色案例,分析,再結合自己動手練習。
  • 色彩在設計當中也不是完全獨立的,要學好色彩和配色,還應該有版式,結構等相關知識,比如通過色彩的面積來進行對比,或調和,或平衡。
  • 對幾種色系進行研究,了解個色系所代表的情感和文化內涵,在運用的時候也會更貼合主題。

好問題。因為想設計一個自己網站的logo而對其中的一個關鍵因素——色彩理論產生了興趣,然而卻苦於找不到相關的教程文章或博客來系統地學習。

花了很多的時間後終於在B站上找到了一個質量比較高的教學視頻,然後開始邊看邊做筆記。順便在這裡分享下,希望對其他感興趣的朋友也能有所幫助。

(更新中...總共有28個部分)

ps:原文鏈接

色彩原理(1- 5) - 平面設計 - 實用技能加點計劃

色彩原理(6-10) - 平面設計 - 實用技能加點計劃

吐槽一下知乎居然不支持Mrakdown模式,一個個上傳圖片真的太麻煩了(累死)

----------分割線----------

-----正文(1-5部分)-----

基於【中字完整版色彩的語言藝術設計大師級訓練視頻教程】的筆記 1-5部分

1 前言

  • 色輪
  • 印刷四分色模式
  • RGB色彩模式

2 學習使用色輪(COLOR WHEEL)

了解色彩理論

! 色彩是電磁能量

了解標準模式色輪

體現了顏色之間的關係

色輪的三原/基色(其他所有顏色的來源)

基色-&>次色
三基色-&>六次色

顏色的命名(受眾對象)
不易被誤解

色輪有多種
淺色|RGB色(後面會詳細介紹)

3 色彩的三個組成部分

【處理顏色時需要考慮的三個參數

任意一種顏色都有且僅有三個參數

分別為

  • 色調(Hue=Color)

就等於色彩,只是換了種說法而已

  • 飽和度(Saturation)

色彩的亮度強度

飽和 = 銳利

不飽和 = 柔和

ps:灰|棕色 - 特定色彩的不飽和顏色

棕 - 橙色等的半飽和色

灰 - 所有顏色的高柔和色

兩個來源:冷|暖 色調

//柔和度超過一定範圍即為棕色

中性色 不屬於任何色調

三大常用中性色:

  • 顏色值(Value)

顏色的明暗度/灰顏色

!!! 顏色值很重要

  1. 如果沒有顏色值那麼就沒有色調和飽和色(就沒有任何顏色)
  2. 相對於色調和飽和度,肉眼更依賴於顏色值的差異,它告訴了我們我們看到的是什麼顏色
  3. 色彩清晰度的建立標準(視覺清晰度問題)(一個色彩起始與結束的界限

創建配色方案

4 顏色值(Value)的重要性

Value如此重要的兩個主要原因

  • 如果沒有顏色值那麼就沒有色調或色彩飽和度(就沒有任何顏色
  • 顏色值建立起視覺清晰度

顏色值在布局設計中有著重要地位(顏色值結構)

5 所見即所得

基於數字設備上的色彩顯示問題

顯示屏上顯示的色彩和實際列印出來的色彩很多時候並不完全相符

WYSIWYG(what You See Is What You Get)方式

校對(Calibrate)(PC上時)

五個要點

  • 開始任何設計之前保存好當前的校對設置
  • 開始任何設計之前先保存好當前的校對設置
  • 在你通常使用的亮度下校對顯示器
  • 台式機PC電腦的顯示器顏色顯示是有差異的(盡最大可能是兩者統一,PC上的更可信)

如果顏色在數碼設備上的精確性對你很重要,那麼就可以考慮使用專業的顯示器校對設備(很燒錢)

-----有時間的話明天繼續-----

-----正文(6-10部分)7.16更-----

基於【中字完整版色彩的語言藝術設計大師級訓練視頻教程】的筆記 6-10部分

6 RGB CMYK Spot(專色) - 色彩種類

RGB (RED;GREEN;BLUE)

基於燈光的在屏幕上使用的顏色

這三種顏色組成了我們在顯示器上看到的所有色彩

所有的顏色值範圍都為0-255(咋這麼眼熟呢)

CMYK(CYAN;MAGENTA;YELLOW:BLACK)

CYAN 藍綠色

MAGENTA 絳紅色

K = Key Plate (只使用黑墨的印刷版) = Black

針對彩色印刷過程

百分比不同的墨水獨自出現或重疊時就會在紙張上呈現出不同的色彩

CMYK 中的較淺色由一半的百分比或屏幕的強度製作得來(這些小點通常很小,不放大是看不到的)

其他次色可由於不同百分比的四種顏色組成

Spot(專色)

先混合的墨水顏色

(沒太懂)

定製的顏色,不依賴於CMYK顏色

三者之間的練聯繫

像photoshop,Illustrator之類的
圖像處理軟體可以

  • 將專色轉換為CMYK顏色

  • 將專色和CMYK顏色轉換為RGB公式。

(在不同的顏色系統之間轉換顏色)

7 找到最優的色彩

選擇正確色彩的3個公式

選擇顏色或者為商標設置顏色的原則

  • 選擇一種給顧客的目標客戶有關的顏色
  • 避免選擇與顧客競爭對手相似的顏色
  • 選擇的顏色要傳達出顧客的產品概念

(這三個公式里不包括你自己喜歡你選擇的顏色,也不包括你的顧客喜歡選擇顏色)

外觀;感覺;目的;產品或服務的類別。

與顏色對話:

  • Particular(獨特性)

多數時間設計師需要尋找一種符合顧客產品外觀和感覺的顏色

但是有的時候新奇的顏色會產生更好的效果

有的時候意想不到的顏色會帶來更高的辨識度

  • Be practical(實用性)

考慮logo的顏色在不同情境下的實用性

(考慮與特定的視覺環境相融合)

1.吸引目標客戶
2.傳達出應傳達的信息

Pair

出現場景

  • 企業標識項目組中
  • 限制兩種墨水的印刷工作中

使用成對的顏色讓標識更富有活力

想要有活力的同時具有多樣性

選擇不相近的顏色

在兩種混合顏色中添加黑色和白色

使用每一種顏色以及這種顏色的深、淺模式

這樣可以用這三種顏色製造出很多種顏色

通過改變飽和度能獲得不同的效果(漸變展示)

9 使用數字工具選擇和修改顏色

這一部分沒有講到什麼原理,而且現在我也還沒有開始用這些工具,所以先跳過

10 使用灰色和棕色

灰色和棕色可以由互補色混和調製出來

互補色(comlementary)

色輪中兩個相對的顏色

配比的不同導致實際產出的顏色不同

在數字工具中也可實現

中性顏色怎樣在調色板中混合

基於色輪的標準調色板

  • 單色調色板

  • 類似顏色的調色板

  • 三角色系調色板

將色輪平均分成三部分的三個顏色

  • 互補色調色板

  • 分散互補的配色方案

ps:後續視頻會詳細講解每一個調色板和細節

中性色彩|柔和色彩


學習色彩首先需要懂得色彩搭配。

例如

單色搭配:就是相似的顏色,例如綠色,一個海報或者服裝裡面有不同深淺的綠色,又或者有不同的灰度的綠色組合,都屬於綠色的範疇,都屬於單色搭配。

補色搭配:就是色相環裡面的120度的兩個補色搭配,例如最常用的黃和藍、綠和橙色、紅和黃、紅和藍、綠和紫,這樣搭配讓畫面相對協調而且增加趣味。

對比色搭配:就是色相環呈現180度對立的兩個顏色搭配,這樣的搭配是有戲劇性,可以使畫面效果強烈,搶眼,可是搭配得不好會破壞畫面。對比色可以小面積使用,或者降低純度使用。不適宜大面積使用對比色。

原色搭配:紅黃藍三色搭配,是挺經典的,但是比較常見,需要搭配很好才能出彩。

這幾個搭配原理萬變不離其宗,需熟記並靈活運用。


---------------------------------------------當日更新---------------------------------------------------------

如果上色讓自己的配色更立體豐富。

1.素描關係

像黑白素描畫一樣,通過黑白灰可以使物體變得立體,層級變得豐富,顏色也一樣,因此,一個上色應該有2~3種顏色

2.色彩對比關係

通過顏色的各種對比方法可以使畫面變得豐富

補色對比:就是色相環裡面的120度的兩個補色搭配,例如最常用的黃和藍、綠和橙色、紅和黃、紅和藍、綠和紫,這樣搭配讓畫面相對協調而且增加趣味。

純度對比:顏色的飽和度,簡單來說就是鮮艷程度的對比

色相對比:就是色相環呈現180度對立的兩個顏色搭配,這樣的搭配是有戲劇性,可以使畫面效果強烈,搶眼,可是搭配得不好會破壞畫面。對比色可以小面積使用,或者降低純度使用。不適宜大面積使用對比色。

鄰近色對比:就是顏色之間鄰近的顏色搭配與對比

冷暖對比:冷色和暖色的對比

明度對比:不同的亮度顏色的對比,有點類似黑白灰對比

面積對比:不同顏色的不同面積大小的對比

同類色對比:兩個相近的顏色進行對比

3.空間關係

即前中後的關係,可以通過色彩的深淺、冷暖、純度等等塑造出空間關係。


在一覽互聯網文庫――為互聯網行業人才量身定製的互聯網資料分享平台里有網頁設計方面的資料,主要包括配色、布局等等的資料可供參考!


首先去看,然後去感知,最後去思考。


推薦閱讀:

很多海報上加上一堆字母感覺很高級,可是那些字母都是什麼意思呢?
公司或個人如何應對客戶看效果圖的要求?以免作品被抄襲或模仿。
24 歲女生轉行做 Web 前端晚嗎?
如何讓一個網站看起來高大上?或者更有設計感?
你如何評價蘋果官網 iPhone 7 的文案設計?

TAG:網頁設計 | 設計 | 顏色 |