隨機工具 / 007

隨機顏色產生器

隨機或自訂一個基準色，產生互補色、相似色等六種配色，逐色檢查白字與黑字的 WCAG 對比度，並輸出 CSS 變數。

鎖定基準色

HEX 格式

#808080

RGB 格式

rgb(128, 128, 128)

HSL 格式

hsl(0, 0%, 50%)

配色與文字對比度

配色規則

相鄰 30 度的三色，和諧、不刺眼，適合整體基調。

對比度依 WCAG 2.x 計算：一般文字要 4.5:1 以上才算 AA、7:1 以上算 AAA；24px 以上的大字或 19px 以上粗體只需 3:1。數字捨去到小數第二位，不會因為四捨五入而讓差一點的組合看起來剛好達標。

CSS 變數

:root {
  --color-1: #808080;
  --color-2: #808080;
  --color-3: #808080;
}

抽到一個喜歡的顏色只是起點，接著要的是：和它搭的顏色有哪些、文字放上去看不看得清楚。這個工具在隨機（或輸入）基準色之後，直接算出六種配色規則的色票，並對每一色標出白字與黑字的 WCAG 對比度，最後輸出可以貼進樣式表的 CSS 變數。

按「產生隨機顏色」抽一個基準色，上方色塊是它實際的樣子；已經有喜歡的顏色就在輸入框貼上 HEX（#3478c9 或 3478c9 或三碼縮寫都行）再按「套用」。勾選「鎖定基準色」後，隨機按鈕不會動它，方便只換配色規則比較。

配色是在色相環上算出來的：互補色是正對面（差 180 度）；相似色是左右各 30 度；三等分是 120 度間隔；分裂互補取互補色兩側各 30 度；四角是 90 度間隔；同色系則維持色相、只調整明度。基準色永遠包含在結果裡，飽和度與亮度沿用基準色。

每個色票下面列出它與白字、黑字的對比度，並標出等級：7:1 以上是 AAA、4.5:1 以上是 AA（一般文字的及格線）、3:1 以上只適合大字（24px 以上，或 19px 以上粗體）、不到 3:1 就不適合放文字。等級用文字與符號標示，不只靠顏色。色塊上的色碼已經挑了對比較高的那種字色。

對比度的算法照 WCAG 2.x：把 sRGB 轉成線性亮度再算 (亮的 + 0.05) ÷ (暗的 + 0.05)，最高 21:1。顯示時一律捨去而不四捨五入，所以 4.499 會顯示 4.49 而不是 4.50，避免差一點的組合被誤認為達標。

最下面的 CSS 變數可以整段複製貼進樣式表，變數名稱是 --color-1、--color-2⋯⋯。所有運算都在瀏覽器裡完成，顏色不會被保留或上傳。

HEX、RGB、HSL 有什麼差別？

三者描述的是同一個顏色，只是寫法不同。HEX 是十六進位縮寫，最常用於網頁；RGB 直接給紅綠藍三個 0–255 的值；HSL 則拆成色相、飽和度、亮度，調整明暗與濃淡時最直覺。

對比度要多少才夠？

WCAG 2.x 的 AA 級要求：一般文字至少 4.5:1，大字（24px 以上，或 19px 以上粗體）至少 3:1；更嚴格的 AAA 級是一般文字 7:1、大字 4.5:1。介面元件（例如按鈕外框）至少 3:1。這是無障礙規範的基本門檻，不代表一定好看。

為什麼對比度只算白字和黑字？

這是最常見的情境：色塊當背景，上面放白字或黑字。想檢查其他字色與背景的組合，可以把其中一個顏色輸入為基準色再看它與白或黑的差異，但這個工具不支援任意兩色互比。

配色規則為什麼不改飽和度與亮度？

傳統色相環配色只轉動色相，沿用基準色的飽和度與亮度，讓整組顏色的「濃淡感」一致。同色系是唯一會動明度的規則（前後各兩階，每階 15 與 30 個百分點）。想要更多變化，可以把某個色票的色碼再當成基準色輸入一次。

複製的色碼可以直接貼進 CSS 嗎？

可以。HEX、RGB 與 HSL 都是 CSS 直接支援的標準寫法。「CSS 變數」按鈕複製的是一整段 :root 區塊，變數名稱可以自己改。