顏色搭配生成器
給一個基準色，同一屏拿到說得清的配色方案 + 它的深淺梯度，點一下就能複製走。
支援 #RGB、#RRGGBB、rgb()、hsl() 與英文 CSS 顏色名；留空用預設 #4F46E5。
配色方案
明度梯度色相與飽和度和基準色相同，明度取 88 / 70 / 52 / 34 / 18%
怎麼用
- 頁面開啟時，預設的 #4F46E5 已經算好一套方案並排出了深淺梯度——第一個結果不用點任何按鈕。
- 換成你自己的主色：貼上 #4F46E5、rgb(79, 70, 229)、hsl(243, 75%, 59%) 或英文 CSS 顏色名，或用系統拾色器選一次，或點「隨機基準色」。改一個字元就即時重算整屏。
- 規則決定色相之間的關係：類似色（0°、±30°、±60°）最穩；互補色（0°、180°）最強對比；三角對立（0°、120°、240°）與矩形四色（0°、90°、180°、270°）拉開跨度；分裂互補（0°、150°、210°）保留張力但不硬碰。下面那行始終是基準色在 88 / 70 / 52 / 34 / 18% 明度上的五檔，"主色的淺一檔 / 深一檔"點一下就拿到。
- 點任意色塊按當前格式複製它的值；「複製 CSS」把整套輸出成 :root 自定義屬性，「複製色值」逐行給出色值。
示例
設定
基準色 #4F46E5 · 規則「類似色」· 格式 HEX
結果（每臺裝置都一致）
方案：#46DCE5 #468CE5 #4F46E5 #9F46E5 #E546DC 梯度：#CCC9F7 #7F79EC #3328E1 #1D1598 #0F0B50
背景管理系統定主色時，這套結果是確定的：同一個基準色加同一個規則，在任何裝置、任何語言下得到同樣的值，所以你可以核對形態——方案裡每一枚的飽和度與明度和基準色完全相同，只有色相在動（這裡是 30° 一檔）；梯度五枚共用基準色的色相與飽和度，明度依次是 88、70、52、34、18%。色塊上印的色值是黑字還是白字也不是隨機的，工具按對比度挑讀得清的那一種。
範圍、侷限與常見疑問
- 只有 5 條規則，沒有自定義角度、沒有色輪：要精確控色相，請改基準色或用顏色轉換工具。
- 梯度用的是固定明度檔（88 / 70 / 52 / 34 / 18%），不是"在你的顏色基礎上向白/黑各推 25%"。好處是不同基準色得到同一把可比較的梯子；代價是本來就很淺或很深的基準色，梯度檔看起來差別不大。
- 灰、白、黑做基準色時，方案幾枚會完全相同：飽和度為 0 時轉色相不產生任何變化。這是算術本身如此，不是 bug。
- 只出不透明色：沒有 alpha、沒有 rgba()、沒有 8 位 HEX。透明度請交給顏色轉換工具。
- 只有 sRGB 螢幕值：不做 CMYK、Lab 與色彩管理——同一個 HEX 在未校準的螢幕上本來就不一樣，本工具不假裝相反。
- 對比度只用來決定色塊上的色值印黑字還是白字，不輸出對比度比值；做無障礙檢查請用顏色轉換工具。
- 幾何規則保證的是色相關係，不是審美結論：高飽和的互補組合依然可能刺眼——那正是這條規則的含義。
- 「隨機基準色」取自瀏覽器的 crypto.getRandomValues：密碼學強度，但不是物理熵源；環境沒有該能力時這個按鈕停用，其餘路徑照常可用。
- 不上傳、不儲存、不進 URL：重新整理頁面就回到 #4F46E5 + 類似色 + HEX，分享按鈕分享的也只是頁面連結。要帶走方案請用「複製 CSS」。
- 接受英文 CSS 顏色名是因為它屬於 CSS 語法；本工具不輸出任何語言的色名——同一個顏色在中文或阿拉伯語裡都沒有標準譯名可印。
- 舍入只發生在顯示層：通道都是整數，同一顏色在 HEX 與 HSL 之間往返可能偏移 1。
相關工具
方案定下來之後，通常會接著做的事。