五、提取色卡，主輔色定型

走到這一步，可以說是快要大功告成了，接下來我們要做的就是將剛才創建的兩個色彩卡組進行提取，第一次的色彩卡組提取兩個色彩卡片，第二次的色彩卡組也提取兩個色彩卡片。

這里需要注意一點的是，兩個卡組選取的色彩盡量相差較大一點，意思就是說，例如第一組選取的色彩明度較低，那就將第二組選擇的色卡選擇的明度高一些，這樣形成的反差，容易在界面中進行對比與強調。

六、創建文本色、背景色、強調色

接下來，我們在做最后一步，那就是選出最基礎的背景、文字、點綴色，三個基礎色卡，一般情況，文字色和背景色我多數采用黑和白的配比;當然，黑色也不是純粹的黑色，而是通過主色的加深得到的，當然你也可以在第一次的主色色組內最小數值的基礎上再加深一點點，得到新的文字色。

而點綴色，一般就是在非常小面積使用的色彩，一般別說一組文字內的一個關鍵詞使用了點綴色進行突出;總之，點綴色的面積是非常小的。

七、代入原型設計

最終，我們將以上七個色卡排成一列查看一下是否和諧，一般情況下嚴格按照上述計算得出的顏色是不會出現差錯的哈。

然后在設計界面時，代入這套顏色就可以了，當然，你也可以放入插畫使用，如果感覺當前色彩范圍有些狹窄，你還可以在第二步色彩延展的后面，繼續增加基礎色色相10位數，然后得出新的色卡，然后繼續“+”、“-”10就可以了。

八、最終呈現

最后，我拿上面熱乎乎的色彩組合代入界面并操作，給大家實際展現出來。

九、總結

這次的配色技巧就完成了，其實大家應該可以發現一個潛在的規律，不管在任何彩色范圍內，只要我們能把控好色彩的純度和明度，不管是任何色相，其實都是可以保正在一個區間內的;而往往大家沒有拿出好的配色，多數情況就是配有掌握好純度和明度的關系。

最后，希望大家都能學會這個方法并使用它，其實這套方法還可以延展出其他配色技法，帶我下次再給大家實際講解與操作。

作者：西瓜，公眾號：西瓜的設計

本文由 @西瓜的設計 原創發布于人人都是產品經理;未經許可，禁止轉載

題圖來自 Unsplash，基于CC0協議