你在 HEX 格式中找到了完美的顏色，但你使用的設計工具需要 RGB 格式。或者客戶用 RGB 傳送了一種顏色，而你需要 CSS 的 HSL 值。色彩格式轉換是設計師和開發者的日常任務。我們的 色彩轉換器 讓它變得即時完成。
你需要什麼
- 任何格式的顏色值（HEX、RGB、HSL 或其他）
- 網頁瀏覽器（Chrome、Firefox、Safari 或 Edge）
- 不需要帳號或安裝
逐步指南
輸入你的顏色值
開啟 色彩轉換器 工具。以任何支援的格式輸入或貼上你的顏色值。例如，輸入 #3B82F6 作為 HEX 值，rgb(59, 130, 246) 作為 RGB，或 hsl(217, 91%, 60%) 作為 HSL。工具會自動識別格式。
查看所有格式轉換
工具即時顯示你的顏色在每種支援格式下的表示：HEX、RGB、HSL 等。你可以看到顏色的即時預覽，以及所有等效值。如果你需要調整顏色，使用顏色選擇器進行視覺微調。
複製你需要的格式
點擊任意格式旁邊的複製按鈕，將值複製到剪貼簿。直接貼上到你的 CSS 檔案、設計工具或任何你需要的地方。不需要手動重新輸入。
注意事項 色彩轉換器完全在你的瀏覽器中執行。載入後可以離線使用，不需要帳號或安裝。
了解色彩格式
不同的工具和情境使用不同的色彩格式。以下是各種格式的使用時機：
HEX
網頁上最常用的格式。HEX 顏色以 # 開頭，後跟六個字元（字母和數字），如 #FF5733。
- 使用於：CSS、HTML、設計工具（Figma、Sketch、Photoshop）
- 格式：
#RRGGBB，每對是從 00 到 FF 的十六進位值 - 範例：
#3B82F6（中藍色）
RGB
使用其紅色、綠色和藍色分量來描述顏色，每個分量範圍從 0 到 255。
- 使用於：CSS（
rgb()函數）、程式語言、LED 照明 - 格式：
rgb(紅, 綠, 藍) - 範例：
rgb(59, 130, 246)
HSL
使用色相（色輪上 0-360 度）、飽和度（0-100%）和亮度（0-100%）來描述顏色。
- 使用於：CSS（
hsl()函數）、色彩理論、設計系統 - 格式：
hsl(色相, 飽和度%, 亮度%) - 範例：
hsl(217, 91%, 60%)
提示 HSL 是調整顏色最直觀的格式。想要更淺的色調？增加亮度值。想要更柔和的色調？降低飽和度。這使 HSL 非常適合建立色彩系統和為基礎色建立變體。
何時使用哪種格式
| 情況 | 建議格式 |
|---|---|
| 手動撰寫 CSS | HEX（簡短且熟悉）或 HSL（易於調整） |
| 設計工具規格 | HEX（行業標準） |
| 程式碼中的動態色彩操作 | HSL（最容易以程式方式調整） |
| 向客戶傳達顏色 | HEX（最廣為人知） |
| 平面設計 | CMYK（與螢幕格式分開） |
超越單一顏色
轉換顏色後，你可能想探索相關工具：
- 漸層生成器：使用你的顏色建立流暢的 CSS 漸層。輸入兩種或多種顏色，獲得可直接貼入樣式表的漸層代碼。
- 色彩調色盤生成器：基於你的起始顏色生成和諧的色彩調色盤。自動獲得互補色、類似色、三元色和其他配色方案。
這些工具與色彩轉換器協作，幫助你為你的專案建立完整的色彩系統。
重要 由於顯示器校準、色彩設定檔和亮度設定不同，顏色在不同螢幕上可能看起來不同。當色彩準確性至關重要時（品牌、平面設計），始終在目標媒介上驗證你的顏色，而不只是在你的螢幕上。
常見問題
HEX 和 RGB 有什麼區別？
它們用不同的符號表示相同的資訊。HEX 使用十六進位（16 進位），RGB 使用十進位（10 進位）。#FF0000 和 rgb(255, 0, 0) 都是純紅色。
我可以轉換為用於列印的 CMYK 嗎？ 螢幕色彩格式（HEX、RGB、HSL）和列印格式（CMYK）是根本上不同的色彩模型。數學轉換是存在的，但對於精確的列印顏色，你應該使用專業的色彩管理工具。
透明度（alpha）呢？
HEX 支援帶有額外兩個字元的 alpha（#3B82F680）。RGB 和 HSL 以 rgba() 和 hsla() 函數形式支援它。色彩轉換器也處理這些格式。