【設計資源】- 「 Coolors」: 線上配色網站

今天要來介紹大家一個有趣又實用的網站:「 Coolors」,主要可以當作設計師們線上配色的工具,操作簡單又好用,色碼產生之後,還另外附有多種格式的下載。雖然也有需付費的手機 APP 版本,但我們這邊就先來使用看看免費的網頁版本吧~

網址: https://coolors.co/

進入首頁之後,請點選藍色方塊處。(如下圖)

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】- 「 Coolors」: 線上配色網站 - SNAG-0022

 


這邊總共有五個長條色塊可以做色彩搭配,而每個單獨色塊都可以選擇不同的色彩模型,利用滑鼠調整到自己想要的色相後,色碼會在下方即時產生。

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】- 「 Coolors」: 線上配色網站 - SNAG-0032

 


如果想要左右移動色塊的話,只要按住底下這個左右箭頭的符號不放,就可以了。

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】- 「 Coolors」: 線上配色網站 - SNAG-0033

 


在這裡還提供了一個上傳圖檔的功能(如下圖游標處 ↓) ,假如想要指定圖片裡頭某一種顏色,或是喜歡某張圖片的色彩組合,就可以善加利用此功能喔~

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】- 「 Coolors」: 線上配色網站 - SNAG-0034

 

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】- 「 Coolors」: 線上配色網站 - SNAG-0035


1. 首先,在上傳圖片之後,用滑鼠選擇想要取代顏色的色塊。

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】- 「 Coolors」: 線上配色網站 - SNAG-0036

 


2. 再用滑鼠點選想要取色的地方就可以了,是不是超簡單呀~

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】- 「 Coolors」: 線上配色網站 - SNAG-0037

 


3. 假如不想這麼麻煩,也可以選擇 「AUTO」 自動選色功能,會一次幫您抓好五種顏色,點一次不滿意的話,還可以多點幾次,整組配色會隨機跳選變化喔。

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】- 「 Coolors」: 線上配色網站 - SNAG-0047

 


最後,如果想要同步調整所有色塊,可以點網頁上方的圈圈 icon ,會自動跳出隱藏的工具列;萬一想要復原已做的調整,只要按後退鍵 icon ,就可以回到上一個步驟喔,真的是太貼心了呢~

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】- 「 Coolors」: 線上配色網站 - SNAG-0041-1

 


對於不想要動到的色塊,只要鎖起來就可以了。

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】- 「 Coolors」: 線上配色網站 - SNAG-0046

 


大功告成之後,就可以選擇自己需要的格式,匯出這一組的配色囉!

Free Resource 好康報報 Good Design 好站報報  - 【設計資源】- 「 Coolors」: 線上配色網站 - SNAG-0044

 


這就是今天介紹給大家的好用網站資源,希望大家會喜歡這個分享~  ^_^

 

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

posted in Free Resource 好康報報, Good Design 好站報報 and tagged , , .

留言功能已關閉。