颜色变体生成
从一个基础颜色生成 50-950 共 11 个色阶，类似 Tailwind CSS 颜色体系，支持多种格式导出。
基础颜色
H
239°
S
84%
L
67%
预设颜色
导出代码
:root {
--indigo-50: #f3f3fb;
--indigo-100: #e6e6f9;
--indigo-200: #c5c6f6;
--indigo-300: #9193f2;
--indigo-400: #4d4fef;
--indigo-500: #1418eb;
--indigo-600: #0c0fca;
--indigo-700: #070aa6;
--indigo-800: #05077f;
--indigo-900: #030563;
--indigo-950: #00013d;
}色阶预览
indigo50#f3f3fb
hsl(239, 54%, 97%)
100#e6e6f9
hsl(239, 64%, 94%)
200#c5c6f6
hsl(239, 74%, 87%)
300#9193f2
hsl(239, 79%, 76%)
400#4d4fef
hsl(239, 84%, 62%)
500#1418eb
hsl(239, 84%, 50%)
600#0c0fca
hsl(239, 89%, 42%)
700#070aa6
hsl(239, 92%, 34%)
800#05077f
hsl(239, 92%, 26%)
900#030563
hsl(239, 94%, 20%)
950#00013d
hsl(239, 99%, 12%)
色阶条
50
100
200
300
400
500
600
700
800
900
950
文字对比预览
色阶 50
#f3f3fb
The quick brown fox jumps over the lazy dog.
色阶 100
#e6e6f9
The quick brown fox jumps over the lazy dog.
色阶 200
#c5c6f6
The quick brown fox jumps over the lazy dog.
色阶 300
#9193f2
The quick brown fox jumps over the lazy dog.
色阶 400
#4d4fef
The quick brown fox jumps over the lazy dog.
色阶 500
#1418eb
The quick brown fox jumps over the lazy dog.
色阶 600
#0c0fca
The quick brown fox jumps over the lazy dog.
色阶 700
#070aa6
The quick brown fox jumps over the lazy dog.
色阶 800
#05077f
The quick brown fox jumps over the lazy dog.
色阶 900
#030563
The quick brown fox jumps over the lazy dog.
色阶 950
#00013d
The quick brown fox jumps over the lazy dog.
使用说明
功能说明
- 基于 HSL 色彩空间，从基础颜色生成 50-950 共 11 级色阶
- 色阶体系与 Tailwind CSS 默认色阶一致，可直接用于项目
- 支持 4 种导出格式：CSS Variables、SCSS Map、Tailwind v4 @theme、JSON
- 内置 17 种预设颜色，一键应用常用品牌色
- 实时预览文字在各级色阶上的对比效果
- 点击色阶行或色阶条可快速复制对应 HEX 值
使用技巧
- 点击左侧色块可打开系统颜色选择器
- 输入 HEX 值（如 #6366f1）可精确指定颜色
- 填写颜色名称后，导出代码中的变量名会自动替换
- 导出 Tailwind v4 格式时，使用
@theme指令配置自定义颜色 - 色阶条悬停可查看对应色阶编号，点击复制 HEX 值
- 文字对比预览可帮助你选择合适的文字颜色搭配