配色產生器

產生器
简 繁 BM BI 日本語 한국어 ไทย EN
Share:
By Checked against sources by , Founder & Architect, RECATOOLS Published Updated Last reviewed

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

RT-FUN-091 · Fun & Misc
你的瀏覽器版本過舊,此工具的互動功能無法運作。請更新至 Safari 13.1、Chrome 或 Edge 80、Firefox 74 或以上版本。

配色產生器

(或按空白鍵)

對比度檢查(WCAG 2.2)

 

顏色HEXrgb()hsl()白底黑底
     
     
     
     
     

每一組配對,對比度從高到低

  1. Aa
  2. Aa
  3. Aa
  4. Aa
  5. Aa
  6. Aa
  7. Aa
  8. Aa
  9. Aa
  10. Aa

數值是 WCAG 2.2 對比度,向下取整,所以顯示 4.5:1 的一定真的達到 4.5:1。正文需 4.5:1(AA)或 7:1(AAA);大號文字(18pt,或 14pt 粗體)需 3:1。配色法只決定色相關係,並不保證對比度:色輪上相對的兩色,亮度可能幾乎一樣。

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

牛頓的七色色環、HEX 的 1,677 萬色,以及 HSL 明度為何會誤導

01

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

02

牛頓《光學》(1704 年初版,第一卷第二部分命題六)畫了一個分成七色的圓,從紅到紫,各段弧長按音階的音程比例劃分——這正是本工具所旋轉的「色相環」的前身。

03

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

04

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

05

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

06

本工具用 HSL 產生配色,因為和諧關係就是色相角度的旋轉。但 HSL 的明度不等於人眼看到的亮度:CSS Color 4 指出,黃色 hsl(60 100% 50%) 和藍色 hsl(240 100% 50%) 明度同為 50%,WCAG 相對亮度卻分別是 0.93 和 0.07——所以上面的對比度檢查要逐對實測。

常見問題

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

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

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

  • 除非你設了基準色,否則是的:每次「產生」都會隨機取一個基準色相、飽和度和明度,再按所選配色法的固定規則推出另外四色(規則顯示在控制項下方)。勾選「從這個顏色開始」後,你的顏色會原樣保留,只有「隨機」模式還會隨機取色。

  • 不會自動保證,配色法本身也不能保證:互補的兩個色相,亮度可能幾乎相同,而對比度取決的正是亮度。工具做的是實測:對比度檢查會列出全部十組配對及其 WCAG 2.2 對比度(正文 AA 門檻 4.5:1,大號文字 3:1);每個色塊的標籤用黑字或白字中對比度更高的那個,一定達到 4.5:1。工具不模擬色覺差異。

  • 可以。在「基準色」裡選一個顏色(或勾選「從這個顏色開始」),每種配色法都會圍繞它展開;你的顏色會原樣保留在規則規定的基準位置。你也可以用🔒鎖住任意色塊,再重搖其餘顏色。

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

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

  • 不會。所有配色都在你的瀏覽器即時產生,不上傳伺服器、不寫入網址,也不會被收集。重新整理頁面就會重新開始。

方法與來源

計算方式

Five colours from fixed HSL hue rotations of a base (complementary +180°, triadic ±120°, analogous 20° steps, monochromatic lightness ladder); HSL to sRGB by the CSS Color 4 §7.1 algorithm. Every pair's WCAG 2.2 contrast ratio, (L1 + 0.05) / (L2 + 0.05), shown rounded down; swatch labels use black or white, whichever contrasts more (ColourPaletteKernel).

本工具採用的標準

  • Colour conversion: HSL to sRGB and back by the W3C CSS Color Module Level 4 sample algorithms (§7.1 hslToRgb, §7.2 rgbToHsl), through the site's shared ColourConvertKernel; HEX as #RRGGBB.
  • Contrast: WCAG 2.2 relative luminance (sRGB linearised at 0.04045; L = 0.2126 R + 0.7152 G + 0.0722 B) and contrast ratio (L1 + 0.05) / (L2 + 0.05). Bands: 7:1 AAA and 4.5:1 AA for body text (SC 1.4.6, SC 1.4.3), 3:1 for large text (18 point, or 14 point bold). Ratios print rounded DOWN to one decimal, so a figure shown as 4.5:1 is never a 4.46 that fails.
  • Harmony rules are this tool's own, stated on the page in degrees and percent: analogous −40° to +40° in 20° steps; complementary three of the base hue and two at +180°; triadic +120° and +240° plus a tint and a shade; monochromatic lightness 88/72/56/40/26%; random five hues over a random 40–160° arc. A base colour the reader enters is kept exactly.
  • HSL lightness is not perceived lightness (CSS Color 4 §7: yellow and blue at 50% have WCAG luminance 0.93 and 0.07), so no harmony is presented as accessible; every pair is measured instead.
  • Corrected 2026-11-03: label ink by luminance < 0.45 (32.5% of 500,000 generated swatches under 4.5:1, worst 2.10:1) replaced by the higher-contrast of black and white (floor 4.58:1); Newton's colour circle dated 1666 corrected to Opticks, 1704.

資料來源

  • W3C. CSS Color Module Level 4, Candidate Recommendation Draft, 1 November 2026 — §7.1 and §7.2 sample code, and the §7 note on HSL lightness across hues: https://www.w3.org/TR/css-color-4/
  • W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — definitions of relative luminance, contrast ratio and large-scale text; SC 1.4.3 and SC 1.4.6: https://www.w3.org/TR/WCAG22/
  • Newton I. Opticks. 4th ed. London: William Innys; 1730 (first edition 1704). Book I, Part II, Prop. VI, the seven-part colour circle. Project Gutenberg: https://www.gutenberg.org/ebooks/33504

可能使本頁過時的因素

  • None at runtime: palettes and contrast are computed in the browser and nothing the reader picks is sent or written to the URL.
Advertisement
Pre-footer · AD-W3 728 × 90