Color Converter
HEX RGB HSL conversion
HEX RGB HSL conversion 在您的瀏覽器中本地執行
#2563eb
rgb(37, 99, 235)
hsl(221, 83%, 53%)
About the
顏色轉換器可在 HEX、RGB、HSL 和 HSV 之間轉換單一顏色,並顯示 WCAG 與黑白的對比度,以便您可以立即檢視該顏色的文本是否可讀。 HEX 和 RGB 是您在工具之間複製的格式,但 HSL 是對設計工作真正有用的格式:它將色調與亮度分開,因此您可以生成保持相同色調的色調或陰影,而不是像簡單的 RGB 數學那樣向灰色漂移。八位元十六進位和 RGBA 值帶有 Alpha 通道,轉換器也可以處理這些值。
Where people use the
- 將品牌十六進位值轉換為設計工具期望的 RGB 語法。
- 使用 HSL 從一個品牌色調產生一組一致的色調。
- 檢查連結顏色在深色背景上是否可讀。
- 將從螢幕截圖中選取的顏色與最接近的十六進位值相符。
How to use the
- 1
以任意格式輸入顏色
貼上十六進位值(例如 2f6fed)、rgb 或 hsl 函式,或使用選擇器。其他格式會隨著您的鍵入而更新。
- 2
一次閱讀所有陳述
Hex、RGB、HSL 和 HSV 與分離出的 alpha 通道一起顯示。
- 3
檢查對比度
黑白比例告訴您該顏色是否可用作文字顏色或背景。正文文字需要 4.5 比 1,大文字和介面邊框需要 3 比 1。
- 4
複製您的程式碼所需的表格
每個欄位都有自己的複製按鈕,因此您可以獲得樣式表所需的準確語法,而不是手動重新格式化。
提示和最佳實踐
- 在HSL中調整亮度,而不是在RGB中新增白色或黑色;色調保持不變。
- 以實際使用的文字的最小尺寸(而不是標題尺寸)測試對比。
- 保留包含五個或六個值的記錄調色盤,而不是為每個元件發明一個新的調色盤。
常見問題
十六進位顏色如何轉換為 RGB?
每對十六進位制數字都是一個通道,讀作基數 16。在 2f6fed 中,2f 是 47 紅色,6f 是 111 綠色,ed 是 237 藍色。像 f0a 這樣的三位數簡寫將每個數字加倍,因此變成 ff00aa。
為什麼 HSL 亮度與感知亮度不同?
因為眼睛對綠色的敏感度遠高於對藍色的敏感度。純藍色和純黃色可以共享亮度值,而黃色看起來更亮。這就是為什麼對比度必須用亮度公式來測量,而不是根據 HSL 值來判斷。
十六進位制顏色的第四對數字是什麼意思?
Alpha,從 00 完全透明到 ff 完全不透明。目前所有瀏覽器都支援八位十六進位制,它是 rgba 的十六進位等效項。
CMYK 轉換對於列印準確嗎?
不可以,任何瀏覽器工具都不能。 CMYK 取決於墨水、紙張和印表機設定檔。使用此值作為起點,並透過列印供應商的 ICC 配置檔案轉換任何重要的內容。
如何為彩色背景選擇可讀文字?
比較文字顏色和背景之間的對比。如果黑色和白色都沒有達到 4.5 比 1,則背景對於正文而言過於飽和,需要在用於副本後面之前將其變暗或變亮。
為什麼相同的十六進位制在兩個螢幕上看起來不同?
因為顯示器的色域、校準和亮度有所不同。廣色域螢幕顯示標準 sRGB 面板無法重現的飽和色彩。除非您有特定原因不這樣做,否則請使用 sRGB。