什麼是CSS色彩代碼產生器？

CSS顏色代碼產生器，可將任意顏色轉換為所有CSS相容格式：HEX、RGB、RGBA、HSL、HSLA、OKLCH以及CSS命名顏色。透過視覺化選色或輸入任意格式即可立即取得所有其他格式，並附帶 WCAG 對比度檢查。

你可以直接輸入十六進位色碼、拖曳調色盤、微調 RGB 滑桿,或貼上現有的 rgb()、hsl() 字串。工具會即時算出其他格式,包含用於感知均勻調色的 OKLCH,還會從 W3C 的 147 種 CSS 命名色中比對最接近的那一個。把不透明度拉到 100% 以下時,rgba() 與 hsla() 才會顯示 alpha 通道,不透明顏色的輸出維持乾淨。對比度面板會顯示該顏色在白底與黑底上的 WCAG 比值,一眼就能看出它作為文字是否清楚易讀。

使用方法

1. 使用視覺化取色器選擇顏色，或以任意支援的格式（HEX、RGB、HSL）輸入色值。
2. 同時檢視所有CSS格式下的顏色顯示，每種格式均可一鍵複製。
3. 使用透明度滑桿調整不透明度，取得RGBA和HSLA值，然後複製所需的CSS程式碼。

何時使用

• 把設計師給的 HEX 色碼轉成你 CSS 框架需要的格式。
• 規劃配色時用 HSL 衍生出更亮或更暗的階梯色。
• 為品牌色加上透明度,用於蒙層、陰影或滑鼠移入狀態。

結果

一位前端開發者選擇其品牌橙色#F97316，立即取得rgb(249, 115, 22)、hsl(25, 95%, 53%)以及其他所有格式，可在整個樣式表中統一使用。

常見問題

為什麼「命名色」欄位有時是空的?

CSS 只內建 147 種命名色,你的色碼必須完全相同才會匹配。多數品牌色都落在兩種命名色之間,所以這是正常情況。這個欄位主要用來確認 tomato、steelblue 這類常見預設色。

什麼情況該用 HSL,而不是 HEX 或 RGB?

HSL 手動微調比較直觀:亮度加 10 就是亮一階,色相加 30 就在色環上挪一段。做色階時設計師常用 HSL。HEX 和 RGB 在最終樣式表中字元略短。

不透明度滑桿改變的是顏色還是透明度?

只改 alpha 通道,底層的 R、G、B 數值不變。所以 rgba(255, 0, 0, 0.5) 疊在白底上看起來是粉色——紅色沒變,只是和背景 50/50 混合。

這些 CSS 格式所有瀏覽器都支援嗎?

HEX、RGB、RGBA、HSL、HSLA 與命名色擁有近 15 年的通用支援,一直到 IE11。本工具也會輸出 OKLCH,它在所有較新引擎(2023 年起的 Chrome、Firefox、Safari、Edge)都可用,若仍要相容很舊的引擎,記得保留一個 hex 或 rgb() 作為後備。

怎麼取網頁上看到的某個顏色?

點「螢幕取色」開啟滴管，再點螢幕上任何一個像素——網頁、圖片、設計稿都行——那個顏色就會立刻載入。(滴管需要 Chrome、Edge 或 Opera;在 Safari 或 Firefox 上,改用作業系統內建的螢幕取色器取得 HEX,再貼到 HEX 欄位。)不論哪種方式,都能一次看到所有等效格式和加上透明度後的不同變體。

相關工具