顏色選擇器
HEX: #0070f3
RGB: rgb(0, 112, 243)
HSL: hsl(212, 100%, 48%)
預覽文字
這個工具是什麼?
我們的顏色選擇器讓您以視覺方式或輸入特定值選取任何顏色,然後立即查看其在 HEX、RGB 和 HSL 格式的等效值。您還可以探索顏色的明度變化,並一鍵複製任何格式。這是設計師、開發人員和任何在數位媒體中使用顏色的人的必備工具。
使用方法
- 點擊色彩光譜上的任何位置以選取顏色。
- 拖動色相滑桿以更改基本顏色。
- 調整亮度/飽和度滑桿以進行精細控制。
- 或直接在輸入欄位中輸入特定的 HEX、RGB 或 HSL 值。
- 點擊任何顏色代碼將其複製到剪貼簿。
常見用途
- 在設計稿中找到您看到的顏色的 HEX 代碼
- 將 RGB 顏色值轉換為 HEX 以用於 CSS
- 探索品牌調色盤的顏色變化
- 在建立或設計網頁時檢查顏色代碼值
使用技巧
- 使用 HEX 輸入欄位輸入已知顏色代碼,立即查看其 RGB 和 HSL 等效值。
- HSL 對設計師通常更直觀——色相(0-360)、飽和度和明度相互獨立。
- 如果瀏覽器在選取時更新網址列,請將特定顏色的網址加入書籤。
常見問題
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 代碼 · 設計工具 · 顏色選擇 · 顏色轉換器 · 顏色代碼 · 配色方案 · 顏色產生器 · 顏色實用工具 · 顏色選擇器線上 · 顏色選擇工具 · 顏色對比 · 顏色對比檢查 · 顏色對比工具 · 顏色對比度 · 顏色對比計算器