最齊全的線上配色工具

配色是設計師的基本功,也是日常設計中最核心的部分,甚至是每個設計師每天都得做的功課。

為網頁選擇一種基礎色並不難,但是想要一套可用的色彩組合,則是一件相對棘手的事情。

所以,很多時候,借助配色工具來尋求配色方案是一個頗為不錯的想法。

配色方法和配色工具有很多,有的工具需要配合特定的方法,而有的工具則只能應對特定的需求。

今天為你整理的這個合集主要是為網頁設計師所準備的在線配色工具。

Adobe Color CC

在線配色工具合集範例圖

你應該知道這款Adobe 出品的配色工具,早期它是以 Adobe Kuler 的名字投入市場的,現在正式更名為 Adobe Color CC,並且納入到創意雲套裝當中了。

ColourLovers

在線配色工具合集範例圖

ColourLovers 是一個配色愛好者社區,它包含大量的圖片和它們相應的配色方案。

許多配色愛好者會從漂亮的圖片當中獲取相應的配色方案,幫助設計師們更好地搭配。

Coolors

在線配色工具合集範例圖

Coolors 是一款直觀而快速的配色工具,你可以以更加簡單的方式創建色彩組合,同樣可以直接從圖片中取色,還可以生成不同的格式

比如SVG、PDF或者SCSS,可用於Android、iOS、PS和AI等不同的平台。

Color Snapper 2

在線配色工具合集範例圖

Color Snapper 2 是一款為OS X Yosemite 所專門創建的配色工具。

它為專業的平面設計師而生,可以在屏幕上挑選,調整,修改,組織,保存和導出各種顏色。

Colordot

在線配色工具合集範例圖

Colordot 這款配色工具有網頁版和iOS APP兩個版本,你可以直接從調色板來創建配色方案,也能通過圖片和拍照來取色,並且輕鬆地分享出去。

Adobe Capture CC

在線配色工具合集範例圖

Adobe Capture CC 和 Adobe Color CC 雖然都是取色工具,但是各自偏重不同。

Capture 是基於你所拍攝的照片來獲取配色方案,然後你可以用這個配色來創建筆刷或者圖案。

這款工具同時兼顧到了桌面端和移動端的需求。

LOL Colors

在線配色工具合集範例圖

想要獲得更多配色方案上的靈感?LOL 將許多配色方案打包提供給你,每個方案都有HEX和RGB等代碼,確保你立刻可以上手使用。

Gradients.io

在線配色工具合集範例圖

Gradients.io 讓用戶可以使用漸變色來覆蓋圖片。
這個網站中整個頁面中塞滿了各式各樣不同的漸變色配色方案,並且搭配了這些配色方案對應的HEX值。

Color Sphere

在線配色工具合集範例圖

Color Sphere 同樣是一款具有針對性的配色方案,它主要是幫你生成同一色調下的配色方案。

每套配色方案的色彩都會生成對應的HEX值。

CheckMyColours

在線配色工具合集範例圖
CheckMyColours 可以幫你檢測和對比網頁中所有的位於前景和背景的DOM元素的色彩,確定他們的對比度是否合理,視力障礙人事能否清晰地分辨出這些元素。

Color Hunter

在線配色工具合集範例圖

Color Hunter 是一個簡單而實用的工具,你只需要上傳你喜歡的圖片,它就能幫你生成一套調色板。

TinEye

在線配色工具合集範例圖

TinEye 允許你從Flickr 那超過2000萬的 Creative Common 圖片中提取色彩。

你只需要選擇一種色彩,滑動選取你想要的顏色,便能在搜索框中加入這個色彩對應的標籤。

Pictaculous

在線配色工具合集範例圖

Pictaculous是MailChimp推出的配色軟體,它只有一個目的:從照片中獲取配色方案。

它的操作也極為直接:點擊「browse」按鈕選取圖片文件,點擊「GET MY PALETTE」按鍵得到色版。

