HEX｜最常見的網頁色碼
HEX 本質上仍是 RGB，只是把每個通道改用 16 進位表示。#RRGGBB 是最常見寫法，若加透明度可使用 #RRGGBBAA。
怎麼讀RR、GG、BB 分別代表紅、綠、藍，00 到 FF 對應 0 到 255。
適合UI、Design Token、CSS、設計稿交付。
color: #3A7B8C;
Color Lab · 色彩工作台
從畫面、圖片或色碼取得顏色
選一個最方便的方式。取得顏色後，右側會同步更新所有色彩模型與文字對比。
Pick a Color
取色來源
螢幕滴管、圖片取色或直接輸入。
100%
這個大型選色器可直接在頁面中使用；若要從螢幕其他位置吸色，可按左下方滴管按鈕。
拖放圖片到這裡，或選擇圖片
圖片只在目前瀏覽器中讀取與取樣，不會上傳。
可輸入 HEX、RGB、HSL 或 OKLCH，例如
#3A7B8C、rgb(58 123 140)、hsl(191 41% 39%)。Current Color
目前顏色
點選數值即可複製，進階模型可展開查看。
Aa
背景色
#3A7B8C
#3A7B8C
HEX
#3A7B8CRGB
rgb(58 123 140)HSL
hsl(191 41% 39%)OKLCH
oklch(...)Aa白字對比 —
Aa黑字對比 —
查看完整色彩模型
RGBA
HSV / HSB
HWB
CIELAB
LCH
OKLab
CMYK（參考）
Alpha
My Palette · 我的調色盤
把取到的顏色整理成可交付的色票
加入、重新命名、排序與刪除色票，再一次匯出 CSS Variables、JSON 或 CSV。
尚未加入色票。從上方取一個顏色後，按「加入調色盤」。
CSS Variables
資料匯出
One Color, Many Coordinates
同一個顏色，為什麼有這麼多種寫法？
色彩模型就像描述位置的不同座標系統。寫法不同，不代表一定是不同顏色；它們只是用不同方式描述顏色。
Aa目前顏色 · 所有列會同步更新
HEX
RGB
HSL
HWB
Lab
LCH
OKLab
OKLCH
CMYK
Color Models · 實用教學
怎麼讀、什麼時候用、網頁怎麼寫
每一種模式都從實務角度理解。程式碼範例會跟著目前選取的顏色更新。
RGB｜以紅、綠、藍光描述螢幕顏色
RGB 是加法混色。三個通道常以 0–255 表示；CSS 現代語法也能在斜線後直接加入透明度。
怎麼讀R、G、B 越高，對應色光越強。
適合螢幕顯示、Canvas、影像像素、程式運算。
background: rgb(58 123 140);
HSL｜用色相、飽和度、明度思考
H 是色相角度，S 是飽和度，L 是數學上的明度。它直覺好調，但不同色相在相同 L 下，視覺上不一定同樣明亮。
怎麼讀Hue 0°/360° 約為紅色，120° 約為綠色，240° 約為藍色。
適合快速做 hover、明暗變化與設計溝通。
color: hsl(191 41% 39%);
HSV / HSB｜設計軟體常見的選色方式
HSV 與 HSB 是同一類概念：Hue、Saturation、Value / Brightness。它很適合做色票選擇器，但不是 CSS 的原生色彩函式。
怎麼讀V / B 表示目前顏色相對於黑色的亮度尺度。
適合繪圖軟體、Picker、快速調整彩度與亮度。
/* CSS 無 hsv()；轉為 rgb()/hsl()/oklch() 使用 */
HWB｜用「加白、加黑」理解顏色
HWB 使用 Hue、Whiteness、Blackness。對習慣顏料或「把顏色沖淡、壓暗」的人，有時比 HSL 更直覺。
怎麼讀W 越高越接近白，B 越高越接近黑。
適合CSS 色彩變化、教學與直覺式配色。
color: hwb(...);
CIELAB 與 LCH｜往「人眼感知」靠近
Lab 用 L*、a*、b* 描述顏色；LCH 則把 a/b 改成 Chroma 與 Hue，更容易理解色彩強度與方向。
怎麼讀Lab 的 a 軸約是綠↔紅，b 軸約是藍↔黃；LCH 改以明度、彩度、色相呈現。
適合色差、跨媒介色彩研究、現代 CSS 色彩。
color: lab(...);
OKLCH｜現代 Web Design 很值得學的表示法
OKLCH 的 L 是感知式明度，C 是 Chroma，H 是 Hue。只改變 L 時，通常比 HSL 更接近人眼所感受到的「同樣亮或暗」。
怎麼讀L 0–100%，C 為彩度強度，H 為色相角度。
適合Design System、品牌色階、主題色與感知一致的明暗階。
--brand: oklch(...);
CMYK｜螢幕換算只能當印刷參考
CMYK 以青、洋紅、黃、黑四個比例描述減法混色。這裡的 CMYK 是從 sRGB 數學換算的參考值，不等同正式印刷色彩管理。
怎麼讀C、M、Y、K 皆以百分比表示。
適合溝通印刷方向；正式輸出仍需 ICC、紙張、油墨與實體打樣。
/* CMYK 參考：C … M … Y … K … */
CSS in Practice · 網頁實務
把目前顏色直接寫進網頁原始碼
以下範例都是實際可用的 CSS。換色後，程式碼與右側示範會一起更新。
Color in UI
標題背景與文字對比會跟著目前顏色變化。
同一個色彩可以用在文字、背景、按鈕、邊框與漸層。
.title { color: #3A7B8C; }.card { background: rgb(58 123 140); }.overlay { background: rgb(58 123 140 / 60%); }:root { --brand: oklch(...); }.panel { border: 1px solid #3A7B8C; }.hero { background: linear-gradient(90deg, ...); }Screen, Print & Accessibility
顏色不只要漂亮，也要知道它在哪裡使用
螢幕色彩、印刷換算與文字對比是三件不同的事。把它們分開判讀，可以避免常見誤解。
Screen
RGB / Display P3 是顯示色彩
本工具以 sRGB 取樣與換算為核心。RGB 描述螢幕色光；Display P3 則能涵蓋比 sRGB 更廣的部分色域。若你要做廣色域網頁，可以使用 CSS 的 color(display-p3 ...)，但實際顯示仍取決於裝置與瀏覽器。
Print
CMYK 數值 ≠ 完成印刷校色
同一組 RGB 轉成 CMYK，會因 ICC profile、紙張、油墨、印刷機與製程而產生差異。網頁上的 CMYK 適合做方向參考，正式製作仍應使用指定色彩管理流程與打樣。
White Text
白字放在目前顏色上
—
Black Text
黑字放在目前顏色上
—
一般文字的 WCAG 2.2 AA 最低對比為 4.5:1；大型文字最低為 3:1。這裡用目前背景色與純黑／純白文字做快速檢查。
References · 參考資料
想繼續理解色彩與瀏覽器支援
以下連結以標準文件與工具原頁為主，適合進一步查語法、相容性與可讀性規範。