logo
GeekFormat

色彩轉換器

最接近的 CSS 颜色名: mediumseagreen

RGB

R
G
B
A

HSL

H
S
L

HSV

H
S
V
HEX#22c55e
RGBrgb(34, 197, 94)
RGBArgba(34, 197, 94, 1)
HSLhsl(142, 71%, 45%)
HSLAhsla(142, 71%, 45%, 1)
HSVhsv(142, 83%, 77%)
HWBhwb(142, 13%, 23%)
CMYKcmyk(83%, 0%, 52%, 23%)
XYZxyz(22.64, 41.08, 17.32)
LABlab(70, -62, 40)
LCHlch(70, 74, 147)
OKLABoklab(1, 0, 0)
OKLCHoklch(1, 0, 180)

WCAG 对比度检查

白字
2.28:1
AA AAA
黑字
9.22:1
AA AAA

線上色彩轉換器,支援HEX、RGB、RGBA、HSL、HSLA、HSV、HWB、CMYK、XYZ、LAB、LCH、OKLAB、OKLCH等14種色彩格式一鍵互轉。內建色彩選擇器即時調節、WCAG對比度檢查、色彩和諧配色方案、色階產生、批次轉換和圖片取色功能,所有計算在瀏覽器本機完成,無需上傳檔案,適合設計師配色與前端開發。

相關推薦

適用場景

  • 前端開發時將設計稿中的HEX色值轉換為RGB/HSL格式用於CSS樣式,或需要帶透明度時轉換為RGBA
  • UI/UX設計師在不同設計軟體(Figma/Sketch/Photoshop)之間切換時統一色值格式
  • 印刷前期溝通時將螢幕RGB色值轉換為CMYK作為參考,快速估算印刷效果
  • 做無障礙設計時檢查文字色彩與背景色的對比度是否符合WCAG AA/AAA標準
  • 建構設計系統時使用色階產生功能快速產生一套從淺到深的同色系色盤
  • 做品牌配色或海報設計時使用色彩和諧功能產生互補色、類似色等專業配色方案
  • 從參考圖片或照片中擷取主要色彩(圖片取色),取得配色靈感
  • 批次處理設計稿中的多個色值,一次性轉換為需要的格式
  • 寫CSS時需要調整色彩明暗,用HSL或OKLCH方便地微調亮度和飽和度
  • 使用現代CSS的OKLCH色彩空間建構感知均勻的設計系統色彩
  • 教學演示色彩空間原理,直觀比較不同色彩格式的表示方式
  • 快速檢視某個色彩對應的英文CSS命名色彩,方便記憶和溝通

功能特點

  • 14種色彩格式互轉:支援HEX、RGB、RGBA、HSL、HSLA、HSV、HWB、CMYK、XYZ、LAB、LCH、OKLAB、OKLCH和CSS命名色彩
  • 智慧輸入辨識:貼上任意格式色值自動辨識轉換,支援#rgb簡寫、#rrggbbaa帶透明度、rgb()、hsl()和CSS色彩名稱
  • 即時滑桿調節:RGB紅/綠/藍、HSL色相/飽和度/亮度、HSV三組滑桿即時調色,所見即所得
  • Alpha透明度支援:RGBA和HSLA帶透明度通道轉換,百分比和小數兩種透明度格式
  • CSS色彩名稱比對:自動尋找最接近的標準CSS命名色彩(140+種),快速用英文單字表示色彩
  • WCAG對比度檢查:即時計算目前色彩與白色/黑色文字的對比度,自動判定AA級(≥4.5:1)和AAA級(≥7:1)標準
  • 色彩和諧配色:一鍵產生互補色、類似色、三色、分裂互補、四色等5種經典配色方案
  • 色階產生:提供傳統RGB混合色階和OKLCH感知均勻色階兩種方式,一鍵產生11檔明暗變化
  • 批次轉換:支援多行輸入多個色值批次轉換,適合批次處理設計稿色盤
  • 圖片取色:上傳圖片自動取樣擷取16個主要色彩,快速從設計稿或照片中取得色值
  • 一鍵複製色值:每個色彩格式旁都有複製按鈕,點擊即複製標準格式,可直接貼上到CSS或設計軟體
  • 隨機色彩產生:一鍵隨機產生色彩,快速探索配色靈感
  • 純瀏覽器本機處理:所有色彩計算都在本機完成,無需上傳任何檔案,開啟即用無需註冊
  • 響應式設計:電腦手機平板均可正常使用,手機端也能方便調色和複製色值

