專為設計師打造的 12 款基於 WEB 的色彩工具
選擇一套優秀的配色方案不應該是一個悲催的任務。選擇適合的工具，再有一雙懂美的雙眼，就能讓你的設計工作事半功倍。
雖然，我不會直接給你一份合適的配色方案，但今天分享的一些色彩工具，或許對提升你的工作效率和審美有所幫助。
由於這些工具便捷、易用，並且完全免費，你可以將它們收藏起來，以便經常使用。它們使用範圍廣泛，WEB 端、移動端、或者列印都可以滿足你的選色需求。
1.ColorHexa
最近我在瀏覽網頁的時候，偶然發現了 ColorHexa ，它是迄今為止我見過的最酷的選色工具之一。
在技術上，它跟顏色生成器或配色工具有所不同，它擁有一個全面的色彩資訊庫，讓你對顏色的選取（相近顏色、配色方案，相關的漸變和陰影等），以及顏色程式碼（十六進位制，RGB，CMYK，CIE-LAB，HSL等）都能直觀的瞭解。
如此完整的顏色資訊列表，幫助設計師們研究顏色能起到莫大的幫助，相信，你會對它愛不釋手。
網址： https://www.colorhexa.com/
2.Colors.css
如果你對色彩心理學有所研究，就會了解色彩疊加的學問以及它們是如何影響人們的心理和情緒。
每個瀏覽器都有預設的顏色，通常它們卻略顯生硬。但 Colors.css 改善了這個問題。它是一個可調預設顏色的免費 CSS 庫，這樣你便有了更多選擇顏色的機會，而不是侷限在“紅”與“藍”這兩類固定的顏色上。
你甚至還能發現一個功能完善的 輔助頁面 ，它提供了眾多的配色方案，能夠幫助你提高網站的易讀性。
網址： http://clrs.cc/
3.ColorPick Eyedropper Extension
你經常瀏覽一些配色網站嗎？我總是在發現酷站後，卻為了取色而苦惱。
如果你使用 Chrome DevTools 取色，那麼還需要在程式碼中提取十六進位制的顏色。但使用專為 Google Chrome 設計的 ColorPick Eyedropper 擴充套件程式，將極大的提高你的取色效率。
你只需要單擊擴充套件程式面板的切換視窗，然後滑鼠懸停在你想選擇的任何顏色上，就能得到一個完整的十六進位制程式碼以及“複製”連結，點選複製連結就可以完成取色。
是不是很酷，並且它還是免費的，值得你擁有。
網址： https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
4.Coolors
Coolors 是一個線上的配色方案生成網站，你可以在上面找到數十種色彩生成器，並且它還支援 Adobe 自帶的元件。
它真正的價值在於，能夠超快速的生成配色。你還可以混合各種鎖定的顏色進行更改、調整，並且可以限定條件隨機生成可選方案。你可以將其作為 Chrome 擴充套件 ，也可以在手機上安裝它的 iOS 應用。
如此便捷的應用，你只需要 15 分鐘左右就可以瞭解其原理，並完全掌握它。
5.Palettte App
Palettte 是一款色彩編輯和重對映工具，它能夠幫助你構建從一種顏色到另一種顏色的色彩方案，也支援微調單個顏色，並且你還可以匯入、分析和編輯現有的色彩方案。
如果你對這個工具很感興趣，瞭解下原作者在設計這款工具 背後的故事 ，將會讓你受益匪淺。
6.Material UI Colors
用谷歌搜尋，你能輕鬆的找到大量的 Material Design 相關工具，它們為數眾多，大多工具也都能生成符合 Android 應用中常見的顏色樣式。
使用 Material UI Colors WebAPP，你將會找到符合 Google Material 指南的完美配色方案。通過螢幕左上角的滑塊，你可以輕鬆的調整各種顏色的色調。此外，你也可以隨機選擇顏色來匹配原網站的顏色，並且根據自身需求，在 HEX 和 RGB 間隨意切換相應的格式。
對於 Material Design 愛好者來說，這款應用一定能帶給你不少的驚喜。
網址： https://materialuicolors.co/
7.Color Supply
Color Supply 是個匠心獨具的網站，但它也顯得有些特殊。它提供了一系列有趣的色彩工具，滿足你對配色效果的不同需求。用滑鼠拖動色輪的取色杆，你就可以直觀的看到頁面上的選色效果。
網站還根據色彩設計理論，提供了 5 種實用的配色方法。當你選好顏色後，在網頁下方可以看到色值。此外，你還能夠線上預覽平鋪的圖案和不同顏色的漸變效果，是不是很方便？
網址： http://colorsupplyyy.com/app/
8.Color Safe
W3C 組織致力於推動 WEB 技術的發展，WCAG 便是成果之一。顏色則是作為構建可訪問性網站最簡單的方式之一。
Color Safe 是一款免費的 WebAPP，它依據 WCAG 文字和背景對比度指南，幫助你檢測顏色的選擇是否符合標準。通過選擇前景色、背景色以及字型的大小，可以直觀的瞭解 WCAG 評級，同時還能得到相關選色建議。對於關注 Web 可訪問性的朋友來說，它是一款非常棒的工具。
9.Color Hunt
Color Hunt 這個免費專案已歷經了數年，併成為設計師的靈感源泉。使用者通過提交各種配色方案，並以票選的形式列出最漂亮的方案，供大家參考與瞭解。你可以按最新或最受歡迎的方式進行排序，也可以投票支援自己收藏的方案。
由於它是個簡單 Web 應用，所以功能相對有限，但對於發掘配色靈感，還是不可或缺的。
10.Open Color
如果你正在尋找一些能夠提升網站可訪問性的工具？那麼，推薦你瞭解下 Open Color 這個開源庫。
它是一個圍繞網站可訪問性和瀏覽器支援的開源色彩庫。無論你的網站 UI 是何樣式，你都能獲取到經過優化，且易於匹配的顏色、字型、背景和邊框等。
如果你感興趣，不妨看看其 GitHub 倉庫 ，並可以下載原始檔。
網址： https://yeun.github.io/open-color/
11.HTML Color Codes
HTML Color Codes 是一款全方位的線上選色器，你可以線上選色並匯出 HTML / CSS 程式碼。它還具備顏色檢索功能，你可以根據網站的建議，檢索任何你想要的顏色。此外，網站還擁有顏色圖表工具，並提供 Adobe Swatch 檔案格式下載。
對於經常使用選色器和調色盤的設計師來說，這個網站相當的方便。
網址： http://htmlcolorcodes.com/
12.Adobe Color CC
Adobe Color CC 是一款基於 Web 的取色器，簡直酷到沒朋友。
它以前叫作 Adobe Kuler，雖然歷經了多次迭代，UI 已經改變了不少，但其核心功能（調色、取色）並未改變，仍然是一款讓設計師們愛不釋手的線上工具。
它在同一個方案中支援多達 5 種不同的顏色，你甚至可以上傳影象來自動提取動態的配色方案。如果你是 Adobe 使用者，那麼將其收藏起來是個不錯的選擇。
網址： https://color.adobe.com/create/color-wheel/
感謝你的閱讀。若你有所收穫，歡迎點贊與分享。
注：
- 本文版權歸原作者所有，僅用於學習與交流；
- 如需轉載譯文，煩請按下方註明出處資訊，謝謝！
英文原文： Top 12 Web-Based Color Tools for Web Designers
作者：Jake Rocheleau
譯者：IT程式獅
譯文地址： https://zhuanlan.zhihu.com/p/56525701
同時也歡迎關注我的微信 【IT程式獅】 ，不定期分享 IT 學習文章與資源。