什麼是取色器？

視覺化選取任意顏色，取得十六進位、RGB 和 HSL 色值。點擊或拖曳找到想要的色調，直接複製色值。

在飽和度/亮度方塊裡拖動改變色調,移動色相條切換色系,工具會自動給出 hex、RGB 和 HSL 三組數值,點一下就能複製。在輸入框輸入 hex,方塊會立刻跳到對應位置,方便基於現有品牌色微調,不必從亂選的顏色開始。

使用方法

1. 在色彩區域點擊或拖動選擇器找到想要的顏色
2. 使用色相滑桿和透明度控制進行微調
3. 一鍵複製十六進位、RGB 或 HSL 色值

何時使用

• 為網站 CSS 挑強調色,不必在設計軟體間切換。
• 把品牌指南裡的 hex 換算成 HSL,套進設計系統。
• 拖動色相滑桿,組出一組相鄰色系的小色板。

結果

選擇一個暖橙色，得到 #E67E22、rgb(230, 126, 34)、hsl(28, 80%, 52%)。

常見問題

HSL 和 HSB(HSV)有什麼差別?

HSL 在亮度 50% 時為最純色,從黑到白對稱,適合做亮暗對稱的色階。Photoshop 用的 HSB 則是亮度 100% 時最純,符合一般調色盤的直覺。

為什麼螢幕上的顏色和印刷出來的不一樣?

螢幕是 RGB(發光),印刷是 CMYK(吸光油墨)。鮮亮綠或螢光藍這類顏色在 CMYK 裡找不到完全對應的數值。重要稿件出片前一定要在目標媒材上打樣。

挑出的 hex 默認就符合 WCAG 嗎?

不會。可及性取決於前景與背景的對比,單一顏色談不上合不合規。把前景與背景 hex 一起算對比度,內文文字至少 4.5:1、大字至少 3:1。

如何取得螢幕上已經存在的顏色?

點「螢幕取色」，滴管就能吸取螢幕上任何一個像素的顏色——精確的 hex 會直接載入選色器，方便你再調飽和度、亮度或透明度。（取色按鈕只在支援時才會出現；否則可用系統內建取色器（macOS「數位色彩測量器」、Windows PowerToys、Chrome DevTools）讀出 hex 再貼到輸入框。）

這個取色器支援透明度嗎?

支援。色相條下方有一條不透明度滑桿,Alpha 可以在 0 至 100% 之間任意調整。預覽色塊背後鋪有棋盤格,透明程度一目了然;當 Alpha 低於 100% 時,RGB 與 HSL 的複製按鈕會自動切換為 rgba() 和 hsla()。

相關工具