使用方法

  1. 在頂部輸入框中輸入任意格式的色值,或點擊色彩區塊用色彩選擇器選色,也可拖曳RGB/HSL/HSV滑桿調節
  2. 工具自動即時轉換為HEX、RGB、RGBA、HSL、HSV、CMYK、OKLCH等所有14種色彩格式
  3. 需要時切換到「色彩和諧」分頁檢視配色方案,「色階產生」分頁檢視明暗色階,「批次/取色」分頁進行批次轉換或圖片取色
  4. 點擊任意色彩格式旁的複製按鈕,即可複製標準格式色值直接貼上使用

常見問題

色彩轉換器支援哪些色彩格式?

支援14種常見色彩格式互相轉換:HEX(支援3位簡寫和8位帶透明度)、RGB、RGBA、HSL、HSLA、HSV、HWB、CMYK、XYZ(CIE 1931,D65光源)、CIE LAB、LCH、OKLAB、OKLCH,以及140+種CSS標準命名色彩。輸入任意一種格式即可自動轉換為所有其他格式。

怎麼使用這個色彩轉換工具?

使用方法非常簡單:1)在頂部輸入框中輸入任意格式的色值,例如#22c55e、rgb(34,197,94)、hsl(142,71%,45%)或直接輸入色彩名稱如green;2)也可以點擊色彩區塊使用色彩選擇器選色,或拖曳RGB/HSL/HSV滑桿即時調節;3)下方自動顯示所有14種格式的轉換結果,點擊格式旁的複製按鈕即可複製色值到剪貼簿。

HEX、RGB、HSL這些色彩格式有什麼差異?分別用在哪裡?

HEX是網頁最常用的十六進位表示法,如#ff0000表示紅色,CSS和設計稿都廣泛使用;RGB用紅、綠、藍三原色0-255的數值表示,是螢幕顯示的基礎;HSL用色相(H)、飽和度(S)、亮度(L)表示,更符合人類感知色彩的方式,設計師調色更直觀;CMYK用於印刷,用青、洋紅、黃、黑四色油墨百分比表示;OKLCH是近年流行的感知均勻色彩空間,在產生漸層和色階時視覺過渡更均勻。

什麼是WCAG對比度?多少才符合無障礙標準?

WCAG對比度是指文字色彩與背景色彩之間的亮度對比比值,用於確保視力障礙使用者也能清晰閱讀網頁內容。根據Web內容無障礙指南標準:一般正文文本對比度≥4.5:1達到AA級(合格),≥7:1達到AAA級(優秀);大型文字(≥18pt粗體或≥24pt常規)對比度≥3:1達到AA級。工具會即時顯示目前色彩在白字和黑字背景下的對比度,並自動標註是否通過AA和AAA標準。

RGBA中的A是什麼意思?透明度怎麼設定?

RGBA中的A代表Alpha通道,即透明度,取值範圍0到1,0表示完全透明,1表示完全不透明。例如rgba(34,197,94,0.5)表示半透明的綠色。工具中可以透過A(Alpha)滑桿調節透明度,轉換結果同時顯示RGBA和HSLA兩種帶透明度的格式。HEX格式也支援透明度,在6位色彩後加2位十六進位透明度值即可,如#22c55e80表示50%透明度。

OKLCH和LCH是什麼?和HSL有什麼不同?

LCH和OKLCH都是感知均勻的色彩空間,其中L表示亮度、C表示飽和度(色度)、H表示色相。和HSL相比,它們最大的優點是:在相同的L(亮度)值下,不同色相的色彩視覺亮度確實一致,這在設計系統中非常重要——如果用HSL產生不同色相但亮度值相同的色盤,看起來會有的深有的淺,但用OKLCH就能保證視覺上亮度均勻。OKLCH比LAB/LCH更新,計算更簡單,色彩預測更準確,是現代CSS(CSS Color Level 4)推薦使用的格式。

圖片取色功能怎麼用?

切換到「批次/取色」分頁,點擊上傳按鈕選擇一張圖片,工具會自動將圖片縮放到100×100像素網格取樣,擷取16個均勻分布位置的色彩並顯示色塊和色值。你可以點擊任意色塊將該色彩設為目前主色進行進一步調整和轉換,適合快速從參考圖、設計稿或照片中擷取配色。

色彩和諧配色有哪幾種?怎麼用?

工具提供5種經典色彩和諧方案:1)互補色:色相相差180度,對比強烈醒目;2)類似色:色相相差30度,和諧舒適自然;3)三色:色相相差120度,活潑平衡豐富;4)分裂互補:基礎色+互補色兩側各30度,既對比又柔和;5)四色(矩形配色):四個色相間隔90度,豐富多變。切換到「色彩和諧」分頁即可看到產生的配色方案,點擊任意色塊可以切換為目前主色。

