顏色轉換器
輸入HEX、RGB或HSL格式的顏色值，即時轉換為所有其他格式。所有處理均在瀏覽器中本地完成。
輸入 HEX (#rrggbb)、RGB (rgb(r,g,b)) 或 HSL (hsl(h,s%,l%))——或使用選色器。
已複製！
與純色背景的對比度
在白底上
在黑底上
關於顏色格式
- HEX -
#rrggbb，最常見的 CSS 顏色格式。 - RGB -
rgb(r, g, b)，每個通道 0-255。 - HSL -
hsl(h, s%, l%)，色相 0-360°，飽和度和亮度 0-100%。
凡是瀏覽器認得的寫法都收，包括 rebeccapurple 這樣的名稱、帶 alpha 的八位十六進位，以及當前 CSS 那種用空格分隔、alpha 前加斜線的形式。對比度數字依照 WCAG 的相對亮度公式，所以 4.5 是 AA 級內文文字的門檻，7 是 AAA 級的門檻。這些數字按不透明的顏色計算，因為半透明的顏色在你知道它背後是什麼之前，並沒有固定的對比度。
標記老是跟你作對？
被跳脫的實體、壞掉的編碼，以及在 CMS 裡是一個樣、在頁面上又是另一個樣的內容，通常說明流程中有一環在靠猜。我們做前端，也做它背後的發布鏈路，讓訪客看到的就是你寫下的。
聊聊你的網站常見問題
我可以貼進哪些顏色寫法？
三位、四位、六位或八位的十六進位，rgb 和 rgba，hsl 和 hsla，hwb，以及任何 CSS 顏色名。逗號寫法和現代那種用空格分隔、alpha 前加斜線的寫法都收，所以你可以直接從樣式表裡貼過來。
透明度是怎麼處理的？
alpha 通道會在轉換中保留下來，所以八位十六進位會以 rgba 的形式回來，預覽背後還會顯示棋盤格。只有當 alpha 確實不是完全不透明時才會寫進輸出，除非你選擇始終顯示。
對比度那幾個數字是什麼意思？
是這個顏色與純白或純黑背景之間的 WCAG 對比度。一般內文文字要達到 4.5 才算過 AA 級，達到 7 才算過 AAA 級；大號文字的門檻更低。低於 3 的話，無論多大字級，大多數人都讀得吃力。
為什麼算對比度時不算 alpha？
因為半透明的顏色沒有固定的對比度。讀者實際看到的取決於它背後是什麼，所以這些數字按不透明的顏色算。如果你的文字確實是半透明的，請先算出混合後的顏色，再拿那個去檢查。
HSL 和 HWB 有什麼區別？
兩者都從同一個色相角出發。HSL 用飽和度和亮度來描述一個顏色，這也是多數工具給你的那一對。HWB 則用摻了多少白、多少黑來描述，更接近人調顏料的直覺，在搭一套深淺色階時也更好推。