Paletton

在線配色工具合集範例圖

Paletton 是一款和 Adobe Color CC 非常類似的工具,不同之處在於,它不再受限於5種配色,而是能夠調用更多的色彩。

Colorspire

在線配色工具合集範例圖

Colorspire 是一個三步式的配色搭配工具。你挑選出基本色之後,它會生成對應的配色方案,然後你就可以預覽這套配色的應用效果了。

Hexu.al

在線配色工具合集範例圖

Hexu.al 是一項有意思的服務,旨在為用戶的留言添加色彩。

當然它也能為圖片和設計添加色彩。

Color Explorer

在線配色工具合集範例圖

ColorExplorer 可能是目前功能最全面的在線配色工具之一。

在它的幫助下,你可以創建、分析和自定義配色方案。

更重要的是,它是完全免費的。

0to255

在線配色工具合集範例圖

0to255致力於幫你找到同一個色彩對應的深色和淺色,它可以幫你查找特定色彩的同色系的其他色。

ColorRotate

在線配色工具合集範例圖

ColorRotate 是一款為平板而生的色彩編輯APP,它的3D取色系統讓你可以完全掌控配色方案。

SpyColor.com

在線配色工具合集範例圖

SpyColor.com 是一款完全免費的線上配色工具,它可以提供任何色彩的訊息,包括它們在不同配色體系下的代碼和值,比如 RGB、CMYK、HSL、HSV等等。同時,它還提供各種相關的配色方案,無論是對比色還是近似色,或者是三色、四色、五色等多種不同類型的配色。

Designspiration

在線配色工具合集範例圖

在這個網站上,你可以生成最多5種不同色調的配色方案。然後,網站會將資料庫中使用類似配色的圖片都展示給你,供你參考。

Color Blender

在線配色工具合集範例圖
Color Blender 是一款非常易用的配色工具,它能根據你所選取的一種顏色,生成一套6色的配色方案。

Colors on the Web

在線配色工具合集範例圖

Colors on the Web 是基於色彩理論來幫你探索色彩在網頁中的運用。使用其中內置的配色嚮導、色輪和對比度分析器三個工具搭配起來能夠讓你更好的配色。

ColorMunki

在線配色工具合集範例圖

ColorMunki 也是一款幫你創建自己配色方案的工具,你可以借助它找到相似的色彩,並且正確的將他們搭配成配色方案。

Pantone

在線配色工具合集範例圖

這一服務是為蘋果用戶所定製的,你可以借此探索色彩的世界,發現新的色彩,瞭解色彩之間的關係,如何協調地搭配等等。

ColorZilla

在線配色工具合集範例圖

在Colorzilla的幫助下,你可以讓你所瀏覽的頁面更加多彩,這款插件可以快速取色並粘貼到其他程序中。

此外,Colorzilla可以幫你放大正在查看的頁面,測量頁面上任意兩點之間的距離。

Colorzilla內置了調色板,一方面可以方便用戶獲取預設的色彩,也可以保存自己從網頁中抓取的色彩。

DOM Spying功能能幫你監測DOM元素的各種訊息。

Color Hunt

在線配色工具合集範例圖

Color Hunt 是一個為配色愛好者所準備的社交媒體頻道。

你可以在這裡找到精心挑選的配色方案,還可以獲得一些熱門的隨機配色方案運用在自己的設計項目當中。

Material UI Colors

在線配色工具合集範例圖

Material UI Colors 為扁平化風格的設計提供了對比度良好的配色方案。

ColorDrop

在線配色工具合集範例圖

只需要托拽,你就可以借助 Colordrop 輕鬆地調整UI元素的色彩。

只需要安裝一個Chrome插件,就可以幫你搞定這一切。

BrandColors

在線配色工具合集範例圖

BrandColors蒐集了世界上最受歡迎的品牌的官方配色的配色方案,可以說是相當有價值的配色參考。


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化