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

Pin

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

Pin

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

Pin

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

Pin

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

Pin

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

Pin

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

Pin

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