设计 / 颜色
Tailwind颜色色阶生成器
将一个品牌颜色转换为完整的TailwindCSS50到950调色板，采用与Tailwind自有颜色相同的OKLCH构建方式，并可复制为Tailwind4主题CSS、Tailwind3配置或CSS变量。
Tailwind颜色色阶生成器: 每个色阶都会采用Tailwind自有调色板在该色阶中的亮度、色度和轻微色相偏移，这些数值以OKLCH颜色空间测量，并进行调整，使你的颜色准确落在指定色阶上。灰色则遵循Tailwind的灰色系列。对于sRGB色域无法显示的颜色，工具会采用CSS Color 4的色域映射方法进行处理，与浏览器的做法一致；Tailwind4输出保留OKLCH值，其他格式则使用十六进制颜色。 完全在浏览器中本地运行，文件不会上传到服务器。
- 类别
- 日常工具
- 使用次数
- 在浏览器中
- 费用
- 免费·无需注册
- 可用性
- 可直接使用
完全在浏览器中运行
#f2f8ffoklch(97.6% 0.012 250.3)#dfecffoklch(93.9% 0.029 258.1)#bcd9ffoklch(87.6% 0.061 255.8)#8fbeffoklch(79.3% 0.106 256.6)#5e9cffoklch(69.6% 0.16 259.5)#3b82f6oklch(62.3% 0.188 259.8)#2668daoklch(54.2% 0.187 260.6)#1f57b6oklch(47.7% 0.163 260.6)#1f4997oklch(42.3% 0.137 261.4)#20417coklch(38.4% 0.109 261.4)#15274coklch(27.9% 0.073 263.2)CSS (@theme)
@theme {
--color-brand-50: oklch(97.6% 0.012 250.3);
--color-brand-100: oklch(93.9% 0.029 258.1);
--color-brand-200: oklch(87.6% 0.061 255.8);
--color-brand-300: oklch(79.3% 0.106 256.6);
--color-brand-400: oklch(69.6% 0.16 259.5);
--color-brand-500: oklch(62.3% 0.188 259.8);
--color-brand-600: oklch(54.2% 0.187 260.6);
--color-brand-700: oklch(47.7% 0.163 260.6);
--color-brand-800: oklch(42.3% 0.137 261.4);
--color-brand-900: oklch(38.4% 0.109 261.4);
--color-brand-950: oklch(27.9% 0.073 263.2);
}
色阶会按照Tailwind自有调色板在OKLCH中的明度、彩度和色相变化来生成，因此以Tailwind的blue-500为基础创建的色阶，与Tailwind的蓝色仅有几处人眼刚好可察觉的差异。超出sRGB范围的颜色会使用CSS Color 4的色域映射方法纳入范围。
使用色阶
常见的用法是：50–100用于页面和卡片背景，200–300用于边框，500–600用于按钮和链接，700用于悬停状态，800–950用于浅色背景上的文本。请使用颜色对比度检查工具检查文本与背景的组合。
Tailwind 4和OKLCH
Tailwind CSS 4使用OKLCH定义颜色，在广色域屏幕上可以描述超出sRGB范围的颜色。这里生成的Tailwind 4代码仍保持在sRGB范围内，因此这些颜色在每个屏幕上看起来都一样。
使用方法
- 选择颜色，或粘贴其十六进制代码。
- 选择它应对应的色阶，通常为500；也可以让生成器自动放置。
- 复制Tailwind4、Tailwind3或普通CSS变量所需的代码。
隐私与限制
所有内容都在浏览器中生成。
相关工具
常见问题
为什么使用OKLCH？
在OKLCH中，亮度的等距变化在视觉上看起来也是等距的，而且适用于所有色相。因此，用相同方式构建的黄色和蓝色色阶会拥有相匹配的对比度，而HSL无法做到这一点。
我的品牌颜色应该对应哪个色阶？
通常选择500或600，这正是Tailwind保留最鲜明颜色的范围。非常浅的颜色，例如柔和的粉彩色，更适合对应200或300；选择“自动”即可根据亮度放置。
在这些色阶上使用文本时是否容易阅读？
通常，白色文本需要使用600或更深的色阶，深色文本则需要使用400或更浅的色阶；但请使用对比度检查工具检查每一组搭配。
免费工具·使用在浏览器中次·无需账户