顏色選擇器
選取任何顏色，即可取得各種常用格式的色碼，直接複製使用。產生相配的配色組合，不必上傳就能擷取照片中的主要顏色，還能測試文字與背景的搭配是否符合 WCAG 對比度標準。
網頁選色器
各種格式的色碼
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK（近似值）80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
由此顏色產生的配色
互補色
相似色
三色配色
淺色調（混入白色）
深色調（混入黑色）
從圖片擷取配色
您的圖片由您自己的瀏覽器讀取，不會上傳：像素是在這台裝置的畫布上取樣，不會傳送到任何地方。
將照片、螢幕截圖或標誌拖放到這裡
圖片的六種主要顏色會顯示在這裡。點選色票即可載入選色器。
對比度檢查器（WCAG 2.1）
大型文字範例
The quick brown fox jumps over the lazy dog. 0123456789
- AA · 一般文字通過
- AAA · 一般文字通過
- AA · 大型文字通過
- AAA · 大型文字通過
大型文字指至少 18 pt（24 px）的一般字體，或 14 pt（約 18.7 px）的粗體。AA 要求一般文字達 4.5:1、大型文字達 3:1；AAA 則要求 7:1 和 4.5:1。
常用 CSS 命名顏色
每個瀏覽器都看得懂的二十個關鍵字，附上精確的 HEX、RGB 和 HSL 值。
| 名稱 | HEX | RGB | HSL |
|---|---|---|---|
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
HEX、RGB、HSL 與 HSB 分別代表什麼
本頁的所有顏色都使用 sRGB，這是自 1990 年代後期瀏覽器採用以來，網頁預設的色彩空間。螢幕以紅、綠、藍三色光混合顯示，每個色版有 256 個階層（0–255），共可組成 16,777,216 種顏色。RGB 直接寫出這三個數字；HEX 則以十六進位寫出同樣的三個數字，每個數字兩位，因此 #FF6600 代表紅 255、綠 102、藍 0。三位數縮寫會將每個數字重複一次：#F60 就是 #FF6600。
HSL 與 HSB（也稱為 HSV）以較容易手動調整的方式描述相同的顏色。色相是色環上的角度：0° 為紅色、120° 為綠色、240° 為藍色。差別在最後一個數值。在 HSL 中，亮度 100% 一律是白色，50% 才是該色相最純的版本；在 HSB 中，明度 100% 就是純色相，要得到白色則需要飽和度 0%。Photoshop 和 Figma 等設計軟體的檢色器使用 HSB，而 CSS 原生支援 hsl()，所以上方兩種都有列出。
為什麼 CMYK 數值只是近似值
螢幕是加入光線，印表機則以青、洋紅、黃、黑四色墨水來減去光線。這兩種系統涵蓋的顏色範圍不同，稱為色域。飽和度很高的螢幕顏色，例如鮮豔的 RGB 綠色、電光藍或螢光橘，超出一般印刷油墨能重現的範圍，因此印出來會比在螢幕上看起來更暗淡。
這裡的 CMYK 數值採用不含 ICC 色彩描述檔的單純數學轉換，用來粗略估算尚可，但不適合正式印刷。印刷廠會依紙張與印刷機使用對應的描述檔進行轉換，例如歐洲的 FOGRA39 或美國的 GRACoL，同一個 RGB 顏色在不同描述檔下得出的油墨百分比可能不同。印刷作業請將 RGB 或 HEX 值連同印刷廠要求的描述檔一併提供。
對比度是怎麼計算的
WCAG 2.1 比較兩種顏色的相對亮度：較亮者加 0.05，除以較暗者加 0.05。結果介於 1:1（相同顏色）到 21:1（白底黑字）之間。AA 等級要求一般文字至少 4.5:1，大型文字至少 3:1，大型文字指 18 點或 14 點粗體；AAA 等級則提高為 7:1 和 4.5:1。依成功準則 1.4.11，輸入框邊框與圖示等使用者介面元件，與周圍背景的對比需達 3:1。
亮度計算中綠色的權重遠高於藍色，因為人眼對綠色最敏感。這就是為什麼白底黃字很難閱讀，而白底深藍字卻輕鬆通過，即使兩種顏色看起來都很飽和。標誌與純裝飾性文字不受此規則限制。
從照片或標誌擷取配色
圖片調色盤會透過瀏覽器的 canvas 讀取你的檔案，將長邊縮小到最多 200 像素，並以 Paul Heckbert 在 1982 年提出的中位切分法將相近的像素分組：沿著範圍最寬的色版不斷切分色彩範圍，直到剩下六組，每組的平均值就成為一個色票。透明像素會被忽略，因此透明背景上的標誌會得出標誌本身的顏色。
取得顏色後，扁平的標誌通常更適合做成向量圖。圖片轉 SVG 會將它描繪成形狀，並保留這些確切的顏色；如果你正在設計頻道頁首，YouTube 橫幅尺寸調整 會考量安全區域，將作品調整為 2560 × 1440。
常見問題
- 為什麼 CSS 的「green」比 RGB 選擇器裡的綠色還暗？
- 關鍵字 green 是 #008000，這是沿用舊版 16 色 HTML 色盤的中等綠色。完全飽和的 #00FF00 則稱為 lime。完整的 CSS 色彩清單還有類似的意外：gray（#808080）比 darkgray（#A9A9A9）還要深。
- 擷取配色時，我的圖片會被上傳嗎？
- 不會。檔案由你的瀏覽器開啟，在記憶體中繪製到 canvas 上進行分析。過程中不會傳送任何含有圖片的請求，關閉分頁後圖片就會被捨棄。
- 內文文字需要多少對比度？
- 要符合 WCAG 2.1 的 AA 等級，至少需要 4.5:1；AAA 等級則需要 7:1。18 點以上或 14 點粗體的標題，AA 等級可使用 3:1。許多設計系統會統一以 4.5:1 為目標，讓文字在較暗的螢幕與陽光下仍然清晰易讀。
- 可以使用含透明度的 8 位數 HEX 色碼嗎？
- 可以，在 CSS 中可行。最後兩位數是透明度（alpha）色版，所以 #2F6FED80 就是相同的藍色，不透明度約 50%。這個檢色器處理的是不透明的顏色，因此顯示六位數；需要時請自行加上透明度的兩位數。
- CSS 有多少個具名顏色？
- CSS Color Module Level 4 定義了 148 個顏色關鍵字，其中包含 gray 與 grey 這類重複拼法。最新的是 rebeccapurple（#663399），於 2014 年加入，用來紀念 Rebecca Meyer，她是 CSS 作者 Eric Meyer 的女兒。