色阶生成器

由基准色生成 Tailwind 风格 50–950 色阶，含对比度标注与多种导出，浏览器本地生成

色块内文字与文字色为推荐的前景色；「对比 / AA」指该档与其推荐文字色之间的 WCAG 对比度（≥4.5 通过 AA 正文）。

:root {
  --brand-50: #F6F9FE;
  --brand-100: #E6EEFC;
  --brand-200: #C6DAFA;
  --brand-300: #9ABEF9;
  --brand-400: #669DF8;
  --brand-500: #3B82F6;
  --brand-600: #0855D4;
  --brand-700: #063E99;
  --brand-800: #052B69;
  --brand-900: #041A40;
  --brand-950: #020C1C;
}

算法：以输入色为 500 档，保持色相不变，向白色与黑色按固定比例插值生成 50–950，并对两端做轻微饱和度衰减，得到明暗过渡自然的设计色阶。对比度采用 WCAG 2.x 相对亮度公式计算。全部在浏览器本地生成。

关于 色阶生成器 工具

色阶生成器 是云海百宝箱提供的一个免费在线工具。由基准色生成 Tailwind 风格 50–950 色阶，含对比度标注与多种导出，浏览器本地生成 该工具完全在浏览器中运行，无需下载安装任何软件，跨平台支持 Windows、Mac、Linux 及移动设备，数据在本地处理不上传服务器。

与 色阶生成器 配合常用的同类工具： 颜色格式转换、颜色选择器、颜色调色板生成、颜色对比度检查、颜色渐变生成、颜色混合器

色阶生成器 使用方法

  1. 在输入框中输入或粘贴需要处理的内容
  2. 选择相应的处理选项或参数
  3. 点击"处理"或"转换"按钮获取结果
  4. 点击"复制"按钮可一键复制结果到剪贴板

相关工具推荐

颜色格式转换 颜色选择器 颜色调色板生成 颜色对比度检查 颜色渐变生成 颜色混合器 颜色名称查找 随机颜色生成 色盲模拟器 色温转 RGB