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

本文主要圍繞四個(gè)方面進(jìn)行講解：

色彩的基礎(chǔ)知識(shí)

1. 色彩模式

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

CMYK：印刷四色模式是彩色印刷時(shí)采用的一種套色模式，利用色料的三原色混色原理，加上黑色油墨，共計(jì)四種顏色混合疊加，形成所謂"全彩印刷"。主要應(yīng)用于平面印刷。

RGB：RGB 色彩模式（也翻譯為"紅綠藍(lán)"）是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過(guò)對(duì)紅(R)、綠(G)、藍(lán)(B)三個(gè)顏色通道的變化以及它們相互之間的疊加來(lái)得到各式各樣的顏色。

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

HSL 是一種將 RGB 色彩模型中的點(diǎn)在圓柱坐標(biāo)系中的表示法。這兩種表示法試圖做到比基于笛卡爾坐標(biāo)系的幾何結(jié)構(gòu) RGB 更加直觀。是運(yùn)用最廣的顏色系統(tǒng)之一。

2. 色值

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

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

HSB 模式和 HSL 模式是在 RGB 色彩模式的基礎(chǔ)上衍生出來(lái)的。

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

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

這兩種模式更適合軟件開(kāi)發(fā)應(yīng)用，所以設(shè)計(jì)師一般使用的都是 HSB 模式設(shè)計(jì)視覺(jué)圖，HSL 更適用于技術(shù)開(kāi)發(fā)人員。所以設(shè)計(jì)師需要在同步設(shè)計(jì)頁(yè)面時(shí)知會(huì)技術(shù)人員。以免讓顏色有誤差。

配色工具與標(biāo)準(zhǔn)

1. 色相環(huán)

色相環(huán)是輔助設(shè)計(jì)配色的一大利器，一般我們選擇 24 色相環(huán)作為顏色標(biāo)準(zhǔn)。色相環(huán)的概念是基于 HSB 的色彩模式下就行分析講解；如下圖我們以 H（色相）為 350 度為起點(diǎn)，以 15 度遞增創(chuàng)立 24 色相環(huán)，（保持 S 飽和度：80，B 明度 100 參數(shù)不變）

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

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

「同類色」：指色相性質(zhì)相同，但色度有深淺之分。（是色相環(huán)中 15°夾角內(nèi)的顏色）

「類似色」：也就是相似色。在色環(huán)上 90°內(nèi)相鄰接的色統(tǒng)稱為類似色，例如紅－紅橙－橙、黃－黃綠－綠、青－青紫－紫等均為類似色。類似色由于色相對(duì)比不強(qiáng)。

「鄰近色」：色相環(huán)中相距 60 度，或者相隔三個(gè)位置以內(nèi)的兩色，為鄰近色關(guān)系，屬于對(duì)比效果的色組。色相彼此近似，冷暖性質(zhì)一致，色調(diào)統(tǒng)一和諧、感情特性一致。如：紅色與黃橙色、藍(lán)色與黃綠色等。

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

「對(duì)比色」：是指色相環(huán)上相距 120 度到 180 度之間的兩種顏色。

「互補(bǔ)色」：色相環(huán)中成 180°角的兩種顏色。

按照色彩的映射關(guān)系分為暖色、中性色、冷色，以上圖色相環(huán)飽和度和明度參數(shù)為例，通過(guò) 5°遞增展示。

2. 色立體

除了色相上的變化，顏色還有明度和純度上的變化，對(duì)于顏色的影響也至關(guān)重要。這三個(gè)詞匯的概念如下：色相 Hue：也稱色調(diào)，是指色彩的相貌；純度 Saturation：也稱飽和度，是指色彩的鮮艷程度；明度 Brightness：也稱亮度，是指顏色的明暗程度；色相、純度、明度三者構(gòu)成了色立體的概念，讓色相環(huán)由二維變成了三維的概念。

3. 拾色器

拾色器是設(shè)計(jì)軟件經(jīng)常會(huì)使用的調(diào)色工具，我們建立一個(gè)基于 S（飽和度）與 B（明度）的平面坐標(biāo)系，如下圖：

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

3. 色彩對(duì)比度

我們參照網(wǎng)頁(yè)無(wú)障礙設(shè)計(jì)規(guī)范，可以先了解關(guān)于設(shè)計(jì)色彩對(duì)比度的一些概念：如下：

什么是對(duì)比度 ？

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

為了確保盡可能多的人可以使用您的產(chǎn)品，對(duì)比度需要符合 WCAG 的 AA 級(jí) 與 AAA 級(jí) 標(biāo)準(zhǔn)。

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

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

下方截圖是字節(jié)設(shè)計(jì)體系中的關(guān)于對(duì)比度設(shè)計(jì)的應(yīng)用工具展示，你可以隨機(jī)選擇或者互調(diào)背景和文字色，進(jìn)行對(duì)比度檢測(cè)，實(shí)時(shí)查看結(jié)果。參考網(wǎng)址： https://arco.design/palette/wcag

不合格案例：

合格案例：

配色的設(shè)計(jì)應(yīng)用

1. 色彩分類和選擇

