分享 23 個超好用的配色參考工具,設計師、插畫師必備!

在視覺領域,色彩一直是其中重要的一環。不同色彩能帶給人不同的心理感受,不同的色彩搭配更是如此。設計師、插畫師想必是對於配色十分敏感的群體,對於初學者掌握好色彩搭配也並非易事。所以,小美今天就來分享 23 個私藏超好用的配色網站、APP 合集,幫大家拓展資源庫,從而更好地去運用色彩。(應用 4 + 網站 19)

應用篇

RealHex — 拾色器還可以這麼用!(iOS)

下載鏈接

RealHex 作為一個拾取顏色並記錄顏色參數值的應用,不僅僅是設計師,畫家,攝影師的專利,任何人都可以創造性地使用它,發掘你未曾發現的神奇用途!大自然的世界具有天然的和諧配色:選取一處風景,對景物取色,形成的配色方案可以運用在平面設計,室內設計,網頁設計中~相比去配色網站尋找現成的配色方案,這種自然取色的方式更具有創造性哦~

FABRIKA - 自製裝飾藝術(iOS)下載鏈接

Fabrika 並不算是一個純粹的配色工具,而主要用於壁紙的創作,之所以將它選入實在是因為它的色彩選擇和搭配功能實在太贊了!你可以用 Fabrika 來 DIY 壁紙,你也可以用它來創作不重樣的裝飾藝術品。

Palette — 一款設計愛好者會喜歡的取色 APP (Android)

googleplay 下載鏈接 | 酷安下載鏈接

它能夠將一張圖片里的突出顏色和顏色代碼提取出來,從而方便你學習其中的配色方案以及獲得配色靈感。有了這個 APP ,在街上隨處走著,看到哪家店面配色方案不錯呀,就可以隨手拍下來進行配色分析了~

Pixolor — 一鍵拾取屏幕色彩,設計師高效工作利器(Android)

googleplay 下載鏈接 | 酷安下載鏈接

像素色彩 Pixolor 可以精確地查看手機圖片對應的像素的顏色,它有一個浮動在屏幕上的取色盤用來獲取色彩信息和像素信息,再也不用擔心手機圖片上傳到電腦會失真了。

網站篇

Kuler —Adobe 官方配色工具

網站鏈接

這款是 Adobe 官方出品的配色工具,可能很多人都知道了。它可以通過不同色彩規則來提供配色參考,並提供每種色彩的數值,方便好用。

Paletton —在線色環配色工具

網站鏈接

和 Kuler 差不多,Paletton 也是在線的色環配色工具。你可以根據需要選擇單色、相近色、對比色等規則來查看配色,也可以實時查看其在網頁中的搭配效果。

nipponcolors —日本傳統色

網站鏈接

非常文藝唯美的一個色彩網站,收錄了很多日本傳統色,每種色彩的名字很好聽。

Chinese colors —中國傳統色

網站鏈接

一個山寨 nipponcolors 的網站,除了收錄的色彩不同,界面與 nipponcolors 完全一致,大家看看就好。

Coolors 隨機創建保存配色

網站鏈接

按下空格鍵就可生成配色方案,並附帶顏色代碼。每種色彩還能單獨查看色號、色階,並且可以選擇色盲模式查看。配色可保存,Coolors 不僅有 web 版,還有 iOS 應用,chrome 插件以及兼容 Ps、Ai 插件。

Colordot 自由創造配色

網站鏈接

Colordot 可以幫你自由搭配各種色彩。一進入 Colordot 看到的就是滿屏的色彩,隨意滑動滑鼠,可以看到不同顏色,當你確定一種顏色後,點擊一下,就可以獲取該顏色。同時,Colordot 除了網頁版,還有 iOS 版。

Colourco —DIY 配色

網站鏈接

與 Colordot 差不多,Colourco 也可以自主地創建多種色彩搭配,且色彩可保存為多種格式。

Colorhunt —色彩愛好者的社交平台

網站鏈接

