色阶生成器能做什么？

由基色生成一套 50–900 色阶，可复制为 CSS 变量它属于「设计工具」分类，完全在你的浏览器里运行，输入的内容不会被上传。

颜色工具有哪些功能？

支持颜色选择器、对比度检查、渐变色生成等多种设计相关工具。

可以生成随机颜色吗？

可以，渐变色生成器支持随机生成美观的渐变色配色方案。

色阶生成器

由基色生成一套 50–900 色阶，可复制为 CSS 变量

返回工具列表

工具面板

本地处理

基色

预览

CSS

:root {
  --color-50: #f5f9ff;
  --color-100: #ebf3fe;
  --color-200: #cee0fd;
  --color-300: #b1cdfb;
  --color-400: #76a8f9;
  --color-500: #3b82f6;
  --color-600: #3575dd;
  --color-700: #2c62b9;
  --color-800: #234e94;
  --color-900: #1b3a6f;
}

关于色阶生成器

由基色生成 50–900 十档色阶，每档都是基色与白或黑按固定比例混合——公式简单、结果可独立复算，中途不会偏色。可整段复制成 CSS 变量。

1
支持多种图片格式处理，满足不同设计需求
2
快速解析网络参数，一目了然
3
丰富的设计工具，助力创意实现

色阶生成器

工具面板

相关工具

颜色选择器

颜色对比度

渐变色生成器

CSS 阴影生成器

单位换算

字节转换

CSS 圆角生成器

CSS 裁剪路径生成器