色彩是品牌和產(chǎn)品設(shè)計(jì)語言系統(tǒng)中最重要的元素之一，色彩能引起我們共同的審美愉悅的。所以建立一個(gè)有序的調(diào)色板是非常重要的。

我們?cè)谠O(shè)計(jì)系統(tǒng)時(shí)會(huì)通過系統(tǒng)化思考去定義規(guī)范和原則。色彩也是如此，我們?cè)趪L試配色時(shí)也應(yīng)該合理的制定一套規(guī)范。

在這里，我們將定義色彩的規(guī)則并不斷延展增大它的適用范圍，在界面配色時(shí)能真正應(yīng)用到。當(dāng)你學(xué)會(huì)了定義色彩的方法還可以自由的組合它們了。

下面我列舉了一下色彩的屬性，我們會(huì)利用這些色彩屬性來定義更多的顏色。

色相（色調(diào)）即色彩相貌（比如藍(lán)色、綠色、紅色等）

色度是不包括亮度在內(nèi)的顏色的性質(zhì)，它反映的是顏色的色調(diào)和飽和度。

飽和度（純度）是指色彩的鮮艷程度，飽和度取決于該色中含色成分和消色成分（灰色）的比例。含色成分越大，飽和度越大；消色成分越大，飽和度越小。

亮度或明度是指顏色的明暗程度。

不透明度是指顏色的不透明度值的百分比。

色調(diào)是通過向顏色中添加灰色，讓它比原始顏色更平淡。

暗色調(diào)是通過向顏色中添加黑色，讓它比原始顏色更暗。

淺色調(diào)是通過向顏色中添加白色，讓它比原始顏色更亮。

△顏色屬性列舉，我們使用顏色屬性組合來展示顏色變化

△我建立10等分網(wǎng)格，幫助大家更好的理解顏色屬性

框架網(wǎng)格

上圖顯示了特定顏色的明度/不透明度/色調(diào)/色度和色相之間的關(guān)系。上圖使用了10等分網(wǎng)格。顏色的不透明度在X軸上按10％循序變化，并且明度在Y軸上按10％循序變化。

我們用了上面的簡(jiǎn)化版，使用25%來搭建我們的基礎(chǔ)框架網(wǎng)格。這個(gè)網(wǎng)格將作為我們的標(biāo)準(zhǔn)，會(huì)生成更多的顏色。

我用Sketch來創(chuàng)建框架網(wǎng)格，當(dāng)然也可以用Photoshop / Illustrator / Figma 等其他設(shè)計(jì)工具中創(chuàng)建相同的框架網(wǎng)格。我們將用比較流行的HSB Color配色系統(tǒng)。

按照以下幾個(gè)步驟操作：

步驟1. 選擇一個(gè)色相，用它創(chuàng)建一個(gè)50 x 50像素的正方形。比如我選擇了藍(lán)色色相（H 212，S 67，B 89）。

步驟2. 創(chuàng)建一個(gè)10 x 10像素的白色方塊（H 0，S 0，B 100）。

步驟3. 復(fù)制這些白色塊（5行，5列），用它們覆蓋步驟1的整個(gè)方塊。

步驟4. 從左到右將每列白色方塊的不透明度降低25％。

步驟5. 將每排白色方塊的亮度從上到下降低25％。

現(xiàn)在你有了基礎(chǔ)的框架網(wǎng)格。我們將用它學(xué)習(xí)一些生成新顏色的方法。

為了更好地展示顏色變化，我用了3個(gè)色相作為案例。當(dāng)然你可以根據(jù)喜好選擇自己的顏色

01. 深淺色調(diào)法

由于這個(gè)很簡(jiǎn)單所用經(jīng)常使用?；A(chǔ)框架網(wǎng)格就是用此方法生成的。色相的白色方塊不透明度和亮度分別從100％到0％（從左到右）和0％到100％（從下到上）。

右側(cè)的顏色方案是用我們的3個(gè)色相創(chuàng)建的，并從左側(cè)的中間列（箭頭所示）中選擇不透明度和亮度值。

02. 疊加混合法

在此方法中，我們用了相同的基礎(chǔ)框架網(wǎng)格，并將白色方塊的混合模式更改為“疊加”。整個(gè)網(wǎng)格上形成了美麗的色相變化。

03. 柔光混合法

與＃2 疊加混合方法類似，我們將白色方塊的混合模式更改為“柔光”。然后我們選擇所有的白色方塊，并將它們復(fù)制兩次。這樣會(huì)產(chǎn)生更強(qiáng)的飽和度差異，從而產(chǎn)生更好的色彩鮮艷度。

04. 冷色疊加混合法

此方法使用我們?cè)冢? 疊加混合方法中創(chuàng)建的網(wǎng)格框架。然后我們?nèi)我膺x擇一個(gè)冷色（例如藍(lán)色）。繪制藍(lán)色的矩形并將其放置在整個(gè)網(wǎng)格中。將其混合模式更改為“疊加”。生成的顏色網(wǎng)格具有鮮明的炫酷效果。

05. 暖色疊加混合法

非常類似于＃4 冷色疊加混合方法，在這里我們?nèi)我膺x擇一個(gè)暖色（例如橙色）。繪制橙色的矩形并將其放置在整個(gè)網(wǎng)格中。將其混合模式更改為“疊加”。生成的顏色網(wǎng)格具有戲劇性的溫暖效果。

06. 亮度調(diào)整法

該方法與上述方法略有不同卻更容易。我們創(chuàng)建一個(gè)色相（如上圖左側(cè)所示），并通過分別增加和減少其亮度值來創(chuàng)建一系列淺色和深色。

右側(cè)的顏色主題是使用我們的3個(gè)色相創(chuàng)建的，然后簡(jiǎn)單地增加和減少亮度值以分別創(chuàng)建深淺明暗變化。

07. 亮度+飽和度調(diào)整法

該方法使用＃6亮度調(diào)整方法的相同網(wǎng)格。在這里，我們調(diào)整飽和度值和亮度值。我們通過增加和減少其亮度值來創(chuàng)建一系列淺色和深色，同時(shí)分別降低和增加飽和度值。

規(guī)則1：較淺的顏色變化=較低的飽和度+較高的亮度。

規(guī)則2：較暗的顏色變化=較高的飽和度+較低的亮度。

調(diào)色案例

這是一個(gè)混合調(diào)色的案例，它結(jié)合方法＃1，＃3，＃4和＃5來生成漂亮的顏色調(diào)色板。這是我從Sketch Tricks上看到的一篇文章，可以在Sketch中快速構(gòu)建色彩系統(tǒng)。

結(jié)論

當(dāng)然還有更多混合方法可以生成顏色主題。當(dāng)前創(chuàng)建基礎(chǔ)框架網(wǎng)格是最重要的部分。網(wǎng)格作為你想象力的樂園，可以生成顏色系統(tǒng)。你可以組合多種方法，從一個(gè)色相創(chuàng)建一組全新的顏色。（可以嘗試使用漸變而不是色相）

作者：Rahul Chakraborty

翻譯：水手哥

原文：https://medium.com/sketch-app-sources/building-a-color-palette-framework-96dbda541c2e