顏色選擇器

HEX: #0070f3
RGB: rgb(0, 112, 243)
HSL: hsl(212, 100%, 48%)
預覽文字

這個工具是什麼?

我們的顏色選擇器讓您以視覺方式或輸入特定值選取任何顏色,然後立即查看其在 HEX、RGB 和 HSL 格式的等效值。您還可以探索顏色的明度變化,並一鍵複製任何格式。這是設計師、開發人員和任何在數位媒體中使用顏色的人的必備工具。

使用方法

  1. 點擊色彩光譜上的任何位置以選取顏色。
  2. 拖動色相滑桿以更改基本顏色。
  3. 調整亮度/飽和度滑桿以進行精細控制。
  4. 或直接在輸入欄位中輸入特定的 HEX、RGB 或 HSL 值。
  5. 點擊任何顏色代碼將其複製到剪貼簿。

常見用途

使用技巧

常見問題

HEX、RGB 和 HSL 顏色格式有什麼區別?

HEX 和 RGB 都通過其紅、綠和藍成分描述顏色(僅符號不同),而 HSL 通過色相、飽和度和明度描述——許多設計師發現對於獨立調整顏色亮度或鮮豔度更直觀。

我如何找到設計稿中我看到的顏色的確切 HEX 代碼?

使用顏色光譜或在輸入欄位中輸入已知的 RGB/HSL 值——工具會立即轉換並顯示等效的 HEX 代碼。

我可以直接複製顏色代碼以在 CSS 中使用嗎?

是的。點擊任何顯示的顏色代碼(HEX、RGB 或 HSL)將其複製到剪貼簿,準備直接貼入樣式表。

該工具是否支援 Alpha 透明度值?

如果輸出中有 RGBA 或 HSLA 格式,您可以捕捉透明度以及顏色;檢查標準 RGB/HSL 欄位旁的格式選項。

我的顏色選擇是否傳送到伺服器?

不會。所有顏色轉換數學在您的瀏覽器中本地執行——沒有顏色值被傳送或記錄到任何地方。

選擇顏色並取得 HEX、RGB、HSL 代碼,支援配色方案與對比度檢查。

顏色選擇器 · 顏色工具 · 配色方案 · HEX 代碼 · RGB 代碼 · HSL 代碼 · 設計工具 · 顏色選擇 · 顏色轉換器 · 顏色代碼 · 配色方案 · 顏色產生器 · 顏色實用工具 · 顏色選擇器線上 · 顏色選擇工具 · 顏色對比 · 顏色對比檢查 · 顏色對比工具 · 顏色對比度 · 顏色對比計算器