色階產生器

由一種基準顏色建立適合介面配色及圖表的明暗色階。選擇5、7或9級,再複製單一顏色或全部HEX。

此頁面用於快速色彩規劃規劃。它不是設計文件匯出器或物理油漆模擬器。

其他語言 日本語 | English | 繁體中文 | 繁體中文(香港) | Italiano

建立色階

例子:#2563eb、rgb(37,99,235)、hsl(120,100%,50%)、red。RGB及HSL使用逗號分隔。不支援透明度或以空格分隔的CSS語法。

色階產生方式

中央保留原有的基準顏色。較淺的色階將其sRGB顏色通道與白色混合,較深的色階則與黑色混合,比例最高為80%。各級的視覺色差並非等距。接近白色或黑色時,顏色邊界或四捨五入可能造成重複的HEX值。

中央會保留原有的基準顏色。使用前,請確認實際文字與背景的配色對比。

相關工具

要探索附近的顏色,請使用配色產生器;要確認實際文字與背景的配色,請使用對比檢查器。

常見問題

這與配色產生器有甚麼不同?

配色產生器用來探索附近的配色選項。此工具則由一種基準顏色建立由淺到深的有序色階。編號只代表此色階中的次序,並非特定設計 token的標準編號。

基準顏色會改變嗎?

不會。中央會保留基準顏色標準化後的HEX值,並在兩側產生較淺及較深的顏色。

為甚麼部分色階有相同的HEX?

純白無法再變淺,純黑也無法再變深。接近這些邊界時,四捨五入也可能產生相同數值。工具會保留所有色階,並顯示不同顏色的數量。

產生的顏色一定符合無障礙要求嗎?

不一定。可讀性取決於文字與背景的配色。對比檢查連結會將所選顏色當成文字色,並使用白色背景;最後仍應以實際背景確認。

分享連結包含哪些設定?

連結包含基準顏色、級數、所選色階及產生方式的版本。舊連結會轉用更新後的方式,因此產生的顏色可能不同。

可以匯出設計檔案嗎?

不可以。你可以複製所選顏色的HEX、RGB或HSL,或將全部色階複製為每行一個HEX。本工具不匯出CSS、JSON或設計檔案。