基础颜色

#6366F1

#F2F2FC

100

#E5E6FA

200

#C3C4F3

300

#9395F5

400

#6063F1

500

#2C30EC

600

#1317D3

700

#0F12A4

800

#1A1C65

900

#111241

950

#0A0A24

Tailwind CSS 配置

colors: {
  primary: {
  50: '#f2f2fc',
  100: '#e5e6fa',
  200: '#c3c4f3',
  300: '#9395f5',
  400: '#6063f1',
  500: '#2c30ec',
  600: '#1317d3',
  700: '#0f12a4',
  800: '#1a1c65',
  900: '#111241',
  950: '#0a0a24',
  }
}

如何使用色阶生成器

输入或选择一个基础颜色
设置色阶数量（如10级）
选择色阶生成方式（亮度递增/饱和度变化）
点击「生成」按钮，查看色阶结果

色阶生成器功能说明

自动生成50-950色阶（如Tailwind CSS规范）
支持HSL亮度均匀分布
支持自定义色阶数量和范围
一键复制CSS变量代码

注意事项

色阶生成基于HSL色彩空间
不同基色的色阶视觉效果不同
建议色阶间有足够的视觉区分度
导出的CSS变量可直接用于项目