4000字干貨！從零開始幫你提高配色水平！

趕在年前將這篇關于“配色”的設計解析整理了出來，分享給大家，希望對大家有幫助。

在平時的設計創作中，色彩搭配是很基礎且重要的。那如何才能讓自己成為了一個會搭配的設計師呢？除了日常的審美和創作積累，其實掌握好色彩基礎和搭配原理才是讓自己設計配色提升的第一步。下面就帶大家由淺入深全面了解一下吧！

本文主要圍繞四個方面進行講解：

色彩的基礎知識

1. 色彩模式

目前實際工作中比較常見的的幾種色彩模式有如下幾種：CMYK、RGB、HSB、HSL。

CMYK：印刷四色模式是彩色印刷時采用的一種套色模式，利用色料的三原色混色原理，加上黑色油墨，共計四種顏色混合疊加，形成所謂“全彩印刷”。主要應用于平面印刷。

RGB：RGB 色彩模式（也翻譯為“紅綠藍”）是工業界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色。

HSB 又稱 HSV，表示一種顏色模式：在 HSB 模式中，H(hues)表示色相，S(saturation)表示飽和度，B（brightness）表示亮度 HSB 模式對應的媒介是人眼。HSB 模式中 S 和 B 呈現的數值越高，飽和度明度越高，頁面色彩強烈艷麗。

HSL 是一種將 RGB 色彩模型中的點在圓柱坐標系中的表示法。這兩種表示法試圖做到比基于笛卡爾坐標系的幾何結構 RGB 更加直觀。是運用最廣的顏色系統之一。

2. 色值

實際軟件設計應用中通用的兩種色值表述法：HEX 表示法（#xxxxxx）和 RGB（X，X，X）表示法：根據不同的色彩模式，HSB、HSL 也使用和 RGB 同樣的表示方法，如下圖選擇了一個顏色，用不同色值和模式的下表達色值書寫樣式。