這是一個色板社交平台,你可以創造並分享喜歡的色彩搭配,也可以在這裡發現跟多喜歡的配色。網站的 icon 非常可愛,是一個吐著舌頭的笑臉。它還有 chrome 插件,安裝後,每次打開一個新便簽頁,就是一個隨機的色板。

LOLCOLORS —可愛的配色網站

網站鏈接

又是一款可愛的配色網站,色彩大多明快清新,有色號標註。色彩的呈現方式與 icon 呼應,可做參考~

Colordrop —色板參考

網站鏈接

上百中色板配色參考,可以查看色號並收藏喜歡的配色。特點是可以設置背景顏色,從而查看色板與背景色的搭配效果。

Palettable —喜歡?不喜歡?

網站鏈接

Palettable 的特點是根據你的喜好進行配色。最初進入網站會出現一種顏色,你只需要選擇「喜歡」或者「不喜歡」從而選擇顏色,直到搭配出你想要的色板。

Color Library — 色彩資源庫

網站鏈接

這個網站可以對圖片色彩進行色相分離,根據需求選擇保留哪幾種顏色。

WebGradients —網站漸變背景色參考

網站鏈接

這個網站收錄了 180 種可以用於網頁的漸變色彩,點擊每種色彩可以預覽效果,喜歡的可以下載 png 圖片或者複製 CSS 代碼,很方便。

Uigradients —在線生成漸變色

網站鏈接

一款可以在線生成漸變色的網站,和上一個 WebGradients 功能差不多,可以收下,多做一份參考。

Flat UI Colors —扁平化 UI 配色參考

網站鏈接

這個網站提供了多種主流 UI 配色參考,可以直接複製顏色。

Material UI —配色板合集

網站鏈接

Material UI的獨特之處在於除了包含上一個介紹的 Flat UI Colors 外,還包括如:Material Design Colors、Social Colors、HTML Colors 等。其中比較有趣的是 Social Colors ,彙集了 36 個主流社交網站的主體配色,當你有需要的時候,能夠在這裡準確的獲取到。

Material Mixer

網站鏈接

這個網站主要用於 MD 色彩參考。在色板中,任意選擇一種顏色後,就會獲得與之最為搭配的另外兩種顏色,從而組成界面的主體色彩。在右側的小色板卡中,可以自定義按鈕符號的色彩。你所選擇的色彩,都可以在最右側的界面中實時預覽,並獲得顏色信息,非常方便。

Brandcolors —官方品牌顏色代碼集合

網站鏈接

這裡收錄了多的品牌顏色代碼,比如我們熟悉的 500 px、Airbnb、Amazon 、Dribbble等。品牌由 A-Z 順序排號,有需要的時候可以看看。

Pictaculous —查看圖片配色

網站鏈接

上傳一張圖片,就可以獲得圖片中的配色信息,同時還能得到其他配色參考。喜歡畫畫、攝影的朋友們也可以通過這個網站來分析下自己作品的配色信息,或者是分析其他作品的配色情況,以供參考。

好啦,這次分享的配色網站、應用到這裡完畢啦,以後如果發現了更多實用、有趣的網站、應用,小美會繼續來分享噠~小美可是把私藏的都拿出來啦,不贊一下再走嘛~

下載地址等更多內容請前往 —— 配色參考工具專題

更多內容請前往 —— 最美應用

喜歡的話就 「贊」 一個吧^^

--------------------------------------

往期精選

1. 學齡前兒童的教育問題,以後就都交給它吧!

2. 腳下走的每一步路,都是為了遇見更美的世界

3. 給失眠君的一封挑戰書~

小美個人微信號:zuimei47,與小美嘮嘮嗑,第一時間了解科技、應用圈的新鮮事~

下載 最美應用官方客戶端

推薦閱讀:

兩步學會用 Sketch 製作可以改變顏色和複寫內容的文字 symbol
Smartisan OS 2.0 設計體驗筆記
是的,我們做了一個 AR 眼鏡
Firefox 57 最全面的設計通信??
Sketch 動態響應按鈕的實現

TAG:设计 | 用户界面设计 | 最美应用 |