CMYK轉換結果可以直接用於印刷嗎?

可以作為參考使用,但需要注意:螢幕使用RGB發光色彩空間,而印刷使用CMYK油墨反射色彩空間,兩者的色域範圍不同,RGB中一些鮮豔的色彩(如亮綠、亮藍)無法用CMYK油墨準確重現,轉換後會有一定色差。工具使用標準的RGB到CMYK轉換公式,適合前期溝通和快速參考,正式印刷打樣建議使用專業設計軟體中的色彩管理描述檔進行軟打樣確認。

批次轉換怎麼用?一次能轉多少個色彩?

切換到「批次/取色」分頁,在文字方塊中每行輸入一個色值(支援HEX/RGB/HSL/CSS色彩名稱任意混合),點擊批次轉換按鈕即可一次性轉換所有色彩,結果會顯示每個色彩對應的色塊和HEX值。理論上沒有限制,但一次處理幾十上百個色彩建議分批操作避免頁面卡頓。

可以在手機上使用色彩轉換器嗎?

可以。工具採用響應式設計,在手機、平板、電腦各種尺寸螢幕都可以正常使用。手機上同樣可以輸入色值、拖曳滑桿調色、檢視轉換結果和複製色值,所有功能與電腦端一致。且因為是純本機計算,不會消耗手機網路流量。

輸入色彩提示無法辨識怎麼辦?

請檢查輸入格式是否正確:1)HEX格式需要以#開頭(可以省略#),後面跟3位、6位或8位十六進位字元(0-9/a-f),例如#f00、#ff0000、#ff0000ff都是合法的;2)RGB格式需要是rgb(r,g,b)形式,三個數值在0-255之間,用英文逗號分隔;3)HSL格式是hsl(h,s%,l%),色相0-360,飽和度和亮度0-100%;4)CSS色彩名稱必須是標準名稱如red/blue/green,不支援中文色彩名稱。

為什麼轉換後的色彩在不同軟體裡看起來不一樣?

這是色彩管理的正常現象:不同軟體、不同顯示器、不同作業系統可能使用不同的色彩描述檔(如sRGB、Display P3、Adobe RGB),導致同一個色值在視覺上有細微差異。網頁預設使用sRGB色彩空間,如果你在Photoshop等軟體中使用了Adobe RGB或Display P3描述檔,匯出時需要轉換為sRGB才能在網頁上顯示一致。

前端開發中應該用哪種色彩格式?

現代CSS支援所有色彩格式:HEX最常用相容性最好,是設計交接的標準格式;RGB/RGBA適合需要動態調整透明度或單獨修改某一通道的場景;HSL最直觀,適合程式碼中直接寫色彩變體(如hover態稍亮一點只需提高L值);OKLCH是未來趨勢,CSS Color Level 4已原生支援,感知均勻適合產生色階和漸層,可以根據專案相容性需求選擇。

色階產生功能有什麼用?傳統色階和OKLCH色階有什麼差異?

色階產生可以一鍵產生從淺到深11個檔位(50-900)的同色系色彩,非常適合建構設計系統中的色彩色盤(如Tailwind的色彩系統)。傳統色階是直接將RGB向白色混合,雖然數值上均勻,但視覺上中間調可能不均勻;OKLCH色階保持色相和飽和度不變,只調整亮度L,產生的色階在視覺上明暗過渡更均勻,更專業美觀。

關於色彩空間與色彩格式轉換

色彩轉換器是設計師和前端開發者日常使用頻率最高的工具之一,用於在不同色彩表示格式之間進行準確換算。色彩本身是一種視覺感知,為了在電腦和印刷中表示色彩,人們發展出了多種色彩模型(色彩空間),每種模型用不同的數值方式描述同一種色彩,適用於不同的場景和設備。

最常見的色彩格式包括:HEX(十六進位RGB,網頁標準表示法)、RGB(紅、綠、藍三原色0-255,螢幕顯示基礎)、HSL(色相、飽和度、亮度,最符合人類調色直覺)、CMYK(青、洋紅、黃、黑四色油墨百分比,印刷用)。近年來OKLCH等感知均勻色彩空間越來越流行,因為它們在數學上保證了相同亮度值的色彩在視覺上確實一樣亮,這在建構設計系統和產生漸層時非常重要。

為什麼需要轉換色彩格式?不同工具、不同平台、不同輸出媒體使用不同的色彩格式:網頁CSS支援HEX/RGB/HSL/OKLCH等多種格式,Figma/Sketch等設計軟體預設用HEX,印刷必須用CMYK,而在程式碼中動態調整色彩(如hover狀態、透明度變化)時HSL和OKLCH比HEX方便得多。準確的色彩轉換能保證設計稿和最終實現色彩一致。

