色彩基礎小知識：HSB配色小技巧

Sponsor

色彩是設計工作中非常重要的一部分，很多產品都有自己的品牌色，每個顏色也有不同的含義和心理映射。本次就簡單介紹一下色彩的基礎小知識和HSB模式配色小技巧。

色彩三原色

顏色分為美術三原色和光學三原色。

一般我們說的紅、黃、藍三原色就是美術三原色，也是我們現實生活中看到的顏色。

但是在屏幕上的三原色是紅、綠、藍，又稱是光學三原色。光學三原色就是我們經常用到的RGB色彩模式。

色彩的搭配?

在了解各種搭配之前先了解一下12色色相環。

12色色相環以美術三原色為基礎，由原色、二次色、三次色組成。原色是紅、黃、藍在環中形成一個等邊三角形，二次色是橙、紫、綠三個顏色由原色混合而成，三次色則是由原色和二次色混合而成。

單色系

一個色相，顏色不同的深淺程度。

同類色

同類色是指在色相環上相距15°~30°顏色的搭配。

鄰近色

鄰近色是指在色相環上相距 60°~90°顏色的搭配。

互補色

互補色是指在色相環上對立（180°）的兩個顏色。

對比色

對比色是指在色相環上相距120°~180°的兩個顏色。

以上的配色只是一些理論依據，具體的配色可以按照這些依據靈活運用。

色彩的三要素

色彩的三要素是：色相、飽和度、明度，也是我們經常說的HSB色彩模式。

色相（Hue）

色相，即色彩的相貌，就是指紅、橙、黃、綠、青、藍、紫這些不同的顏色。

飽和度（Saturation）

飽和度，即色彩的純度，就是指顏色的鮮艷程度。

明度（Brightness）

明度即，色彩的明暗度，就是指顏色亮度的變化。

HSB模式配色

我一般都是用HSB模式進行配色，這個模式和RGB模式相比看起來會更加直觀，下面以藍色為例，給藍色配一組顏色。

單色配色

保持色相(H)不變，變化飽和度和明度。淺色色調飽和度(S)減少、明度(B)增加，深色色調飽和度(S)增加、明度(B)減少。

雙色配色

某些顏色可以直接保持飽和度和明度不變，直接改變色相(H)，某些顏色比如綠色，在視覺上更亮一點，在改變色相的同時，可以適當增加飽和度、減少明度。配色還是要以視覺感受為主，具體的數字只是來幫你更加精確。

固定搭配

根據上面介紹的搭配模式，可以產生一些固定搭配的色彩出來，在沒有好的靈感的時候，用一些固定搭配總是不會出錯。

本次只是講了一些色彩搭配的固定格式和如何操作的小技巧，具體的搭配還是要根據產品需求和實際情況去實踐。

其實色彩搭配是一個比較難的技術活，即使你知道了上面的小技巧可能還是不能馬上搭配出很好看的顏色，不過沒關系，主要還是要多看，多看一些顏色搭配好看的圖片、界面，去學習找感覺，慢慢的色彩搭配的感覺就可以出來了。

作者 | 設研 倉倉君 公眾號 | Leo設研所

來源 | https://mp.weixin.qq.com/s/r4nHgNaaezH3uWYLq99GFw

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。