擇一套優(yōu)秀的配色方案不應該是一個悲催的任務。選擇適合的工具，再有一雙懂美的雙眼，就能讓你的設計工作事半功倍。

雖然，我不會直接給你一份合適的配色方案，但今天分享的一些色彩工具，或許對提升你的工作效率和審美有所幫助。

由于這些工具便捷、易用，并且完全免費，你可以將它們收藏起來，以便經(jīng)常使用。它們使用范圍廣泛，WEB 端、移動端、或者打印都可以滿足你的選色需求。

1.ColorHexa

最近我在瀏覽網(wǎng)頁的時候，偶然發(fā)現(xiàn)了 ColorHexa，它是迄今為止我見過的最酷的選色工具之一。

在技術上，它跟顏色生成器或配色工具有所不同，它擁有一個全面的色彩信息庫，讓你對顏色的選取（相近顏色、配色方案，相關的漸變和陰影等），以及顏色代碼（十六進制，RGB，CMYK，CIE-LAB，HSL等）都能直觀的了解。

如此完整的顏色信息列表，幫助設計師們研究顏色能起到莫大的幫助，相信，你會對它愛不釋手。

網(wǎng)址：https://www.colorhexa.com/

2.Colors.css

如果你對色彩心理學有所研究，就會了解色彩疊加的學問以及它們是如何影響人們的心理和情緒。

每個瀏覽器都有默認的顏色，通常它們卻略顯生硬。但 Colors.css 改善了這個問題。它是一個可調(diào)預設顏色的免費 CSS 庫，這樣你便有了更多選擇顏色的機會，而不是局限在“紅”與“藍”這兩類固定的顏色上。

你甚至還能發(fā)現(xiàn)一個功能完善的輔助頁面，它提供了眾多的配色方案，能夠幫助你提高網(wǎng)站的易讀性。

網(wǎng)址：http://clrs.cc/

3.ColorPick Eyedropper Extension

你經(jīng)常瀏覽一些配色網(wǎng)站嗎？我總是在發(fā)現(xiàn)酷站后，卻為了取色而苦惱。

如果你使用 Chrome DevTools 取色，那么還需要在代碼中提取十六進制的顏色。但使用專為 Google Chrome 設計的 ColorPick Eyedropper 擴展程序，將極大的提高你的取色效率。

你只需要單擊擴展程序面板的切換窗口，然后鼠標懸停在你想選擇的任何顏色上，就能得到一個完整的十六進制代碼以及“復制”鏈接，點擊復制鏈接就可以完成取色。

是不是很酷，并且它還是免費的，值得你擁有。

網(wǎng)址：

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

4.Coolors

Coolors 是一個在線的配色方案生成網(wǎng)站，你可以在上面找到數(shù)十種色彩生成器，并且它還支持 Adobe 自帶的組件。

它真正的價值在于，能夠超快速的生成配色。你還可以混合各種鎖定的顏色進行更改、調(diào)整，并且可以限定條件隨機生成可選方案。你可以將其作為 Chrome 擴展，也可以在手機上安裝它的 iOS 應用。

如此便捷的應用，你只需要 15 分鐘左右就可以了解其原理，并完全掌握它。

網(wǎng)址：https://coolors.co/

5.Palettte App

Palettte 是一款色彩編輯和重映射工具，它能夠幫助你構建從一種顏色到另一種顏色的色彩方案，也支持微調(diào)單個顏色，并且你還可以導入、分析和編輯現(xiàn)有的色彩方案。

如果你對這個工具很感興趣，了解下原作者在設計這款工具背后的故事，將會讓你受益匪淺。

網(wǎng)址：https://palettte.app/

6.Material UI Colors

用谷歌搜索，你能輕松的找到大量的 Material Design 相關工具，它們?yōu)閿?shù)眾多，大多工具也都能生成符合 Android 應用中常見的顏色樣式。

使用 Material UI Colors WebAPP，你將會找到符合 Google Material 指南的完美配色方案。通過屏幕左上角的滑塊，你可以輕松的調(diào)整各種顏色的色調(diào)。此外，你也可以隨機選擇顏色來匹配原網(wǎng)站的顏色，并且根據(jù)自身需求，在 HEX 和 RGB 間隨意切換相應的格式。

對于 Material Design 愛好者來說，這款應用一定能帶給你不少的驚喜。

