講真，這8款在線配色神器不了解一下？幫你快速搞定網頁配色

+ 查看更多

 

配色是網頁設計的重要組成部分，很多網站都是憑借其出色的色彩搭配讓用戶過目不忘的。不過，對于很多設計師來說，這無疑是個非常令人頭疼的難題，尤其是在創建一套可用的色彩組合時。關于色彩的一些基礎知識比如搭配理論等小飛在《在網站設計中巧用色彩心理學，提升流量和點擊率》中已詳細介紹過，今天主要帶來8款免費、好用的配色神器，希望可以幫助大家快速做出符合設計概念的顏色組合。

 

 

 

從嚴格意義上來說，ColorHexa并算不上一個顏色生成器，它更像是一個色彩信息庫。你只需在搜索框中輸入任意顏色值或顏色描述，就可以獲得有關該顏色的所有信息，包括該顏色的RGB、CMYK、CIE-LAB、HSL、代替色、建議組合方案等等。ColorHexa還會自動地將其轉化為對應的十六進制、二進制。這可能是史上最齊全的色彩信息庫了，如果你想要深入了解某種顏色，Colorhexa絕對是不可多得的好助手。

 

 

 

 

Coolors是一個功能強大的在線配色神器。也許你可以找到不少同類型的網站，但Coolors是絕對是其中最獨特、最實用的。一方面，Coolors支持多平臺，不僅是網頁版，還提供Abode附加組件、Chrome擴展組件以及IOS App的下載。另一方面，它可以快速自動生成各種配色方案。在這，你可以點擊"空格鍵"查看不同的配色方案，也可以點擊鎖定色塊查看當前顏色的關聯配色方案，還可以點擊色塊進行Hex（十六進制）、Hue、Saturation、Brightness（色度、飽和度、亮度）的編輯和調整。總之，可進行的操作有很多，設計師在這可以充分發揮自己的想象力和創造力。當然，Coolors也有一些缺點，它最大的問題可能就在于使用者需要花費一定的時間來熟悉了解這個工具。

 

 

Ambiance 也是一個提供在線配色方案的網站。不過它與其他網站稍微有些不同，因為它的配色方案都是直接從ColourLovers引用過來的。這意味著，如果你需要獲得某個顏色的更多信息，你需要查看其在ColorLovers上的原鏈接（點擊顏色名稱即可到達，比如下圖中"Wed"字樣）。不過，小飛仍認為Ambiance非常值得保存到書簽中，這是因為它將這些來自ColourLovers上的顏色以一種易于理解的方式呈現出來了，顏色的RGB、HSL等數值一目了然。頁面操作也很簡單，點擊"刷新鍵"可以查看新的顏色，看見心儀的顏色也可以點擊"下載"圖標進行保存。在這挑選配色方案要比在ColourLovers上簡單得多。

 

 

 

 

Material UI Colors，顧名思義，主要提供與Material Design風格相匹配的配色方案。它的色板每一張都從基本色開始，然后逐漸擴充，呈現出一套完整、可復用的配色體系，可用于網頁設計、安卓設計以及IOS設計。頁面上的操作也很簡單，你只需拖動屏幕上方的"level（色階）"滑塊，選擇不同的顏色格式（Hex/RGB、RGBA），然后選中喜歡的顏色，點擊"copy"就可以進行該顏色的復制粘貼了。

 

 

 

 

Color Supply這個網站也很是獨特。當你打開它的界面時，這會呈現一個有趣的色輪，它主要提供5種類型的顏色組合：互補色（complimentary）、類比色（Analogous）、三色調（Triad）、分散互補色（Split Complimentary）、四色調（Square）。當你選中一種組合類型，點擊想要的顏色，頁面右側就會呈現出當前顏色組合的所有方案，而那些后面帶有綠點的說明這是某個設計師實際應用過的配色方案，點擊可查看設計師的名稱（以及作品）。對了，頁面下方還會將你選中的顏色組合應用到一些簡單圖標中，展現預覽效果。如果你對當前顏色組合滿意的話，可以點擊復制頁面底部不同顏色的十六進制代碼進行使用。當然，Color Supply也沒有那么完美，比如它并沒有那么簡單易學，需要一些時間才能上手。

 

 

 

 

Color Safe是一款可以對配色方案的可見性進行簡單評測的應用。首先，打開Color Safe，在這，你可以設置背景顏色、字體類型、字體大小&字重、WCAG（AA/AAA）。這里補充一句，WCAG是指Web內容無障礙指南，遵循這些原則可以讓網站內容更容易為盲人、色盲患者等了解，AA級和AAA級（最高）是指南內容的不同級別。在設定好背景顏色和字體后，接下來我們就進入了字體顏色選擇頁面了。當你選擇不同的顏色時，頁面左上方會呈現當前字體顏色與背景顏色的對比度供你參考。如果有必要的話，這還會出現相應的建議。如果你很關心配色方案的可見性&可訪問性，這絕對是一個十分實用的工具。

 

 

 

 

 

Color Hunt這個免費項目是幾年前才發起的，不過，它現在已經成為不少設計師的靈感來源之一。它的工作原理十分簡單，設計師在這提交他們的配色方案，然后就會有其他人給這些作品進行投票。頁面布局很是簡潔大方，不同配色方案一目了然，你可以進行"最新發布"、"最受歡迎"、"隨機"等類型進行查找，如果看到自己喜歡的配色方案，可以將鼠標放上去，就可以查看該方案中不同顏色的色碼了。

 

 

 

 

Adobe Color CC，原名Adobe Kuler，在過去幾年內經過了好幾次更迭，不過它仍是一個免費提供色彩主題的在線應用，只不過網頁界面設計更加貼合用戶的使用習慣了。在Adobe Color CC界面，我們可以選擇不同的調色規則（比如單色調、互補色、三色調、自定義等等），然后在交互式色盤拖動色塊建立不同的顏色組合（最多可容納5種顏色）。當然，它也支持顏色代碼的直接輸入。對了，它還有一個絕妙的優點，那就是可以從圖片中提取顏色來生成主題，從圖片中提取顏色時也有Colorful、Bright、Muted、Deep、Dark和Custom這6種模式可供選擇。

 

 

 

關于網站配色工具今天就介紹到這里了。配色工具的存在主要是為了給設計師的工作提供一些便利，提供一些參考意義。在設計過程中，我們還是應該實事求是，如果有需要調整的地方可以進行適當調整，以呈現給用戶更好的視覺效果。快來起飛頁自助建站平臺搭建一個響應式網站吧！