前端都應(yīng)該知道的配色策略

在色彩設(shè)計應(yīng)用中，我們對顏色不同程度的理解，影響到設(shè)計頁面的表現(xiàn)。可是這跟前端有什么聯(lián)系么？不是設(shè)計師的事情么？

試想一下如果某些情況下我們需要脫離脫離設(shè)計師，比如我們需要做些賞心悅目的示例分享，即使將交互、邏輯做好了，如果沒有優(yōu)雅的配色和設(shè)計，你的作品也會顯得蒼白無力，本文將帶你了解基礎(chǔ)的顏色理論和一些常見的配色策略。

三原色：指色彩中不能再分解的三種基本顏色，我們通常說的三原色，即紅、黃、藍(lán)。三原色可以混合出所有的顏色，同時相加為黑色，黑白灰屬于無色系。色彩中顏料調(diào)配三原色混合色為黑色。

紅+黃=橙、黃+藍(lán)=綠、藍(lán)+紅=紫

色環(huán)（Color Wheel）：又稱色輪、色圈，是將可見光區(qū)域的顏色以圓環(huán)來表示，為色彩學(xué)的一個工具，一個基本色環(huán)通常包括12種不同的顏色。

在理解的色環(huán)之后，在前人的總結(jié)和指引下，就衍生出了一些配色策略。注意每一種配色策略都可以因飽和度、明度的變化產(chǎn)生數(shù)不清的配色方案。比如下面的相似色兩種配色方案，基本顏色就是四種（主色、輔色、點睛、背景）。

可以發(fā)現(xiàn)它們對應(yīng)顏色的色相變化值都不超過30，在提升或降低飽和度之后形成的顏色變化從而形成不同配色方案。

配色策略提供的一種指引，具體的顏色值確定靠的更多是靈感和視覺審美。

單色（Monochromatic）

相似色（Analogous）

互補(bǔ)色（Complementary）

如：紅綠對比、藍(lán)橙、黃紫對比

分割互補(bǔ)色（Split complementary）

三角對立（Triadic ）

矩形（Tetradic）

主色調(diào) 頁面色彩的主要色調(diào)、總趨勢，其他配色不能超過該主要色調(diào)的視覺面積。（背景白色不一定根據(jù)視覺面積決定，可以根據(jù)頁面的感覺需要。）

輔色調(diào) 僅次與主色調(diào)的視覺面積的輔助色，是烘托主色調(diào)、支持主色調(diào)、起到融合主色調(diào)效果的輔助色調(diào)。

點睛色 在小范圍內(nèi)點上強(qiáng)烈的顏色來突出主題效果，使頁面更加鮮明生動。

背景色 襯托環(huán)抱整體的色調(diào)，協(xié)調(diào)、支配整體的作用。

Adobe出品的一個在線配色工具，上邊列出了海量的配色方案供我們使用，如果你不滿足，也可以試下上傳圖片建立自己的配色方案，只需上傳一張圖片，網(wǎng)站便可自動提取圖片顏色生成配色方案。

網(wǎng)頁版地址：https://color.adobe.com/zh/create/color-wheel/除了創(chuàng)建自己的配色方案，可以參考他人的配色方案并且提供下載編輯的功能，十分好用。

其他配色工具：

• Spectrum：Mac + iOS 配色工具?
  

• Paletton：The Color Scheme Designer

• Color Scheme Designer：高級在線配色工具

推薦閱讀