網(wǎng)址：https://materialuicolors.co/

7.Color Supply

Color Supply 是個匠心獨具的網(wǎng)站，但它也顯得有些特殊。它提供了一系列有趣的色彩工具，滿足你對配色效果的不同需求。用鼠標拖動色輪的取色桿，你就可以直觀的看到頁面上的選色效果。

網(wǎng)站還根據(jù)色彩設計理論，提供了 5 種實用的配色方法。當你選好顏色后，在網(wǎng)頁下方可以看到色值。此外，你還能夠在線預覽平鋪的圖案和不同顏色的漸變效果，是不是很方便？

網(wǎng)址：

http://colorsupplyyy.com/app/

8.Color Safe

W3C 組織致力于推動 WEB 技術的發(fā)展，WCAG 便是成果之一。顏色則是作為構建可訪問性網(wǎng)站最簡單的方式之一。

Color Safe 是一款免費的 WebAPP，它依據(jù) WCAG 文本和背景對比度指南，幫助你檢測顏色的選擇是否符合標準。通過選擇前景色、背景色以及字體的大小，可以直觀的了解 WCAG 評級，同時還能得到相關選色建議。對于關注 Web 可訪問性的朋友來說，它是一款非常棒的工具。

網(wǎng)址：http://colorsafe.co/

9.Color Hunt

Color Hunt 這個免費項目已歷經(jīng)了數(shù)年，并成為設計師的靈感源泉。用戶通過提交各種配色方案，并以票選的形式列出最漂亮的方案，供大家參考與了解。你可以按最新或最受歡迎的方式進行排序，也可以投票支持自己收藏的方案。

由于它是個簡單 Web 應用，所以功能相對有限，但對于發(fā)掘配色靈感，還是不可或缺的。

網(wǎng)址：http://www.colorhunt.co/

10.Open Color

如果你正在尋找一些能夠提升網(wǎng)站可訪問性的工具？那么，推薦你了解下 Open Color 這個開源庫。

它是一個圍繞網(wǎng)站可訪問性和瀏覽器支持的開源色彩庫。無論你的網(wǎng)站 UI 是何樣式，你都能獲取到經(jīng)過優(yōu)化，且易于匹配的顏色、字體、背景和邊框等。

如果你感興趣，不妨看看其 GitHub 倉庫，并可以下載源文件。

網(wǎng)址：

https://yeun.github.io/open-color/

11.HTML Color Codes

HTML Color Codes 是一款全方位的在線選色器，你可以在線選色并導出 HTML / CSS 代碼。它還具備顏色檢索功能，你可以根據(jù)網(wǎng)站的建議，檢索任何你想要的顏色。此外，網(wǎng)站還擁有顏色圖表工具，并提供 Adobe Swatch 文件格式下載。

對于經(jīng)常使用選色器和調(diào)色板的設計師來說，這個網(wǎng)站相當?shù)姆奖恪?/p>

網(wǎng)址：http://htmlcolorcodes.com/

12.Adobe Color CC

Adobe Color CC 是一款基于 Web 的取色器，簡直酷到?jīng)]朋友。

它以前叫作 Adobe Kuler，雖然歷經(jīng)了多次迭代，UI 已經(jīng)改變了不少，但其核心功能（調(diào)色、取色）并未改變，仍然是一款讓設計師們愛不釋手的在線工具。

它在同一個方案中支持多達 5 種不同的顏色，你甚至可以上傳圖像來自動提取動態(tài)的配色方案。如果你是 Adobe 用戶，那么將其收藏起來是個不錯的選擇。

網(wǎng)址：

https://color.adobe.com/create/color-wheel/

感謝你的閱讀。若你有所收獲，歡迎點贊與分享。

注：

1. 本文版權歸原作者所有，僅用于學習與交流；
2. 如需轉載譯文，煩請按下方注明出處信息，謝謝！

英文原文：Top 12 Web-Based Color Tools for Web Designers

作者：Jake Rocheleau

譯者：IT程序獅

譯文地址：

https://zhuanlan.zhihu.com/p/56525701

更多文章：

1. 推薦！設計師與程序員不能錯過的 10 個酷站
2. 精選推薦！11 款專為設計師打造的熱門工具
3. 10 個優(yōu)質(zhì)的 CSS 與 JS LOGO 動畫示例