Coolors – 線上免費配色調色盤工具，快速產生多種富有美感與啟發靈感的配色網站

Coolors 是一個許多前端設計師常常會使用的一款線上調色盤產生器，它的作用是，能夠快速的產生各種互相搭配的顏色，也就是我們所謂的「配色工具」，透過他直接幫你自動生成的顏色，能夠大大減少設計師配色的時間，同時也能在同一個畫面上，組合各種顏色所帶來的不同效果，快速的搭配出最佳的顏色組合。

Facebook Line Messenger Telegram

Coolors 是一個許多前端設計師常常會使用的一款線上調色盤產生器，它的作用是，能夠快速的產生各種互相搭配的顏色，也就是我們所謂的「配色工具」，透過他直接幫你自動生成的顏色，能夠大大減少設計師配色的時間，同時也能在同一個畫面上，組合各種顏色所帶來的不同效果，快速的搭配出最佳的顏色組合。

在自動產生配色之後，預設會產生 5 個互相搭配的顏色。在色塊當中的間隔，可以自動插入一個新搭配的色塊，因此透過這種方式，你將可以不斷的產生出一個非常具有搭配性的調色盤。

另外，這些色塊還可以進行順序的調整，讓你重新排列組合起來。還能夠以漸變色的模式來看你的調色盤，甚至還有色盲專用的轉換工具，讓你的配色更能符合各種使用情境。

如果讓程式自動產生不同色塊讓你還是難以決定，不用擔心。在 Coolors 當中你可以瀏覽最新趨勢的調色板，當中收錄了各種熱門的配色，你可以從中直接選用來作為搭配，或者是從中汲取一些靈感，加以調整後就可以為你的作品創作出另一套令人舒服的色調。

如果你還想了解相關的調色盤或顏色產生工具，可以參考：Tailwind Ink、Color Palette Generator、CSS Gradient、Cool Backgrounds、Trianglify.io、Tint & Shade Generator…等等，相關的線上顏色產生工具。

網站名稱：Coolors – The super fast color schemes generator!
網站網址：https://coolors.co/

Coolors 簡介教學

如何透過 Coolors 快速產生調色盤。

所需時間 3 minutes

開始產生或探索調色盤

進入 Coolors 的首頁之後，在畫面中你可以直接點選「Start the generator」前往調色盤產生工具當中，或者，你也可以先點選「Explore trending palettes 」，查看許多熱門的調色結果，直接取用。

自動產生調色盤

當你進入調色盤工具產生器之後，預設會顯示 5 個顏色，這顏色是根據隨機且互相搭配所產生的漸變顏色，因此在顏色方面是同屬於同一個色系。

對色塊進行操作

Coolors - 線上免費配色調色盤工具，快速產生多種富有美感與啟發靈感的配色網站 1

再 Coolors 當中，你可以針對每一個色塊進行調整，包括：移除色塊、查看色階陰影、儲存顏色、左右移動、複製 HEX 色碼、鎖定色塊…等等操作，當你的滑鼠移入每個色塊當中時，就可以進行這些操作。

在顏色間添加顏色

Coolors - 線上免費配色調色盤工具，快速產生多種富有美感與啟發靈感的配色網站 2

此外，當你想要新增顏色時，只需要將滑鼠移到色塊與色塊之間，就會出現「＋」號，點選後就可以自動生成一個新的色塊插入當中，且這個色塊會根據前後的顏色自動進行判斷，產生一個在這兩個顏色之間的一個顏色。

產生漸變顏色模式

在 Coolors 當中除了能產生調色盤功能之外，還有許多很多好用的功能。你可以透過上方的工具列來找到更多的功能去應用。這裡我挑一個我比較有興趣的功能來帶大家演示一下。
點擊上方的三個點圖示，可以展開更多功能，當中其中一項是「View as gradient」，點選後就可以展開當前調色盤的漸變顏色。

調色盤漸變色功能

在調色盤漸變色功能當中，你可以看到由當前調色盤所產生的漸變顏色，在此模式當中，你可以直接針對這個漸變顏色去進行調整修改，並再返回產生相對應的調色盤。
另外，你也可以直接複製當前漸變顏色的 CSS 程式碼，直接應用在你的專案當中，像是背景、Cover…等等欄位中都常常會利用到漸變色的效果，或是也能直接將此漸變圖下載下來。

探索熱門趨勢調色盤

剛剛提到 Coolors 當中有提供趨勢熱門的調色盤，首頁當中直接選取「Explore trending palettes」就能進入瀏覽頁面。
在此頁面當中，你可以看到許多趨勢、熱門的調色盤，你除了能夠直接運用這些色系在你的專案當中之外，也可以透過瀏覽這些趨勢配色，來給你自己取得一些靈感。甚至，你也可以直接套用其中一個配色後，再進入調色盤中去創造你自己的配色。