這些實用的色彩工具，非設計師也能快速上手

04-12

對於普通用戶來說，獲取的顏色通常用在圖文編輯、服裝搭配和家居選擇等方面，Coolorus 這樣的 Photoshop 插件顯然就不適用了。作為一名半吊子設計師，我嘗試過很多色彩工具，有單一的取色和配色工具，也有一手包辦的全能應用，在這裡我想推薦些簡單實用的。

取色工具

趕 PPT 時直接吸取一些精美網站的配色快速又保險，生活中遇到美好的色彩也總想保存下來，好用的取色工具可以輕鬆應對這些場合。

1. Digital Color Meter （macOS自帶）

在 macOS 應用程序的 Utilities 文件夾裡面，有好幾個實用的自帶應用，Digital Color Meter 算是我使用頻率最高的一款。

使用 Digital Color Meter 取色需要用快捷鍵複製顏色再粘貼，除了可以複製顏色的 hex 數值，還可以把顏色複製成色塊圖片。

複製顏色數值快捷鍵：??C
複製色塊圖片快捷鍵：??C

2. Color Note （macOS）

Color Note 最方便之處是它一直位於 Menu Bar, 隨手就可以用。取色之餘還可以保存色塊，用起來很順手。

3. ColorPix （Windows）

ColorPix 無需安裝，滑鼠 hover 到任意位置，鍵盤上隨便按個鍵就取色成功，各種格式的顏色數值都有，點擊可複製。我最喜歡的是它的放大鏡功能，最大可放大至2800%，基本沒有取不到的顏色。不過我在 win10 上用 ColorPix 取色有位置偏移的 Bug。

4. ColorPick Eyedropper （Chrome）

在網頁上取色，能夠放大至像素級別是基本要求，ColorPick Eyedropper 這款 Chrome 插件在取色時可以實現這一點。Chrome 商店裡另一款叫做 ColorZilla 的插件功能更加強大，但是取色時無法放大元素。

5. Swatches （iOS）

在電腦上取色通常是隨取隨用；而在真實環境中，我更願意拍照把顏色保存下來供後來參考。Swatches 這款免費應用可以通過鏡頭實時取色，還能手動調節 ISO 和白平衡來減少色差。

更方便的是它的顏色整理功能，它會自動按照日期對所取的顏色進行分類，同時可以手動把不同的色塊添加進一個調色盤內進行整理。