WCAG對比度是網頁無障礙設計的重要標準,它衡量前景文字色彩和背景色彩之間的亮度差異,確保視力障礙使用者也能清晰閱讀內容。一般正文需要達到4.5:1對比度(AA級),重要內容建議達到7:1(AAA級)。我們的工具即時計算這一數值,幫助設計師在配色時就考慮到無障礙需求,避免後期整改。

色彩和諧(Color Harmony)是基於色相環的經典配物理論,利用色相在色輪上的幾何位置關係產生視覺上協調美觀的配色組合。互補色對比強烈適合需要突出的按鈕和強調色,類似色和諧自然適合大面積背景和主色調,三色和四色方案豐富平衡適合品牌主視覺設計。工具內建了5種最常用的和諧配色方案,點擊即可一鍵產生。

色階(Color Shades/Tints)是指同一色相從淺到深的一系列色彩變體,是建構設計系統(如Tailwind CSS的50-900色盤)的基礎。傳統的RGB色階只是簡單向白色混合,但視覺上不均勻;基於OKLCH的色階保持色相和飽和度不變只調整亮度,產生的色階在視覺上明暗過渡平滑自然,是現代設計系統推薦的做法。我們的工具同時提供這兩種色階供對比選擇。

為什麼本機處理很重要?色彩轉換是純數學計算,完全不需要上傳資料到伺服器。我們的工具所有計算都在你的瀏覽器本機完成,開啟頁面即可使用,不需要註冊登入,不會上傳任何圖片或色彩資料,既快速又保護隱私,即使是未發布的機密設計稿配色也可以放心使用。

需要注意的是:色彩格式轉換是數學上精確的,但由於螢幕色域、顯示器校準、印刷工藝等因素,同一個色值在不同設備和媒體上的視覺呈現可能有差異。螢幕使用RGB加色法(越疊加越亮),印刷使用CMYK減色法(越疊加越暗),兩者色域範圍不同,RGB中一些高飽和度的色彩無法用CMYK油墨準確重現。工具的轉換結果適合數位設計和網頁開發,正式印刷建議透過專業軟體的色彩管理進行打樣確認。

术语表

HEX
十六進位色彩表示法,用#加6位十六進位數表示RGB三原色(每兩位對應一個通道00-FF),如#FF0000表示紅色,是網頁和設計軟體最常用的格式。支援3位簡寫(如#f00)和8位帶透明度寫法。
RGB/RGBA
用紅(Red)、綠(Green)、藍(Blue)三個0-255的數值表示色彩,rgba()多一個Alpha通道表示透明度(0-1),是螢幕顯示的基礎色彩模型。
HSL/HSLA
用色相(Hue, 0-360度)、飽和度(Saturation, 0-100%)、亮度(Lightness, 0-100%)表示色彩,更符合人類感知色彩的方式,設計師調色更直觀。
HSV/HSB
色相、飽和度、明度(Value/Brightness),和HSL類似但亮度計算方式不同,常見於Photoshop等設計軟體的色彩拾取器。
HWB
色相(Hue)、白度(Whiteness)、黑度(Blackness),CSS Color Level 4新增的格式,比HSL更直觀——只需加白色或黑色就能調整色調。
CMYK
青(Cyan)、洋紅(Magenta)、黃(Yellow)、黑(Key/Black)四色百分比,用於印刷產業,代表四種油墨的混合比例。
CIE LAB/LAB
國際照明委員會(CIE)制定的感知均勻色彩空間,L表示亮度(0-100),a表示綠-紅軸,b表示藍-黃軸,旨在讓人眼感受到的色彩差異與數值距離成正比。
LCH
由LAB轉換而來的極座標表示:L亮度、C飽和度(Chroma)、H色相(Hue),比HSL更感知均勻,適合需要精確控制色彩感知的專業設計。
OKLAB/OKLCH
2020年提出的新一代感知均勻色彩空間,比LAB/LCH計算更簡單、色相預測更準確,OKLCH是其極座標形式,已被現代CSS原生支援,是建構設計系統的推薦格式。
WCAG對比度
Web內容無障礙指南規定的前景文字與背景色彩的亮度比值,AA級要求正文≥4.5:1,AAA級要求≥7:1,用於確保視力障礙使用者能清晰閱讀。
色彩和諧
基於色相環位置關係的配物理論,透過幾何關係(互補180°、類似30°間隔、三角120°間隔等)產生視覺上協調美觀的配色組合。
色階(Shades/Tints)
同一色相從淺(加白)到深(加黑/減亮)的一系列色彩變體,通常產生50-900共11個檔位,用於設計系統中同一色彩在不同場景(背景、邊框、文字、強調)的使用。

