調色盤產生器

這是調色盤產生器。選一顆底色 HEX、一種配色關係（互補、鄰近、分裂互補、三角、四方、單色）和風格。鎖定色塊後再產生：#3B82F6 的互補色會留下這顆藍，其餘重配。

鎖定後產生會留下該色。2–8 顆。箭頭換序。色塊上的 HEX 可改。

色帶預覽（色盲模式只改這裡的顯示）。

點一下即可複製

每對顏色的對比度。≥4.5 標 AA，適合正文。 · 要看正文對比度？用 顏色轉換

示例，點色塊填入

調色盤產生器

這是調色盤產生器：從一顆 HEX 按色輪關係配出一組色，思路接近 Adobe Color 和 Figma 的產生器。互補是對面（H + 180°）。鄰近是 ±20°、±40°。分裂互補是 ±150°。三角是 120° / 240°。四方是 90° / 180° / 270°。單色保住 H、S，只改 L。#3B82F6 的互補會帶上這顆藍和它的對面。粉彩 / 鮮豔 / 低飽和 / 大地色改飽和度和明度，不改色相規則。HEX 轉 Tailwind 是找預設類名；加白加黑是一顆色往白或黑混。本頁是多色方案。

如何使用

  1. 填底色 HEX（或取色 / 色盤）。選配色關係和風格，再點產生。隨機會先換一顆底色。
  2. 鎖定色塊後，下次產生會留下它、重配其餘。2–8 顆。加入顏色把目前 HEX 追加到末尾。× 刪除（不能少於 2）。箭頭換序。
  3. 色塊上的 HEX 可改。復原 / 重做走最近 40 步。色相 / 飽和度 / 明度滑桿同時挪未鎖定的顏色。
  4. 晶片和複製結果複製 HEX 列表。另有 CSS 變數和 JSON。下載 PDF 用 HEX 標註色塊。
  5. 對比度表是每對的 WCAG 比值，≥4.5 標 AA。正文疊在背景上的完整檢查在顏色轉換。色盲預覽只改色帶顯示（Protanopia、Deuteranopia、Tritanopia）。

配色、風格和邊界

色相按 HSL 算。#3B82F6 的 H 約 217°，互補大約 37°。粉彩降低 S、提高 L；鮮豔提高 S；低飽和降低 S；大地色中等 S、偏低 L。空著產生用 #3B82F6。超過 8 顆會提示。PDF 標註保持 HEX，內建字體蓋不住所有文字。資料不上傳，沒有帳號，也沒有 AI 輸入框。

用在哪裡

  • 品牌或介面 token：主色、強調、底、字色。
  • 先看兩顆色過不過 AA，再決定正文色。
  • 把 PDF 或 :root 變數交給同事。

常見問題

和加白 / 加黑一樣嗎？

不一樣。加白加黑是一顆 HEX 往白或黑混。本頁是在色輪上放幾顆不同色相。

隨機還會保留鎖定嗎？

會。鎖定留下，未鎖定的被換掉。

色盲預覽能當診斷嗎？

不能。只是粗略的 RGB 矩陣預覽，不是醫學模擬。

相關工具

加白加黑：加白 / 加黑。對比度：顏色轉換。216 色表：Web 安全色。