HEX 表示法(#XXXXXX)又稱十六進制法，十六進制顏色代碼保存 0 到 9 之間的數字值以及從 A 到 F 的字母值表示 10-15 數字，十六進制顏色代碼是 6 位顏色代碼，這串 6 位數的代碼，實際上使用三組 2 位十六進制數表示了 RGB 的色值。RGB 表示紅、綠、藍三個通道的顏色，三個通道顏色的參數范圍值為“0-255”。更深入的知識可網上查閱相關資料，文章不做詳細贅述。

HSB 模式和 HSL 模式是在 RGB 色彩模式的基礎上衍生出來的。

HSB 是 H（Hue：色相）、S（Saturation：飽和度）、B（Brightness：明度），參數范圍值分別是“0-360”、“0-100”、“0-100”。

HSL 是（Hue：色相）、S（Saturation：飽和度）、Lightness（亮度），參數范圍值分別是“0-360”、“0-100”、“0-100”。Hue（色相）的取值范圍是色環上 0-360° 的圓心角度。但 L（Lightness：亮度）與 B（Brightness：明度）分別被認為是「顏色中白色的量」和「顏色中光線的量」。如下圖：

這兩種模式更適合軟件開發應用，所以設計師一般使用的都是 HSB 模式設計視覺圖，HSL 更適用于技術開發人員。所以設計師需要在同步設計頁面時知會技術人員。以免讓顏色有誤差。

配色工具與標準

1. 色相環

色相環是輔助設計配色的一大利器，一般我們選擇 24 色相環作為顏色標準。色相環的概念是基于 HSB 的色彩模式下就行分析講解；如下圖我們以 H（色相）為 350 度為起點，以 15 度遞增創立 24 色相環，（保持 S 飽和度：80，B 明度 100 參數不變）

根據色相環角度范圍，可以將色相環的色彩分為：同色相下顏色梯度變化(H 為 0，改變 S 飽和度和 B 明度)，同類色，鄰近色，類似色，中差色，對比色，互補色，映射屬性分暖色、冷色、中性色

「同色相色」：是指 H（色相）一致，通過改變 S（飽和度）與 B（明度）變化產生的顏色。

「同類色」：指色相性質相同，但色度有深淺之分。（是色相環中 15°夾角內的顏色）

「類似色」：也就是相似色。在色環上 90°內相鄰接的色統稱為類似色，例如紅－紅橙－橙、黃－黃綠－綠、青－青紫－紫等均為類似色。類似色由于色相對比不強。

「鄰近色」：色相環中相距 60 度，或者相隔三個位置以內的兩色，為鄰近色關系，屬于對比效果的色組。色相彼此近似，冷暖性質一致，色調統一和諧、感情特性一致。如：紅色與黃橙色、藍色與黃綠色等。

「中差色」：色相環中 90 度的配色，在視覺上是有很大的配色張力效果，是非常個性化的配色方式。在 24 色相上作任選一色；與此色相鄰之色為鄰色；

「對比色」：是指色相環上相距 120 度到 180 度之間的兩種顏色。

「互補色」：色相環中成 180°角的兩種顏色。

按照色彩的映射關系分為暖色、中性色、冷色，以上圖色相環飽和度和明度參數為例，通過 5°遞增展示。

2. 色立體

除了色相上的變化，顏色還有明度和純度上的變化，對于顏色的影響也至關重要。這三個詞匯的概念如下：色相 Hue：也稱色調，是指色彩的相貌；純度 Saturation：也稱飽和度，是指色彩的鮮艷程度；明度 Brightness：也稱亮度，是指顏色的明暗程度；色相、純度、明度三者構成了色立體的概念，讓色相環由二維變成了三維的概念。

3. 拾色器

拾色器是設計軟件經常會使用的調色工具，我們建立一個基于 S（飽和度）與 B（明度）的平面坐標系，如下圖：

將拾色器縱軸方向三等分可以將色彩分為高中低三大調，其中高調再細分為“白色調、粉色調、明色調、鮮色調”四色調；中調再細分為“灰色調、深色調”兩色調；低調為“黑色調”。如下圖：

3. 色彩對比度

我們參照網頁無障礙設計規范，可以先了解關于設計色彩對比度的一些概念：如下：

什么是對比度 ？

對比度是兩種顏色之間的亮度或顏色差異。對比度的比值越低，它們之間的差異越小。

為了確保盡可能多的人可以使用您的產品，對比度需要符合 WCAG 的 AA 級 與 AAA 級 標準。

WCAG 的 AA 級 要求小文本與背景的對比度至少為 4.5：1，大文本與背景的對比度至少為 3：1。WCAG 的 AAA 級 要求小文本與背景的對比度至少為 7：1，大文本與背景的對比度為 4.5：1。

小文本指字號在 19px 以下的粗體文本類型，或者是字號在 24px 以下的常規文本類型。大文本指字號至少是 19px 以上，字重為粗體的文本類型，或者字號是 24px 以上的常規體文本。

下方截圖是字節設計體系中的關于對比度設計的應用工具展示，你可以隨機選擇或者互調背景和文字色，進行對比度檢測，實時查看結果。參考網址： https://arco.design/palette/wcag

不合格案例：

合格案例：

配色的設計應用

1. 色彩分類和選擇

設計應用中選取是非常重要的，那根據設計應用，色彩主要可以分為主色、輔助色、中性色等。

• 主色

主色一般應用產品的品牌色，通過顏色提升用戶對品牌的認識，傳遞價值。

關于主色的選取，我們可以先根據一組產品截圖進行了解，通過獲取圖中產品的主色再結合顏色在拾色器上的分布理解。

通過上述案例產品主色調在拾色器上的分布，會發現大多數產品主色都會在右上方色域進行選擇。根據產品的需要傳遞的品牌特征，確認相關顏色色相之后，調整色彩的飽和度和明度，避免使用過低或過高的飽和度和明度，以保證用戶在識別顏色會比較舒服、適宜，同時還能吸引他們的注意力。

• 輔助色

色相環中的顏色角度相差越大，顏色的對比越強，視覺差異也越大。

所以用于搭配的輔助色應滿足以下兩個條件：

1. 有區分：盡量避免所選輔助色在視覺上與品牌色差距不大，導致用戶對品牌色產品誤解；
2. 不突兀：根據色彩原理來說，互補色是反差最大的顏色，但可能會有些突兀。所以我們選擇互補色的鄰近色，對比色作為輔助色。

輔助色可以在色相環的規則標準下根據實際特定的功能場景來選擇應用。如下圖通過 HSB 模式，色值（350，80，100）為基色創立色相環，做輔助色的選取分析（24 色相環選基色-6 色相環選擇輔助色-校正輔助色的步驟），僅作參考。

如下左圖支付寶的理財模塊，頂部背景圖使用品牌基色，金剛區圖標選擇同類色，保持視覺上的統一。右圖汽車之家底部有兩個 cta 按鈕，但是使用基色藍突出主要功能“獲取底價”，旁邊的按鈕使用類似色進行弱化。

再比如下圖產品例子：左圖馬蜂窩的酒店訂購頁面，使用基色、對比色、同類色，基色和同類色用于主要功能按鈕，對比色用于提示入住情況。右圖 soul 底部按鈕使用多種鄰近色、對比色表達不同的功能。

• 中性色

中性色包含一系列灰黑色，用于頁面中的內容文字、分割線、邊框，相關背景，中性色的定義還需要考慮深色背景以及淺色背景的差異。如下圖所示：

頁面設計中可以通過在中性色增加色相，正常添加藍色色相，HSB 色彩模式中，在曲線的軌跡中選擇對應的色值，得出不同層級的高級灰。

騰訊-TDesign 設計體系中提及了帶有品牌色傾向的中性色是如何計算的相關信息，它通過使用了 RGB 混色模型，經過多次的嘗試最終確定了品牌色的混合比例為 20%，運用規則同普通中性色一致。

2. 大廠色彩體系

阿里體系關于色彩模塊主要介紹了三大部分：a. 色彩模型，b. 系統級色彩體系（基礎色板，中性色板、數據可視化色板，色板生成工具，代碼中使用色板），c. 產品級色彩體系（品牌色應用，功能色，中性色）。

網址： https://ant.design/docs/spec/colors-cn

字節體系關于色彩模塊主要介紹了兩大部分：a. 色彩體系（基礎色板，添加色板，色板導出），b. 色彩對比度，c. 色彩探索（待開發）。

網址： https://arco.design/palette/list

騰訊體系關于色彩模塊主要介紹了兩大部分：a. TDesign 設計體系（主題色、功能色、中性色、帶有品牌色傾向的中性色，擴展色），b. 應用指南（UI 設計指南，數據可視化指南）。

網址： https://tdesign.tencent.com/design/color#header-12

配色案例解析

1. 漸變知識分析

漸變色從屬性上看，可以按照方向，長短，呈現不同的表現形式，在保證屬性不變，改變漸變的長度，漸變越長，色彩過度越平緩，漸變越短，色彩過度越緊湊，如下圖：

漸變色從樣式上看，可以按照線性，徑向，角度、對稱，如下圖：

按照色彩色相數量的不同，可以分為：中性色漸變，單色漸變，多色漸變，如下圖：

按照色彩的明度的和飽和度不同，可以分為高明度、低明度；高飽和度、低飽和度，如下圖：

2. 漸變配色案例

這里案例介紹通過一張海報設計，使用不同的漸變和配色方式進行創作，設計視覺展示如下：

漸變方式：同色漸變

漸變方式：多色漸變+色相環六色分類

3. 實戰頁面案例

如下頁面案例通過色相環選擇不同的基色，通過色調六大分類再結合漸變類型進行配色的效果展示。

漸變方式+彌散漸變（基色/同類色）

漸變方式+彌散漸變（基色/類似色）

漸變方式+彌散漸變（基色/鄰近色）

漸變方式+彌散漸變（基色/中差色）

漸變方式+彌散漸變（基色/對比色）

漸變方式+彌散漸變（基色/互補色）

總結

關于配色技巧的分享總結到此就結束了，感謝大家的閱覽，希望能幫助大家對配色有更全面的認識！UI 設計視覺指南-配色篇就算完結了，咱們下篇文章見！