14種色彩格式對比速查表

以下是各種色彩格式的表示範圍、典型範例和主要使用場景:

格式取值範圍純紅範例主要使用場景
HEX#RRGGBB 00-FF#ff0000網頁CSS、設計稿交接,最通用格式
RGBR/G/B: 0-255rgb(255,0,0)螢幕顯示基礎、Canvas/WebGL程式開發
RGBA加A: 0-1rgba(255,0,0,1)需要透明度的CSS樣式、疊加效果
HSLH:0-360°, S/L:0-100%hsl(0,100%,50%)設計師調色、程式碼中動態調整色彩
HSVH:0-360°, S/V:0-100%hsv(0,100%,100%)Photoshop等設計軟體拾色器
HWBH:0-360°, W/B:0-100%hwb(0,0%,0%)CSS Color 4,直觀加白加黑調色
CMYKC/M/Y/K: 0-100%cmyk(0%,100%,100%,0%)印刷、出版產業
OKLCHL:0-1, C:0-0.4, H:0-360°oklch(0.63,0.24,29)現代CSS、設計系統色階、感知均勻漸層

WCAG無障礙對比度標準對照表

Web內容無障礙指南(WCAG 2.1)規定的對比度最低要求:

等級對比度要求適用文本類型說明
AA級≥ 4.5:1一般正文文本(<18pt常規或<14pt粗體)最低合格標準,法規遵循要求
AA級≥ 3:1大型文字(≥18pt常規或≥14pt粗體)大標題可適當降低要求
AAA級≥ 7:1一般正文文本(增強級)推薦用於重要內容、長文本閱讀
AAA級≥ 4.5:1大型文字(增強級)優秀的無障礙設計

5種色彩和諧配色方案速查

基於色相環角度的經典配色組合,點擊即可產生:

配色類型色相間隔色彩數量視覺效果與適用場景
互補色相差180°2色對比強烈醒目,適合按鈕、強調色、CTA
類似色相鄰±30°3色和諧自然舒適,適合大面積背景、主色調
三色間隔120°3色活潑平衡豐富,適合品牌配色、插畫
分裂互補基礎色+互補兩側±30°3色既對比又柔和,比互補色更精緻
四色間隔90°4色豐富多變,適合複雜設計、兒童產品

Privacy & Security

本色彩轉換器所有色彩計算、圖片取色和批次轉換都完全在你的瀏覽器本機執行,採用純JavaScript在瀏覽器記憶體中處理,你輸入的色值和上傳的圖片都不會透過網路上傳到任何伺服器,也不會被記錄、快取或儲存。處理完成後關閉或重新整理頁面,瀏覽器記憶體中的臨時資料即被自動清除。未發布的設計稿配色、品牌色等敏感內容都可以放心使用,無需擔心外洩。

Authoritative References

Troubleshooting

輸入色彩提示「無法辨識的色彩格式」怎麼辦?

請檢查:1)HEX格式是否為合法的十六進位字元(0-9, a-f, A-F),長度3位、6位或8位,#可以省略;2)RGB/RGBA格式括號內必須是三個或四個數值,R/G/B在0-255之間,Alpha在0-1之間,用英文逗號分隔;3)HSL/HSLA格式H值0-360,S和L是0-100的百分比數值;4)CSS色彩名稱必須是標準英文名稱,不支援中文色彩名稱。

CMYK轉換後色彩和印刷出來不一樣?

這是正常現象:RGB和CMYK色域不同,RGB能顯示的很多鮮豔色彩無法用CMYK油墨印刷出來。工具使用標準轉換公式,適合前期參考溝通,正式印刷建議:1)在設計軟體中轉換為CMYK模式;2)使用正確的ICC色彩描述檔;3)進行數位打樣確認色彩。

為什麼同一種色彩在我手機和電腦上看起來不一樣?

不同螢幕的色域覆蓋、色溫、亮度、色彩校準都不同:Mac預設用Display P3廣色域,Windows多數用sRGB,手機螢幕也各有差異。網頁設計建議統一以sRGB為基準,確保在大多數設備上表現一致。

上傳圖片取色沒有反應?

請確認:1)上傳的是標準圖片格式(JPG/PNG/GIF/WebP);2)圖片檔案沒有毀損;3)檔案大小不要過大(建議5MB以內)。圖片取色功能在本機canvas中處理,不會上傳到伺服器,重新整理頁面重新上傳通常可以解決。