色彩選擇器與調色盤產生器

螢幕上的每種顏色都能用三種方式描述，而這個工具會讓它們同步更新：HEX 是 CSS 與設計工具常用的簡寫；RGB 描述紅、綠、藍三種光如何混合出這個顏色；HSL（色相、飽和度、明度）則貼近人們實際理解顏色的方式：它是什麼色調、有多鮮豔、偏亮還是偏暗。你可以拖曳原生的色票、輸入 HEX 色碼，或直接調整任何 R/G/B 或 H/S/L 欄位，其他欄位都會立刻跟著更新，不必自己動手換算，就能用最習慣的方式思考顏色。

色相環是六種經典配色法則的基礎，這些配色都會依你選的基準色自動產生。互補色是把一個顏色與它正對面的顏色配成一組，對比最強烈；相似色選取色相環上相鄰的顏色，看起來平靜且協調；三角配色與四角配色則在色相環上等距取三或四個顏色，活潑又不失平衡；分裂互補色用對面兩側的相鄰色，取代正對面的那個顏色，讓互補配色更柔和；單色系則只用同一個色相，只改變明度，對於需要用同一個品牌色呈現多種深淺的介面來說，通常是最穩當的選擇。

不是每個好看的調色盤都得從色彩理論開始，有時你只是想看看會冒出什麼顏色。隨機調色盤產生器（按空白鍵，或點擊「產生」）一次會產生五種顏色，色相與明度都經過調整，避免出現混濁或過於粉嫩的結果。點擊任一色票上的鎖頭圖示即可保留該顏色，再次產生時只有未鎖定的顏色會改變，因此你可以像 Coolors 這類工具一樣逐步建立調色盤。點擊任一色票可複製其 HEX 色碼，也可以用調色盤下方的按鈕，將整組顏色複製為 CSS 自訂屬性、SCSS 變數、Tailwind 設定片段或 JSON 陣列，或匯出可供 Illustrator 與 Photoshop 使用的 Adobe .ase 色票檔。你還能從任何圖片擷取調色盤（在本機處理，不會上傳），並把喜歡的調色盤儲存在瀏覽器中供日後使用。

挑到好看的顏色，不代表它好用。文字顏色與背景的明度太接近時可能難以閱讀，網頁內容無障礙指引（WCAG）對此訂有明確門檻：一般文字的對比度至少要達 4.5:1 才符合 AA 等級，達 7:1 才符合更嚴格的 AAA 等級。對比度檢查會使用 WCAG 規範定義的相對亮度公式，計算你所選顏色與白色、黑色文字之間的精確對比度，並標示各種組合是否通過，讓你在上線之前，而不是之後，就能發現對比度偏低的按鈕或標題。