顏色格式轉換
貼上任何 CSS 格式的顏色，就能取得其他所有格式和對比度。
貼上 HEX、rgb()、hsl()、hwb() 或 CSS 顏色名稱，或挑選一個顏色
淺色與深色
數值
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- 僅為近似值。印刷色彩取決於油墨和紙張，請向印刷廠索取確切數值。
- OKLCH
- oklch(52.35% 0.1965 267.75)
- 最接近的 CSS 名稱
- royalblue
對比度（WCAG）
這個顏色的文字在各種背景上的效果。一般文字需要 4.5:1 才達 AA、7:1 才達 AAA；大字（18pt，或 14pt 粗體）需要 3:1 和 4.5:1。
白色背景
大字
敏捷的棕色狐狸跳過了懶惰的狗
5.71:1
- AA 一般 通過
- AAA 一般 未通過
- AA 大字 通過
- AAA 大字 通過
黑色背景
大字
敏捷的棕色狐狸跳過了懶惰的狗
3.68:1
- AA 一般 未通過
- AAA 一般 未通過
- AA 大字 通過
- AAA 大字 未通過
#ffffff 背景
大字
敏捷的棕色狐狸跳過了懶惰的狗
5.71:1
- AA 一般 通過
- AAA 一般 未通過
- AA 大字 通過
- AAA 大字 通過
如何使用 色碼轉換器
輸入顏色
貼上 HEX 色碼、rgb()、hsl()、hwb() 或 tomato 這類名稱，或用取色器挑選。
複製需要的格式
輸入時所有格式都會即時更新。用各自的按鈕複製任何格式，或為大的複製按鈕設定常用格式。
檢查對比度
查看在白色、黑色和你所選背景上的 WCAG 對比度，以及一般文字和大字的 AA 與 AAA 結果。
為什麼選擇 Utils365
讀得懂任何 CSS 顏色
3、4、6 和 8 位數 HEX，舊逗號語法或新空格語法的 rgb() 和 hsl()、hwb()、百分比、色相單位，以及全部 148 個顏色名稱。
也支援現代格式
取得用於設計系統和廣色域 CSS 的 OKLCH、用於取色器的 HWB 和 HSV，以及用於半透明顏色的含透明度 HEX。
內建無障礙檢查
對比度完全依照 WCAG 2 計算，絕不會四捨五入成通過，所以 4.49:1 不會被當成 4.5:1。
淺色與深色
色塊下方有五階更淺和五階更深的顏色。點一下即可設為目前顏色。
常見問題
HEX 和 RGB 有什麼不同？
顏色本身沒有不同。兩者都以 0 到 255 表示紅、綠、藍。HEX 將每個值寫成兩位十六進位數字，所以 rgb(58, 91, 217) 就是 #3a5bd9。HEX 比較短，rgb() 則比較容易閱讀和手動調整。
什麼是 HSL？
色相、飽和度和亮度。色相是色輪上的位置，以度表示（0 是紅色、120 是綠色、240 是藍色），飽和度代表鮮豔程度，亮度則從 0% 的黑色到 100% 的白色。用它很容易寫出某個顏色更淺、更深或更柔和的版本。
為什麼 CMYK 和印出來的顏色不一樣？
螢幕混合的是光，印表機混合的是油墨，結果取決於油墨、紙張和印表機設定檔。這裡顯示的 CMYK 使用簡單的標準公式，請當作起點參考，並向印刷廠索取確切數值。
什麼是 WCAG 對比度？
衡量兩種顏色亮度差距的指標，從 1:1（相同）到 21:1（白底黑字）。WCAG AA 要求一般文字至少 4.5:1、大字至少 3:1；AAA 要求 7:1 和 4.5:1。
什麼是 OKLCH？
一種較新的 CSS 顏色寫法，以亮度、彩度和色相表示，依據人眼對顏色的感知設計。調整亮度時色相看起來維持不變，因此在設計系統和色階中很受歡迎。
顏色名稱是怎麼來的？
如果顏色與 148 個 CSS 顏色名稱之一完全相符，就會顯示該名稱。否則會顯示外觀最接近的名稱，方便用文字描述顏色。