6. Pixolor (Android）

Pixolor 通過懸浮的取色窗來實現系統全局取色，圓形的取色窗可以把目標元素放大至像素級別，和之前提到的 Chrome 插件 ColorPick Eyedropper 非常類似，同時 Pixolor 還內置一個 HSB 模式的色環。

如果你僅僅是想在色板上挑選自己喜歡的顏色，或者想查看某色值對應的顏色，直接 Google 搜索「color picker」或者任意 hex/rgb 色值，就能打開 Google 提供的快捷工具。

配色工具

配色是個感性又理性的課題，在它背後有一籮筐理論，但是很多人在不了解這些理論的情況下也能單憑感知力區別配色的美與丑。有些配色工具直接以搭配好的色板提供配色靈感；有些配色工具則是將理論可視化，不管是新手還是專業人士都能用到。

1. 無需理論基礎也能練習配色：Palettable

Palettable 在眾多色板生成網站中可以說是獨樹一幟，它通過讓用戶做選擇題來生成色板。進入網站主頁會有一個隨機顏色，下方有「Dislike」和「like」兩個按鈕，點「Dislike」會重新生成一個隨機顏色，點「like」會生成下一個顏色。選好5個顏色後，可以把生成的色板導出鏈接或者圖片。

在這個選擇的過程中，用戶每選一個新的顏色都會和之前的顏色做對比，下意識會感知已選的顏色搭不搭，搭的話就繼續選下一個，不搭就重新選。這個感知「搭不搭」的過程其實就是練習配色的過程。

2. 順滑的配色體驗：Colourcode

Colourcode 可以自由配色，也能在色彩調和規則的限制下配色。當然大多數配色工具都這樣，Colourcode 的特色在於它的操控體驗。在 Colourcode 裡面選定一個顏色可以通過滑動滑鼠完成，不需要拖拉任何控制桿。在觸控板上 Colourcode 的使用手勢如下：

左右滑動改變色相
上下滑動改變明度
雙指上下滑動改變飽和度
單擊鎖定色彩

很多人對互補色、相似色、對比色等等這些名詞不會陌生，但是實際應用起來又是另外一回事，畢竟不是人人大腦里都裝了一個色環。諸如 Colourcode 這樣的配色工具的意義在於讓色彩理論可視化了，選定一個顏色即刻就能看到它的互補色、相似色長啥樣。

3. 最實用的選擇：Adobe Color CC

Adobe Color CC 可以自建色板，也能瀏覽用戶創建的色板，鑒於 Adobe 在全球如此龐大的用戶體量，這上面的配色參考可比一般網站豐富多了。

更值得一提的是 Color CC 的創建色板功能，它雖然操控沒有 Colourcode 那麼炫酷，但是更加實用和直觀。每選定一種色彩調和規則，就能在色輪上看到每個顏色所處的位置，這對掌握色彩理論非常有幫助。

現在 Color CC 還可以通過上傳圖片（右上角的相機 icon）來生成圖片的五色色板，當然這沒有手機版的 Adobe Capture CC 好用。作為設計師，Capture CC 一直是我的必備 app, 不過在這裡我就不推薦給所有人了，因為它要登錄 Adobe 賬號才能用。

4. 簡易混色工具：Colorblendy （Chrome）

配色的時候讓色塊之間疊加會取得意想不到的效果，Colorblendy 可以讓兩個顏色簡單地疊加、加深和減淡，同時得到重疊部分的色值，省去了打開 Photoshop 的麻煩了。

5. 從這些網站快速獲取配色靈感

Color Hunt 上的色板都是由用戶自己創建，點贊高的色板自然會排在網頁前面。這上面展示的配色方案還是挺好看的，畢竟它的用戶很多都是專業設計師。
Color Lisa 陳列的色板都是提取自畢加索、莫奈等世界級藝術家的畫作，沒有配色基礎的話不妨站在巨人的肩膀上試試。
Brand Colors 收集了大量世界知名品牌的 VI 配色，創業者在為自己的品牌定色的時候，也可以去看看行業巨頭們都用的什麼顏色。
WebGradients 陳列了180個優美的線性漸變方案，可以直接複製 CSS 代碼，也能打包成 Sketch 和 Psd 文件。
uiGradients 也是展示漸變方案的網站，它的特色是可以按照特定顏色來塞選漸變。

全能的移動色彩工具

上面提到的工具大多側重於取色或者配色某項單一的功能，如果想要一站式地解決大部分需求，又不想安裝特別專業的桌面軟體，下面這兩款手機 app 可能更適合你。

1. PANTONE Studio（iOS）

潘通（PANTONE）雖然是聞名全球的色彩權威機構，但是它家的官方 app 真的讓人一言難盡，特別難用，有時候又特有用。

PANTONE Studio 的主要功能就是取色、配色和查詢 Pantone 色號。取色可以通過相機和圖片兩種方式，拍照時會提取場景內5種主色，然後可以逐一拖動編輯；配色時先選定一個 Pantone 色號添加到新調色板，然後長按其他色號拖動到這個調色板來進行搭配，有簡單的調和規則可以參考，組成的調色板可以生成 ASE 格式的色板，AI 和 PS 都可以用。

其實這些功能都是簡單好用的，只是 PANTONE 把它們組合到這個 app 後，體驗做的不是很好。有時候這個 app 用久了，我都不知道正處在 app 裡面哪個位置。

2. Color Grab（Android）

Color Grab 有很多同類 app 沒有的功能：取色時可以開啟白色參考、可以將吸取的顏色設成壁紙、混色功能、ASE/ACO 等多格式導出、極為詳盡的色彩模式數據、豐富的色彩調和規則… 我甚至有點不敢相信這是個手機應用。缺陷是配色時無法自定義每個色彩，只能通過色彩調和規則生成色板。

最後

這是我把工作上用到過的色彩工具進行篩選後做的一個小總結，拋開專業的設計軟體，以易上手為原則，選出來的工具幾乎都是很輕量化的 Web app 和手機 app。再好用的色彩工具都是為配色技巧鋪路的，希望它們能幫你成為向朋友推薦色彩搭配的人。

你可能還想看看這些：

如何提高個人的各種設計的配色能力？
有哪些平面設計網站值得推薦？
有哪些無版權圖片網站值得推薦？
高清視頻素材網站有那些？？
找一個國外設計網站在線生成公司logo的？
有哪些不錯的網頁設計素材網站？
有哪些分享圖標資源的網站？