UX 設計師顏色工具包

簡評：幾個月前曾經推送過一篇 UI 設計中顏色使用法則 的文章，顏色是設計師最強有力的表現形式。而弔詭的是，顏色又讓設計師十分棘手，有無數多種的色彩組合擺在那裡，讓人無所適從。今天這篇文章把一些好用的色彩工具做了個集合，讓設計來得更加得心應手。

目錄：

1. 尋找靈感
2. 創建自己的配色方案
3. 提高方案的可行性

1. 尋找靈感

自然

最好的顏色組合往往來自於自然界。當你想要找尋靈感時，你就環顧一下四周，拍下一張美麗的時刻，然後在這張照片中創建自己的配色方案。

Behance

著名設計社區 Behance 有許多有創意的優秀作品，你只需要按顏色進行篩選，就可以發現非常新鮮有趣而又質量上乘的作品。

Dribbble Colors

Dribbble 是發現用戶界面靈感的最佳選擇之一，當您想對其他設計師使用的特定顏色進行視覺研究時，請轉到 dribbble.com/colors 並選擇所需的顏色。

您還可以指定包含所選顏色的最小百分比（例如 30％ 的藍色）。

Designspiration

當你對顏色組合有個初步的想法，但是又苦於沒有現成的例子讓你看看效果，它就是一個趁手的工具了。Designspiration 可以選擇最多五種顏色，以此為您搜索符合您查詢的圖像。

Tineye Multicolr

Tineye 的數據來自 Flickr，這可能是以顏色組合獲得所需圖像的最快方式。

Colorzilla

ColorZilla 可用於 Google Chrome 和 Mozilla Firefox，其中包括一系列與顏色相關的工具，比如顏色選擇器，CSS 漸變生成器和調色板之類的。

Shutterstock Spectrum

根據顏色搜索圖片還可以採用這個工具，它就能根據特定的色調去搜索照片。你甚至不用註冊用戶，即使這些帶有水印的預覽圖像，也足夠生成你需要的調色板了。

2. 創建配色方案

Material Design Color Tool

你可以用這個工具去創建，分享和應用你的新設計，同時也可以測量顏色組合。

http://Coolors.co

Coolors 可以簡單地鎖定選定的顏色，然後按空格鍵生成調色板。同時允許用戶上傳圖像，並以此為基準製作一個調色板。

使用此工具上傳圖像並從中調出調色板。

Adobe Color CC

Adobe 出品，它有 Web 版本和桌面版，使用色輪創建配色方案：

從現有圖像中創建配色方案：

或者在 Kuler 社區中發現顏色組合：

如果使用桌面版本，則可以將顏色方案直接導出到 Photoshop，Illustrator 和 InDesign 中。

Paletton

Paletton 類似 於Adobe Color CC，但您可以選擇的顏色種類更多。

3. 配色可行性

視力缺陷其實並不是少數，比我們想像的要多很多。全球 2.85 億人視力受損，因此為這部分人群提供有效的配色方案應該被考慮到。

WebAIM Color Contrast Checker

有些顏色彼此之間相近，也有些顏色會相互衝突。條件允許的話最好進行 AA 測試，在使用文本的時候，應該檢查一下顏色的對比度之類的。可以通過 WebAIM Color Contrast Checker 工具來測試顏色組合。

Coolors

色盲測試：

將模式狀態改為「測試模式」

然後你就會看到色弱用戶眼中看到的色彩

NoCoffee Vision Simulator for Chrome

NoCoffee Vision Simulator 可用於模擬 Chrome 瀏覽器中可查看的任何頁面上的色差缺陷和低視力條件。例如，設置「deuteranopia」後您可以在灰度模式下查看網頁。

小結

工欲善其事必先利其器，上述工具可以讓設計師更輕鬆地找到合適的顏色組合。但請記住，不要過於沉迷於這些工具，創造優秀配色方案的最佳方式是勤加練習。

原文鏈接：Essential Color Tools for UX Designers

推薦閱讀：Reddit | 最糟糕的音量控制設計大賽...

歡迎關註：知乎專欄「極光日報」，每天為 Makers 導讀三篇優質英文文章。

推薦閱讀：