色阶生成器

生成浅色与深色色阶，并可导出 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 颜色名称。