HSL調節器
透過滑桿直覺調節色相、飽和度和亮度,可將顏色代碼轉換為HEX、RGB、HSL格式並複製的線上工具。
HSL調節器
顏色輸入與調節
起始顏色
#
原始顏色
#D4AF37
調節結果
#D4AF37
顏色代碼
HSL
hsl(46, 67%, 52%)
HEX
#D4AF37
RGB
rgb(212, 175, 55)
CSS
color: #D4AF37;
歷史
暫無調節記錄
收藏
由於顯示器設定和顏色設定檔的不同，實際顏色可能會略有差異。
什麼是HSL調節器？
HSL調節器是一款線上工具，可讓您使用直覺的滑桿即時調節顏色的色相（Hue）、飽和度（Saturation）和亮度（Lightness）值。輸入HEX或RGB代碼後，它會轉換為HSL，讓您可以單獨微調每個屬性。
您可以在工作時並排比較原始顏色和調節後的顏色，非常適合在設計工作中精確調整顏色。調節後的顏色可以立即以HSL、HEX、RGB格式複製使用。
適用場景
- 建立品牌顏色變體 – 只調節基礎顏色的亮度和飽和度，建立一致的顏色變體
- UI懸停/啟用狀態顏色 – 只調節按鈕或連結基礎顏色的亮度，產生狀態特定的顏色
- 顏色調配 – 保持飽和度和亮度不變，只改變色相，建立和諧的顏色組合
- 改善無障礙性 – 調節現有顏色的亮度以增加對比度
- 顏色探索和實驗 – 在構思階段快速嘗試各種顏色組合
- CSS顏色代碼轉換 – 將HEX代碼轉換為HSL或RGB使用
主要功能
- 直覺的HSL滑桿 – 使用單獨的滑桿調節色相（0-360°）、飽和度（0-100%）和亮度（0-100%），即時查看顏色變化。
- 多種顏色輸入方式 – 直接使用顏色選擇器選擇，或輸入HEX代碼指定起始顏色。
- 原始與結果對比 – 並排顯示原始顏色和調節後的顏色，直覺比較變化。
- 多種代碼輸出 – 同時提供HSL、HEX、RGB、CSS格式的代碼，可立即複製所需格式。
- 歷史自動儲存 – 調節的顏色會自動儲存到歷史記錄，方便回顧以前的工作。
- 收藏儲存 – 將常用顏色儲存到收藏，快速存取。
使用方法
- 選擇起始顏色 – 點擊顏色選擇器或輸入HEX代碼，然後點擊「套用」按鈕。
- 調節HSL值 – 移動色相、飽和度、亮度滑桿建立您想要的顏色。變化會即時反映。
- 查看結果 – 比較原始和調節結果，使用複製按鈕將所需代碼格式複製到剪貼簿。
- 儲存和管理 – 將喜歡的顏色新增到收藏，從歷史記錄中呼叫以前的顏色。
了解HSL顏色模型
HSL是一種以接近人類感知方式來表示顏色的顏色模型：
- 色相（Hue, 0-360°） – 表示在色輪上的位置。0°/360°是紅色，120°是綠色，240°是藍色。
- 飽和度（Saturation, 0-100%） – 表示顏色的鮮豔程度。0%是灰色，100%是完全鮮豔的顏色。
- 亮度（Lightness, 0-100%） – 表示顏色的明暗程度。0%是黑色，50%是純色，100%是白色。
HSL的優勢在於可以在保持色相的同時調節飽和度或亮度。這使得建立同一顏色系列的明亮/暗淡變體變得容易。
常見問題
HSL和RGB有什麼區別？
RGB透過混合光的三原色（紅、綠、藍）來表示顏色，而HSL透過色相、飽和度和亮度來表示。HSL允許直覺調整，如「再亮一點」或「降低飽和度」，更適合設計工作。
色相值是如何決定的？
色相用色輪上的角度（0-360度）表示。0°是紅色，60°是黃色，120°是綠色，180°是青色，240°是藍色，300°是品紅色。360°回到紅色。
飽和度0%和100%有什麼區別？
飽和度0%時，顏色完全去飽和（灰階），而100%時，它變成該色相最鮮豔、最純淨的顏色。降低飽和度會產生更柔和、類似粉彩的感覺。
如何建立按鈕懸停顏色？
只需將基礎按鈕顏色的亮度（L）值降低10-15%，即可建立自然的懸停效果。保持色相和飽和度不變以保持顏色一致性。
歷史和收藏儲存在哪裡？
它們儲存在瀏覽器的本機儲存中。在同一瀏覽器中關閉頁面後仍會保留，但在不同瀏覽器或裝置上無法看到。歷史儲存最近10個顏色，收藏最多可儲存20個。
在CSS中使用HSL有什麼優勢？
HSL使在CSS中計算顏色變體變得容易。例如，只調節亮度就可以輕鬆建立同一顏色的明亮/暗淡版本。結合CSS變數和calc()，還可以實現動態顏色主題。