一鍵產生和諧的五色配色方案:隨機、互補、鄰近、三角、單色等多種配色法。鎖定喜歡的顏色再重搖,點擊複製 HEX 色值,還能匯出一張精美的配色卡片。純前端,即時產生。
配色產生器
怎麼用
選擇配色法
從「隨機、互補、鄰近、三角、單色」中選一種。每種對應一條色彩和諧規則,決定五個顏色之間的關係。
點「產生」或按空白鍵
每次都會產生一組新的和諧配色。不滿意就再點一次,或直接按空白鍵快速重搖。
鎖定 + 複製
喜歡某個顏色?點它的🔓鎖住它,再產生時它就不變。點 HEX 色值即可複製(如 #E8622A),直接用到設計稿裡。
下載或分享卡片
點「下載配色」把整組配色存成一張圖(含 HEX 值),或「分享」發給同事/朋友,也可匯出 PDF。
配色產生器:用色彩理論,幾秒配出好看的顏色
給設計選顏色,常常是最讓人卡關的一步:單看一個顏色還行,五個湊在一起就「不搭」。配色產生器把色彩和諧背後的規則做成了一個按鈕——它不是隨便給你五個顏色,而是按照色輪上的幾何關係,產生本就「天生協調」的一組配色。你只管挑、鎖、複製,把好看的顏色直接搬進設計裡。
五種配色法,五種關係
工具內建最常用的幾種配色法,每一種對應色輪上的一種關係:單色(Monochromatic)——同一種色相,只變明暗,最穩妥耐看;鄰近(Analogous)——色輪上相鄰的幾種顏色,自然柔和,像同一片風景裡的色彩;互補(Complementary)——色輪上正對的兩色,對比強烈、最抓眼;三角(Triadic)——色輪上等距的三色,鮮明又平衡;隨機(Random)——在保持明暗層次的前提下放開色相,給你意外的靈感。換一種配色法,整組關係就隨之改變。
「好的配色不是湊出來的,是按關係排出來的。」
HEX 是什麼,為什麼到處都用它
每個顏色下面那串 #E8622A 就是它的 HEX(十六進位)色值——網頁、設計軟體、幾乎所有數位工具通用的「顏色身分證」。它由 # 加六位十六進位數字組成,分別代表紅、綠、藍三個通道的強度。點一下就能複製,貼到 CSS、Figma、PPT 裡,顏色分毫不差。本工具產生的每個顏色都給出 HEX,方便你直接拿去用。
順手提一句對比度
配色好看之外,還要好用:文字和背景之間要有足夠的對比度,內容才看得清(無障礙標準 WCAG 建議正文對比度至少 4.5:1)。卡片上的色值標籤會根據每個色塊的明暗,自動用黑字或白字以保證可讀——這也提醒你:把產生的顏色用作文字/背景時,記得檢查一下對比度。整個工具在你的瀏覽器本機執行,即點即出,不上傳任何東西。
關於顏色與配色的 10 個事實
HEX 色值用十六進位表示紅綠藍三通道,每通道 00–FF(0–255),理論上可表示約 1,677 萬種顏色。
色輪的概念可追溯到牛頓:他在 1666 年把光譜首尾相接,畫出了第一個色環,奠定了今天「色相」的基礎。
互補色(色輪上正對的兩色)放在一起對比最強,所以體育隊、警示標識常用它;但大面積互補色也最容易「刺眼」。
設計裡常用「60-30-10」法則:主色 60%、輔色 30%、點綴色 10%,能讓配色既統一又有重點。
人眼對綠色最敏感,這也是為什麼亮度公式裡綠色的權重最高(約 0.72),遠高於紅(0.21)和藍(0.07)。
單色配色(同色相、變明暗)幾乎永遠「不會出錯」,因此最適合追求高級、克制感的品牌與介面。
無障礙標準 WCAG 要求正文文字與背景的對比度至少 4.5:1,大號文字至少 3:1,以照顧低視力使用者。
顏色有強烈的文化與情緒含義:同樣的紅色,在一種文化裡是喜慶,在另一種裡卻是警告——配色不只是好看,也是溝通。
螢幕用 RGB(光的疊加,加色),印刷用 CMYK(顏料的吸收,減色);同一個 HEX 在螢幕和紙上可能略有差異。
本工具用 HSL(色相-飽和度-明度)來產生配色,因為按「色相角度」旋轉,正是表達互補、三角等和諧關係最直觀的方式。
常見問題
-
每個色塊下方都有 HEX 色值(如 #E8622A)。點一下即可複製,然後貼到 CSS、Figma、Photoshop、PPT 等任何接受 HEX 的地方,顏色完全一致。也可以下載整組配色的卡片圖作參考。
-
它們對應色輪上不同的幾何關係:單色=同一色相變明暗(最穩);鄰近=色輪相鄰色(柔和);互補=正對兩色(對比強);三角=等距三色(鮮明平衡);隨機=放開色相但保持明暗層次。換一種,整組顏色的「關係」就變了。
-
點某個顏色上的🔓把它鎖住,之後再點「產生」時,鎖定的顏色保持不變,只有未鎖定的會更新。這樣你可以保住喜歡的一兩個顏色,反覆重搖其餘的,直到整組都滿意。
-
是的,每次「產生」會隨機取一個起始色,再按你選的配色法推導出和諧的一組。隨機的是「起點」,但顏色之間的關係始終遵循色彩理論,所以結果總是協調的,而非雜亂。
-
工具不會自動保證無障礙。它會根據每個色塊明暗自動選用黑字或白字讓標籤可讀,但你把顏色用於文字/背景時,仍應自行檢查對比度(WCAG 建議正文至少 4.5:1)。互補等高對比配色通常更安全。
-
目前的做法是:不斷「產生」,遇到接近你想要的某個顏色時把它🔒鎖住,再重搖其餘顏色圍繞它展開。我們也在考慮加入「輸入一個基準色」的功能。
-
高解析度 PNG 圖片,五個色塊連同各自的 HEX 值,適合社交分享或存檔;也可匯出 PDF。整張圖在你的裝置上產生,不經伺服器。
-
完全免費,無需註冊,產生次數不限。想搖多少次就搖多少次,因為一切都在你的瀏覽器裡完成,既快又私密。
-
它們是同一種顏色的不同寫法。RGB 用紅綠藍三個 0–255 的數;HEX 是 RGB 的十六進位簡寫(#RRGGBB);HSL 用色相、飽和度、明度來描述,更貼近人的直覺。本工具內部用 HSL 推導和諧關係,最後輸出通用的 HEX。
-
不會。所有配色都在你的瀏覽器即時產生,不上傳伺服器、不寫入網址、不收集任何資訊。重新整理頁面就會重新開始。RECATOOLS 實行零儲存、零追蹤。
Related News
You may be interested in these recent stories from our newsroom.
No related news yet for this tool. Our editorial team publishes new pieces every week.
Browse all news →