猜哪些顏色搭配起來好看,實在浪費設計時間。這個生成器套用經典的色輪配色理論,也就是色彩學裡教的色相關係,讓每組配色都是數學上協調的搭配,而不是憑感覺亂試。點擊任一色塊即可複製十六進位色碼,也能把整組配色以CSS自訂屬性的形式一次複製。完全在用戶端執行:不用註冊帳號、不用上傳,也不會追蹤你的品牌色。
免費配色生成器
全程在瀏覽器裡執行，免上傳、免註冊。
配色方式
CSS變數
什麼是配色生成器?
配色生成器運用色輪理論,從一個基礎色出發打造協調的配色方案。選擇或輸入一組十六進位色碼,再選擇互補色、類似色、三角色或單色等配色方式,工具就會立即算出協調的顏色組合,每個色塊都附有可複製的十六進位色碼。整個過程都在瀏覽器內完成。
使用方式
- 1設定基礎色. 點擊色塊直接挑選,或輸入像#6366f1這樣的十六進位色碼,也可以按「隨機」取得新的起點。
- 2選擇配色方式. 可切換互補色、分裂互補色、類似色、三角色、四角色、單色、深色、淺色,配色方案會立即重新計算。
- 3複製顏色. 點擊任一色塊即可複製該十六進位色碼,也可以用複製按鈕把整組配色以CSS變數的形式取得。
適合誰用
- 網頁設計師從單一品牌色開始建置網站時,可以產生類似色或分裂互補色,用於背景、按鈕與點綴色。
- 前端工程師需要設計變數的起點時,可以把配色方案複製為CSS變數,直接貼進樣式表使用。
- 行銷人員與簡報製作者想讓圖表、社群圖片或簡報配合Logo顏色時,不需要開設計軟體就能完成。
- 插畫家與業餘愛好者探索同一色相的深淺變化,為作品營造層次感、亮部與陰影。
常見問題
這個配色生成器免費嗎?
是的,100%免費,不用註冊、沒有浮水印、也沒有次數限制。無論是個人專案還是商業專案,都能盡情產生與複製配色方案。
我的顏色資料會被上傳到哪裡嗎?
不會。配色計算完全在你的瀏覽器內以純JavaScript完成,你的品牌色、輸入內容與點擊操作都不會傳送到任何伺服器。
什麼是互補色?
互補色是色輪上與基礎色正相對的顏色,也就是色相旋轉180度後得到的顏色。像藍色與橙色這樣的互補色對比最強烈,因此常用於品牌背景上的行動呼籲按鈕,以突顯視覺焦點。
類似色配色跟三角色配色有什麼差別?
類似色配色使用相鄰的色相(大約落在基礎色30度範圍內),整體感覺沉穩且有一致性。三角色配色則使用相隔120度的三種色相,顏色之間對比更強,呈現更鮮明、更有活力的平衡配色。
深色與淺色是什麼意思?
深色是將基礎色的明度逐步降低、趨向黑色所得到的顏色;淺色則是明度趨向白色所得到的顏色。兩者都保留原本的色相與飽和度,非常適合用在滑鼠懸停狀態、邊框以及同一品牌色的背景層次。
網站配色方案該用幾種顏色?
常見的原則是60-30-10法則:主色約佔介面的60%,輔助色佔30%,點綴色佔10%。可以先在這裡產生一組3到5種顏色的配色方案,再為每種顏色加上深淺變化,套用到不同狀態與版面層次。
為什麼灰色或黑色的配色幾乎沒有變化?
灰色、黑色與白色的飽和度都是零,沒有色相可供配色方案旋轉,旋轉一個不存在的色相自然還是回到同一個中性色。建議改用明度模式打造中性色階:黑色或深灰用淺色模式,白色或淺灰用深色模式,中間灰階用單色模式。