Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
关于本工具
颜色调色板提取器从任意基础颜色生成符合Tailwind CSS、Material Design等框架50-900色阶规范的10步设计系统色阶。
生成色阶中的每个色块显示其hex、RGB和HSL值。每个色块的文字颜色根据亮度自动调整为白色或深色，确保全范围可读性。
使用方法
- 使用颜色选择器选择基础颜色或输入hex值。
- 10步色阶（50-900）立即生成，覆盖全亮度范围。
- 将hex、RGB或HSL值应用于设计系统或CSS变量。
使用场景
设计系统团队生成完整色阶作为Tailwind配置扩展或CSS自定义属性。前端开发者使用50色度作为浅色背景，900作为深色文字，构建无障碍UI。
常见问题
- 这个色阶与其他工具的"深浅"有何不同？ — 此工具生成固定的10步色阶（50, 100, 200, … 900），锚定在特定亮度值，符合常见设计系统惯例。
- 更改饱和度会影响色阶吗？ — 基础颜色的饱和度在所有步骤中保持不变，只有亮度会变化。
- 可以直接在Tailwind CSS中使用吗？ — 可以。复制每个色阶级别的hex值，将其以色阶编号为键添加到tailwind.config.js的theme.extend.colors下。