找我們做網站
↑
Resources · 配色工具

Color Palette Generator:按空白鍵隨機產生 5 色配色

配色工具發布 2023.06.14更新 2026.10.02閱讀約 4 分鐘
Color Palette Generator:按空白鍵隨機產生 5 色配色

重點整理
Color Palette Generator 是免費的線上配色產生器,每次隨機給出 5 色組合。按空白鍵換一組,點色塊複製單一色碼,按 C 鍵一次複製 5 色。

我們的生活中美湍都在與大量的色彩接觸,早晨紅橙色喚醒我們的陽光、昨天挑選好的霧霾藍上衣加上瑞典藍的牛仔褲、上班路上五顏六色的交通工具及商店招牌、中餐的綠色蔬菜及晚上的紅油炒手…等,日常生活中甚至是工作都會運用到大量的色彩,當你色彩疲勞沒有靈感時,就有這麼一個配色工具,他可以隨機給你由 5 種顏色組合而成的配色,而這個配色工具就是 – Color Palette Generator,接下來就跟著鵠學苑一起學習吧!

Color Palette Generator 是什麼

「Color Palette Generator」是一個免費線上配色工具,最大特色就是他會隨機給你 5 個顏色組合而成的配色,當你想換配色按下空白鍵,即可更換並且可以預覽色塊即顯示色碼,只要複製色碼就可以運用在設計軟體上,是不是非常方便呢!

Color Palette Generator|鵠學苑
Color Palette Generator|鵠學苑

Color Palette Generator 使用教學

點擊上方的網址就可以進入 Color Palette Generator ,接下來就跟著小編一起學習,了解 Color Palette Generator 如何使用吧!

第一步:點擊「 Color Palette Generator 」進入網站。

 

第二步:換色請按「空白鍵」。

第三步:複製單一色,點選單一色即可完成複製。

Color Palette Generator|step1|鵠學苑
Color Palette Generator|step1|鵠學苑

第四步:5 色一起複製,按下「C」鍵即可。

Color Palette Generator|step4|鵠學苑
Color Palette Generator|step4|鵠學苑

 

把配色套用到網站時要注意什麼?

選到喜歡的配色後,套用到網站前可以先檢查:

  • 分配用途:決定主色(按鈕、連結)、強調色(重點提示)、背景色與文字色,不要 5 色平均使用。
  • 檢查對比:用對比檢查工具確認文字與背景的對比度,淺色按鈕上的白字特別容易看不清楚。
  • 對照品牌色:已有 Logo 或品牌色時,以品牌色為主,再從產生器挑搭配色。
  • 統一設定:把色碼設定在佈景主題或頁面編輯器的全域顏色中,之後修改只要改一個地方。

常見問題

Color Palette Generator 怎麼用?

打開網站後會隨機顯示一組 5 色配色,按空白鍵換下一組,點選單一色塊就能複製該顏色的色碼,按 C 鍵可一次複製 5 個色碼,完全不需要註冊。

Color Palette Generator 是免費的嗎?

是的,Color Palette Generator 是免費的線上配色工具,直接在瀏覽器使用,不需要安裝軟體或登入帳號,產生的色碼可以自由用在網頁設計中。

隨機產生的配色可以直接用在網站上嗎?

可以當作起點,但建議再調整。5 色中通常要挑一個當主色、一個當強調色,其餘當背景與輔助色;文字與背景的顏色要有足夠對比,深色文字配淺色背景才容易閱讀。

結語

免費的上線配色工具很多,但大多都是提供使用者輸入想要的顏色後再進行配色,像 Color Palette Generator 這樣純粹提供使用者靈感的網站少之又少,而 Color Palette Generator 提供的 5 個顏色也並非亂數隨機搭配,而是完全可以實際運用的組合,主色、襯色等都有設想到,是一個很適合挖掘靈感的免費配色工具。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。