3個免費配色網站+1招萬用配色技巧:色彩搭配0煩惱!

每次都很煩惱要如何挑選顏色嗎? 這次介紹 3 種免費配色工具,讓你輕鬆完成色彩搭配。同時也分享 1 招萬用配色技巧,讓你即使不用那些調色盤也能配出好看的網站介面!

配色網站

這些都是我主要使用的配色網站,而我的流程通常是先決定一個主要色,其餘的就可以透過輔助工具處理囉!

NIPPON COLORS - 日本の伝統色

color palete tools 01
NIPPON COLORS - 日本の伝統色

這是個日本配色網站,使用得當可以讓你的網站充滿日式風格,點選顏色之後整體顏色會改變方便預覽,有提供 CMYK 和 RGB,把滑鼠移到 RGB 上方也會出現 HTML 色碼表。

使用建議:可以先在這個網站決定一個主要色。

ColorSpace

ColorSpace 配色網站
ColorSpace

決定了主色調後,之後完全沒想法嗎? ColorSpace 可以提供色彩靈感,只要把 HTML 色碼輸入到畫面中,然後按下 GENERATE,下方就會跑出很多配色方案,喜歡的就可以直接把整個橫向配色表拿來使用囉~

ColorSpace 配色建議
ColorSpace 配色建議

同時這個網站也提供了漸層色的 CSS 程式碼建立服務,點選上方選單的 GRADIENT 就可以找到了,漸層方向也都可以選擇,之後將下方的 CSS 程式碼複製後就可以直接使用。

使用建議:決定主要色後,完全無靈感時可使用。

Palettable

Palettable 配色網站
Palettable

這是一個用互動方式去產生配色的工具,點中間的控制桿圖示可以直接調整顏色,之後系統會開始右邊提供建議的配色方案,你只要選喜歡或不喜歡即可,這個配色表最多可以建立 5 個顏色。

使用建議:決定主要色與次要色後可使用,或者想找同個色相中比較適合的配色方案可使用。

萬用配色技巧

黑白灰+強調色

大家總是會希望自己的網站能夠用上自己最愛的色彩們,但其實多數情況下這些色彩們可是會有點衝突的喔(是可以經過調整去和諧一些,但有點技巧)。這時不妨運用減法去思考,把網站改為灰階,並思考自己最想留下的是哪個顏色,把它當作凸顯顏色使用,這樣通常結果都不會糟糕的!

一小時架站單色配色範例
一小時架站單色配色範例

更進階一些之後,則可以考慮用 2 個顏色即可,分別是主要色+次要色,大約是 7:3 的比例製作,向一小時架站大概就是這個概念(沒完全一樣喔),大格局就是藍(背景其實也帶點藍),然後咖啡色作為凸顯使用。

另一個案例是 lasol睡眠屋,大家可以思考看看他們的配色是如何喔!

常見問題

配色網站需要付費嗎?

有免費的網站,也有付費的網站。而我這裡整理了平時主要在使用的 3 個免費配色網站提供給大家!

有沒有萬用配色方案?

善用減法原理,確實是有一套簡單的配色方法,而且也不錯看的喔!我的教學就有提供單色萬用配色法。

免費配色網站安全嗎?

基本上這些配色網站都是提供色彩建議而已,沒有跟你索取太多資訊。而我也是主觀認為他們都是基於分享概念 (或者推廣付費) 在製作這些好用工具的喔!

文章類別

小技巧

建議文章