配色產生器

產生器
简 繁 BM BI 日本語 한국어 ไทย EN
Share:
By

一鍵產生和諧的五色配色方案:隨機、互補、鄰近、三角、單色等多種配色法。鎖定喜歡的顏色再重搖,點擊複製 HEX 色值,還能匯出一張精美的配色卡片。純前端,即時產生。

RT-FUN-091 · Fun & Misc

配色產生器

(或按空白鍵)

Advertisement
After tool · AD-W1 Responsive

怎麼用

選擇配色法

從「隨機、互補、鄰近、三角、單色」中選一種。每種對應一條色彩和諧規則,決定五個顏色之間的關係。

點「產生」或按空白鍵

每次都會產生一組新的和諧配色。不滿意就再點一次,或直接按空白鍵快速重搖。

鎖定 + 複製

喜歡某個顏色?點它的🔓鎖住它,再產生時它就不變。點 HEX 色值即可複製(如 #E8622A),直接用到設計稿裡。

下載或分享卡片

點「下載配色」把整組配色存成一張圖(含 HEX 值),或「分享」發給同事/朋友,也可匯出 PDF。

配色產生器:用色彩理論,幾秒配出好看的顏色

給設計選顏色,常常是最讓人卡關的一步:單看一個顏色還行,五個湊在一起就「不搭」。配色產生器把色彩和諧背後的規則做成了一個按鈕——它不是隨便給你五個顏色,而是按照色輪上的幾何關係,產生本就「天生協調」的一組配色。你只管挑、鎖、複製,把好看的顏色直接搬進設計裡。

五種配色法,五種關係

工具內建最常用的幾種配色法,每一種對應色輪上的一種關係:單色(Monochromatic)——同一種色相,只變明暗,最穩妥耐看;鄰近(Analogous)——色輪上相鄰的幾種顏色,自然柔和,像同一片風景裡的色彩;互補(Complementary)——色輪上正對的兩色,對比強烈、最抓眼;三角(Triadic)——色輪上等距的三色,鮮明又平衡;隨機(Random)——在保持明暗層次的前提下放開色相,給你意外的靈感。換一種配色法,整組關係就隨之改變。

「好的配色不是湊出來的,是按關係排出來的。」

HEX 是什麼,為什麼到處都用它

每個顏色下面那串 #E8622A 就是它的 HEX(十六進位)色值——網頁、設計軟體、幾乎所有數位工具通用的「顏色身分證」。它由 # 加六位十六進位數字組成,分別代表紅、綠、藍三個通道的強度。點一下就能複製,貼到 CSS、Figma、PPT 裡,顏色分毫不差。本工具產生的每個顏色都給出 HEX,方便你直接拿去用。

順手提一句對比度

配色好看之外,還要好用:文字和背景之間要有足夠的對比度,內容才看得清(無障礙標準 WCAG 建議正文對比度至少 4.5:1)。卡片上的色值標籤會根據每個色塊的明暗,自動用黑字或白字以保證可讀——這也提醒你:把產生的顏色用作文字/背景時,記得檢查一下對比度。整個工具在你的瀏覽器本機執行,即點即出,不上傳任何東西。

Advertisement
After how-to · AD-W2 Responsive

牛頓在一六六六年把光譜彎成了一個圓

01

HEX 色值用十六進位表示紅綠藍三通道,每通道 00–FF(0–255),理論上可表示約 1,677 萬種顏色。

02

色輪的概念可追溯到牛頓:他在 1666 年把光譜首尾相接,畫出了第一個色環,奠定了今天「色相」的基礎。

03

互補色(色輪上正對的兩色)放在一起對比最強,所以體育隊、警示標識常用它;但大面積互補色也最容易「刺眼」。

04

設計裡常用「60-30-10」法則:主色 60%、輔色 30%、點綴色 10%,能讓配色既統一又有重點。

05

人眼對綠色最敏感,這也是為什麼亮度公式裡綠色的權重最高(約 0.72),遠高於紅(0.21)和藍(0.07)。

06

單色配色(同色相、變明暗)幾乎永遠「不會出錯」,因此最適合追求高級、克制感的品牌與介面。

07

無障礙標準 WCAG 要求正文文字與背景的對比度至少 4.5:1,大號文字至少 3:1,以照顧低視力使用者。

08

顏色有強烈的文化與情緒含義:同樣的紅色,在一種文化裡是喜慶,在另一種裡卻是警告——配色不只是好看,也是溝通。

09

螢幕用 RGB(光的疊加,加色),印刷用 CMYK(顏料的吸收,減色);同一個 HEX 在螢幕和紙上可能略有差異。

10

本工具用 HSL(色相-飽和度-明度)來產生配色,因為按「色相角度」旋轉,正是表達互補、三角等和諧關係最直觀的方式。

常見問題

  • 每個色塊下方都有 HEX 色值(如 #E8622A)。點一下即可複製,然後貼到 CSS、Figma、Photoshop、PPT 等任何接受 HEX 的地方,顏色完全一致。也可以下載整組配色的卡片圖作參考。

  • 它們對應色輪上不同的幾何關係:單色=同一色相變明暗(最穩);鄰近=色輪相鄰色(柔和);互補=正對兩色(對比強);三角=等距三色(鮮明平衡);隨機=放開色相但保持明暗層次。換一種,整組顏色的「關係」就變了。

  • 點某個顏色上的🔓把它鎖住,之後再點「產生」時,鎖定的顏色保持不變,只有未鎖定的會更新。這樣你可以保住喜歡的一兩個顏色,反覆重搖其餘的,直到整組都滿意。

  • 是的,每次「產生」會隨機取一個起始色,再按你選的配色法推導出和諧的一組。隨機的是「起點」,但顏色之間的關係始終遵循色彩理論,所以結果總是協調的,而非雜亂。

  • 工具不會自動保證無障礙。它會根據每個色塊明暗自動選用黑字或白字讓標籤可讀,但你把顏色用於文字/背景時,仍應自行檢查對比度(WCAG 建議正文至少 4.5:1)。互補等高對比配色通常更安全。

  • 目前的做法是:不斷「產生」,遇到接近你想要的某個顏色時把它🔒鎖住,再重搖其餘顏色圍繞它展開。我們也在考慮加入「輸入一個基準色」的功能。

  • 高解析度 JPEG 圖片,五個色塊連同各自的 HEX 值,適合社交分享或存檔;也可匯出 PDF。整張圖在你的裝置上產生,不經伺服器。

  • 完全免費,無需註冊,產生次數不限。想搖多少次就搖多少次,因為一切都在你的瀏覽器裡完成,既快又私密。

  • 它們是同一種顏色的不同寫法。RGB 用紅綠藍三個 0–255 的數;HEX 是 RGB 的十六進位簡寫(#RRGGBB);HSL 用色相、飽和度、明度來描述,更貼近人的直覺。本工具內部用 HSL 推導和諧關係,最後輸出通用的 HEX。

  • 不會。所有配色都在你的瀏覽器即時產生,不上傳伺服器、不寫入網址、不收集任何資訊。重新整理頁面就會重新開始。RECATOOLS 實行零儲存、零追蹤。

Advertisement
Pre-footer · AD-W3 728 × 90