免費配色工具推薦

色彩帶給人感受,小編推薦以下配色工具,可以幫助您選擇顏色和搭配顏色。一般來說網站會有個主色系再來挑選次要色系,請先想好您的網站想帶給人什麼樣的感覺,針對這感覺挑選一個主要顏色,然後再來選擇要搭配什麼次要色系是合適的。例如:我的網站是食品業,想要給人健康又陽光的感受,我先選主要色系是“綠色”代表健康,次要色系選”鵝黃色”代表陽光與溫暖,再加一個次要色系“卡吉色”讓網站有穩重的感覺,不會讓整個網站過於亮太刺眼。

Material UI Colors

網址:https://www.materialui.co/colors

這個平台提供您可直接總攬色票,點選可以直接複製色碼,在您還沒決定網站主色系前,您可以在這挑一個顏色試試看。


1) 一進來可以看到很多色票 

 

 

2) 點選您要的顏色,立即複製此色票色碼,可以看到右方出現一個已複製色碼的提示框。

 

 

3) 點選上方按鈕 “Material Design Colors”,選擇 “Color Picker”

 

 

4) 此頁為調色盤,如果您在色票裡還沒選擇到適合的顏色,可以來這調整更進階的設定,找到更多顏色。

 

 

palettable

網址:https://www.palettable.io/

這個平台提供您新增多個顏色,讓您能夠輕鬆的配色,調色的色票佈滿整個畫面,可以很清楚的看到搭配顏色的感覺。當您搭配好顏色時還可以下載png圖,來儲存你的配色畫面或是複製此配色連結,也可拿來使用,相當便利。


1) 一進來可以看到一個隨機出現的顏色,中間有一個按鈕可以替換顏色。 

 

 

2) 按下中間的按鈕,出現調色盤,移動滑鼠可自由選取。
    下方像彩虹的橫條可以選取您要的顏色,上方區塊為調整明度與彩度。 

 

 

3) 右下方綠色按鈕“Like”為新增下一個顏色 

 

 

4) 可以看到出現了第二個顏色,能不斷新增。

 

 

5) 中間有個垃圾桶的圖示,可以刪除顏色。下方紅色“Dislike”按鈕,代表你不喜歡這個顏色,系統會幫你隨機換一個顏色,您可以不斷按下,透過不斷換色來找靈感。

 

 

6) 按下右上角有個藍色按鈕“Export”,可以下載配色的png圖或是複製此配色的連結畫面。

 

 

LOLCOLORS

網址:https://www.webdesignrankings.com/resources/lolcolors/

這個平台提供許多顏色的組合參考,當您對你網站的配色一點想法都沒有時,可以來這邊找靈感,參考配色。


1) 這是一個很可愛的配色介面,由一個個笑到飆淚的眼淚圖組成,很有創意。 

 

 

2) 當您滑在顏色上面,會出現色碼,您可以反選色碼按下右鍵複製。 

 

 

NIPPON COLORS(日本の伝統色)

網址:http://nipponcolors.com/

這個平台提供許日本傳統色系,共 250 種顏色,當您要做日系風格網站時,可以來這邊尋找搭配靈感。


1) 可以看到一排很大的字,是目前背景的顏色名稱,按下中間有許多顏色,背景就會切換成那個顏色。 

 

 

2) 色彩名稱的左方,提供CMYK、RGB和#HEX色碼資訊。右方則是有個動畫切換按鈕。 

 

 

3) 中間的動畫是“Munsell”也就是“曼塞爾色彩體系”,呈現色相、明度、彩度的色彩體系組合,很大膽強烈的動畫,他的背景會隨機變換顏色,如果您想找色彩靈感時,可以在這停留一會,或許有幫助!