色階生成器

生成淺色與深色色階，並可導出 CSS 變量。

色階生成器根據基準色生成淺色和深色色階，以漸變條預覽，並導出可直接使用的 CSS 自定義屬性。

顏色

數量

模式

輸出

{
  "mode": "tint",
  "count": 5,
  "colors": [
    "#4c7fef",
    "#739bf2",
    "#9ab7f6",
    "#c1d2f9",
    "#e8eefd"
  ],
  "cssVars": "--shade-1: #4c7fef;\n--shade-2: #739bf2;\n--shade-3: #9ab7f6;\n--shade-4: #c1d2f9;\n--shade-5: #e8eefd;"
}

使用方法

選擇基準色。
設置色階數量以及生成淺色、深色或兩者。
複製顏色或 CSS 變量。

常見問題

淺色和深色如何生成？

淺色向白色插值亮度，深色向黑色插值亮度。

色板可以分享嗎？

可以，顏色、數量和模式會保存在 URL 參數中。

調色板生成器

使用隨機、近似、互補和三角模式生成協調配色。

顏色轉換器

在 HEX、RGB、HSL 和 HSV 之間即時轉換顏色。

顏色對比度檢查

檢查 WCAG 文本和界面對比度。

色盲模擬器

預覽常見色覺障礙下的圖片效果。

漸變色生成器

使用自定義顏色和方向創建 CSS 線性漸變。

顏色名稱查找

查找任意顏色值最接近的 CSS 顏色名稱。