顏色轉換器

🎨 Color Converter

📐 工作原理與說明
在 RGB、HEX、HSL、HSV、CMYK 等顏色模型之間互轉。
  • RGB/HEX:三通道 0–255,HEX 寫作 #RRGGBB,#RGB 為簡寫形式。
  • HSL 與 HSV:HSL 的 L 在 100% 時為純白,HSV 的 V 在 100% 時為純色,二者不可混用。
  • CMYK:印刷四色,色域小於螢幕 RGB,轉換後會有可見色差。
  • 用途:設計稿取色、主題色推導、對比度校驗(WCAG 無障礙)。
顏色轉換
調色盤
對比度
常用顏色
歷史記錄

Convert colors between HEX, RGB, HSL and more in your browser — with a live picker and copy buttons.

All format values and WCAG contrast results can be exported as CSV
選擇基色生成調色盤

互補色

類似色

三角色

分離互補色

單色調色盤

Aa 示例文字
4.5:1
AA 級通過
✓
WCAG AA (4.5:1)
✗
WCAG AAA (7:1)
✓
大文本 AA (3:1)
✓
大文本 AAA (4.5:1)

Web 安全色

📖 顏色知識

RGB
紅綠藍
CMYK
印刷四色
HSL
色相飽和度明度
HEX
十六進位制

📚 深度解析:顏色轉換器

💡 常見使用場景

  • HEX/RGB/HSL 互轉做配色。
  • 生成配色方案:把主色轉成 HSL 後只調 L 得到淺色 hover 態與深色 active 態,保持色相一致,比反覆試 HEX 高效。
轉換
#3498db → rgb(52,152,219) → hsl(204,70%,41%)。

❓ 常見問題(FAQ)

HSL 選色優勢?
用色相/飽和/亮度更直觀調色。
為什麼要考慮對比度?
顏色搭配不只是好看,還要可讀。WCAG 要求正文文字與背景的對比度不低於 4.5:1,大字號不低於 3:1。轉換時可按相對亮度公式算出對比度,避免淺色底配淺色字導致部分使用者看不清。
⚠️ 使用說明與注意事項
📖關於「顏色轉換器」 ▼

📝工具簡介

顏色轉換器是一款IT 開發領域的線上工具。專為開發者打造的線上工具,純前端執行,程式碼不離開瀏覽器。