設(shè)計(jì)應(yīng)用中選取是非常重要的，那根據(jù)設(shè)計(jì)應(yīng)用，色彩主要可以分為主色、輔助色、中性色等。

• 主色

主色一般應(yīng)用產(chǎn)品的品牌色，通過(guò)顏色提升用戶對(duì)品牌的認(rèn)識(shí)，傳遞價(jià)值。

關(guān)于主色的選取，我們可以先根據(jù)一組產(chǎn)品截圖進(jìn)行了解，通過(guò)獲取圖中產(chǎn)品的主色再結(jié)合顏色在拾色器上的分布理解。

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

• 輔助色

色相環(huán)中的顏色角度相差越大，顏色的對(duì)比越強(qiáng)，視覺(jué)差異也越大。

所以用于搭配的輔助色應(yīng)滿足以下兩個(gè)條件：

1. 有區(qū)分：盡量避免所選輔助色在視覺(jué)上與品牌色差距不大，導(dǎo)致用戶對(duì)品牌色產(chǎn)品誤解；
2. 不突兀：根據(jù)色彩原理來(lái)說(shuō)，互補(bǔ)色是反差最大的顏色，但可能會(huì)有些突兀。所以我們選擇互補(bǔ)色的鄰近色，對(duì)比色作為輔助色。

輔助色可以在色相環(huán)的規(guī)則標(biāo)準(zhǔn)下根據(jù)實(shí)際特定的功能場(chǎng)景來(lái)選擇應(yīng)用。如下圖通過(guò) HSB 模式，色值（350，80，100）為基色創(chuàng)立色相環(huán)，做輔助色的選取分析（24 色相環(huán)選基色-6 色相環(huán)選擇輔助色-校正輔助色的步驟），僅作參考。

如下左圖支付寶的理財(cái)模塊，頂部背景圖使用品牌基色，金剛區(qū)圖標(biāo)選擇同類色，保持視覺(jué)上的統(tǒng)一。右圖汽車之家底部有兩個(gè) cta 按鈕，但是使用基色藍(lán)突出主要功能"獲取底價(jià)"，旁邊的按鈕使用類似色進(jìn)行弱化。

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

• 中性色

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

頁(yè)面設(shè)計(jì)中可以通過(guò)在中性色增加色相，正常添加藍(lán)色色相，HSB 色彩模式中，在曲線的軌跡中選擇對(duì)應(yīng)的色值，得出不同層級(jí)的高級(jí)灰。

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

2. 大廠色彩體系

阿里體系關(guān)于色彩模塊主要介紹了三大部分：a. 色彩模型，b. 系統(tǒng)級(jí)色彩體系（基礎(chǔ)色板，中性色板、數(shù)據(jù)可視化色板，色板生成工具，代碼中使用色板），c. 產(chǎn)品級(jí)色彩體系（品牌色應(yīng)用，功能色，中性色）。

網(wǎng)址： https://ant.design/docs/spec/colors-cn

字節(jié)體系關(guān)于色彩模塊主要介紹了兩大部分：a. 色彩體系（基礎(chǔ)色板，添加色板，色板導(dǎo)出），b. 色彩對(duì)比度，c. 色彩探索（待開(kāi)發(fā)）。

網(wǎng)址： https://arco.design/palette/list

騰訊體系關(guān)于色彩模塊主要介紹了兩大部分：a. TDesign 設(shè)計(jì)體系（主題色、功能色、中性色、帶有品牌色傾向的中性色，擴(kuò)展色），b. 應(yīng)用指南（UI 設(shè)計(jì)指南，數(shù)據(jù)可視化指南）。

網(wǎng)址： https://tdesign.tencent.com/design/color#header-12

配色案例解析

1. 漸變知識(shí)分析

漸變色從屬性上看，可以按照方向，長(zhǎng)短，呈現(xiàn)不同的表現(xiàn)形式，在保證屬性不變，改變漸變的長(zhǎng)度，漸變?cè)介L(zhǎng)，色彩過(guò)度越平緩，漸變?cè)蕉?，色彩過(guò)度越緊湊，如下圖：

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

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

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

2. 漸變配色案例

這里案例介紹通過(guò)一張海報(bào)設(shè)計(jì)，使用不同的漸變和配色方式進(jìn)行創(chuàng)作，設(shè)計(jì)視覺(jué)展示如下：

漸變方式：同色漸變

漸變方式：多色漸變+色相環(huán)六色分類

3. 實(shí)戰(zhàn)頁(yè)面案例

如下頁(yè)面案例通過(guò)色相環(huán)選擇不同的基色，通過(guò)色調(diào)六大分類再結(jié)合漸變類型進(jìn)行配色的效果展示。

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

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

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

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

漸變方式+彌散漸變（基色/對(duì)比色）

漸變方式+彌散漸變（基色/互補(bǔ)色）

總結(jié)

關(guān)于配色技巧的分享總結(jié)到此就結(jié)束了，感謝大家的閱覽，希望能幫助大家對(duì)配色有更全面的認(rèn)識(shí)！

說(shuō)說(shuō)體驗(yàn)設(shè)計(jì)