🎨
顏色轉換器
Live Preview在 HEX、RGB、HSL 顏色格式之間轉換。
Supports #hex, rgb(r,g,b), hsl(h,s,l)
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSV
hsv(217, 76%, 96%)
色彩模型詳解（HEX/RGB/HSL）
色彩模型是表示顏色的數學系統。HEX（十六進位）是HTML和CSS中使用的6位代碼，表示紅、綠、藍三個分量。RGB（紅、綠、藍）在數位成像中常用，每個通道使用0到255的十進位值。
HSL（色相、飽和度、亮度）對人類更直覺，因為它以基本顏色（色相）、強度（飽和度）和亮度來描述顏色。了解這些模型有助於為您的設計和開發需求選擇正確的格式，確保在不同平台和裝置之間保持一致性。
如何使用此工具
- 在飽和度/亮度方塊中拖動游標並使用色相滑桿，透過視覺化色彩選擇器選擇顏色。
- 或者，在「手動輸入」欄位中輸入特定值（支援#hex、rgb或hsl格式）。
- 觀察「預覽」方塊以即時查看所選顏色。
- 在下方的HEX、RGB、HSL和HSV卡片中查看轉換後的值。
- 點擊任意卡片上的「複製」圖示將該特定格式儲存到剪貼簿。
常見使用情境
- 網頁設計：將設計工具中的顏色（通常為RGB/HSL）轉換為CSS樣式表中使用的HEX代碼。
- 品牌一致性：確保您的品牌顏色在不同數位格式和媒體中準確呈現。
- UI開發：透過調整HSL中的亮度值，快速產生基礎顏色的較淺或較深變體。
- 無障礙測試：使用預覽檢查所選顏色是否為可讀文字和UI元素提供了足夠的對比度。
專業技巧
- 設計按鈕等UI元件時使用HSL，因為只需調整亮度值即可輕鬆建立懸停狀態。
- 在CSS中使用透明度時，優先使用
rgba()或hsla()以獲得更好的可讀性和對alpha通道的控制。 - 始終檢查色彩對比度，以確保您的設計對有視覺障礙的使用者是無障礙的。