Tailwind 色阶生成
Tailwind 色阶生成器只需指定一种基础色，即可自动生成 Tailwind 风格 50-950（11 级色阶）的明度色阶，是一款免费的 tailwind 颜色生成工具。无论是品牌色还是你喜欢的某一种颜色，都能瞬间生成与 Tailwind 默认调色板相同感觉的 tailwind 色阶，可直接用于设计系统或主题配置。
可通过 URL 共享和保存当前的色阶。
生成的色阶
- 50#EFF6FE
- 100#DDEBFD
- 200#C1DCFC
- 300#95C4FC
- 400#58A3F8
- 500基准#1E90FF
- 600#006BE3
- 700#005BC7
- 800#004AA9
- 900#004185
- 950#04294F
导出
@theme {
--color-brand-50: oklch(0.971 0.013 253.2);
--color-brand-100: oklch(0.936 0.028 253.2);
--color-brand-200: oklch(0.885 0.052 253.2);
--color-brand-300: oklch(0.808 0.094 253.2);
--color-brand-400: oklch(0.704 0.146 253.2);
--color-brand-500: oklch(0.652 0.19 253.2);
--color-brand-600: oklch(0.549 0.201 257.7);
--color-brand-700: oklch(0.494 0.184 258.1);
--color-brand-800: oklch(0.432 0.165 258.7);
--color-brand-900: oklch(0.382 0.128 255.5);
--color-brand-950: oklch(0.281 0.081 253.2);
}
色阶的生成全程在浏览器中完成，输入的颜色不会被发送到外部服务器。
相关工具
取色器
从图片中提取颜色并获取颜色代码的免费取色器，可用放大镜按像素精确拾取，支持 HEX / RGB / HSL 切换与调色板导出。免费、无需注册。
- 设计/配色
- 效率
图片配色提取
在线图片取色工具，上传图片即可自动提取主色调与代表色，生成可用的调色板。支持 HEX/RGB/HSL 切换、显示各颜色占比、自由调整 4–12 种颜色，并可一键导出为 CSS 变量、SCSS、Tailwind 配置或 JSON。图片不上传服务器，全程在浏览器中完成，免费使用、无需注册。
- 提取
- 设计/配色
配色生成器
只需选择一种基础色，即可基于配色理论自动生成互补色、类似色、三角配色等配色方案的免费在线配色工具。可导出为 CSS 变量、Tailwind、SCSS、JSON 格式，并能查看对比度参考，全程在浏览器中完成。
- 生成器
- 设计/配色
颜色代码转换
在 HEX、RGB、HSL、HSV、OKLCH 颜色代码之间相互转换的免费工具，支持透明度（RGBA、8 位 HEX）与 CMYK 参考值，一键复制任意格式，全程在浏览器中完成。
- 转换
- 设计/配色
对比度检查器
实时计算前景色与背景色对比度的免费颜色对比度检查器，判定 WCAG 2.1/2.2 AA、AAA 是否达标，并支持达标色建议、色盲（色觉）模拟与 APCA，全程在浏览器中完成。
- 检查
- 设计/配色
- 无障碍
CSS 渐变生成
通过可视化界面调整颜色、方向和色标，即可自动生成 CSS 渐变代码的免费在线工具。支持线性、径向、圆锥（conic）渐变，可调整不透明度，并能导出为 CSS 变量、Tailwind、SCSS 格式，还支持分享 URL。复制即用，全程在浏览器中完成。
- 生成器
- 开发
- 设计/配色
Tailwind 色阶生成是什么?
Tailwind 色阶生成器只需指定一种基础色，即可自动生成 Tailwind 风格 50-950（11 级色阶）的明度色阶，是一款免费的 tailwind 颜色生成工具。无论是品牌色还是你喜欢的某一种颜色，都能瞬间生成与 Tailwind 默认调色板相同感觉的 tailwind 色阶，可直接用于设计系统或主题配置。
基础色除了支持 #1E90FF 这样的 HEX，还支持 rgb(30, 144, 255) 或 oklch(0.65 0.19 253)，也可以从原生取色器中选取，或用「随机」按钮寻找配色灵感。工具会根据输入颜色的明度自动判定最接近的层级（50-950），在该层级原样保留你输入的颜色，再生成其余各级。配色采用 Tailwind CSS v4 使用的 OKLCH 色彩空间进行计算，因此各级的明度在视觉上更均匀，色阶过渡自然。
生成的色阶可整体导出为 Tailwind v4（@theme 的 OKLCH 变量）、Tailwind v3（tailwind.config.js 的 theme.extend.colors）、CSS 变量、JSON 等多种格式。指定颜色名称（如 brand、primary）后会反映到变量名中，复制后即可直接粘贴到 tailwind 配置颜色文件或样式表里。每一级的数值都可在 HEX、OKLCH、HSL、RGB 之间切换显示和复制，每个色块还会显示用黑色文字还是白色文字更易读（对比度参考）。
色阶的计算全程在浏览器中完成，输入的颜色不会被发送到外部服务器。无需注册账号、无需点击广告，即可立即使用。
使用方法
- 在输入框中输入基础色（支持 HEX、RGB、HSL、OKLCH），或用取色器选取颜色。想要灵感时也可以使用「随机」按钮。
- 根据需要输入颜色名称（如 brand、primary）。它会反映到导出时的变量名中。
- 查看生成的 50-950 共 11 级色阶。与输入颜色最接近的层级会带有「基准」徽章，该颜色会原样保留。
- 切换显示格式（HEX、OKLCH、HSL、RGB），每一级的数值可通过复制按钮复制。
- 在「导出」中切换 Tailwind v4、Tailwind v3、CSS 变量、JSON 标签页，用「复制」按钮复制整段代码并粘贴到 tailwind 配置或样式中。
- 点击「复制 URL」可获得能够还原当前色阶的分享 URL，可用于团队共享或收藏。
使用场景
- 想从一种品牌色生成 Tailwind 的 50-950 色阶并直接配置到 tailwind.config 的前端工程师。
- 正在迁移到 Tailwind CSS v4，想用 @theme 和 OKLCH 定义自定义颜色的开发者。
- 想在设计系统中为按钮、链接等状态（hover、active）系统地准备不同明度颜色的设计师。
- 想配合 shadcn/ui 等组件，准备专属主色色阶的用户。
- 想以一种已有颜色为起点，一次性准备从浅背景色（50、100）到深文字色（900、950）的用户。
- 想把确定好的色阶通过分享 URL 发给团队，或日后还原同一色阶的用户。
注意事项
- 色阶的生成全程在浏览器中完成，输入的颜色不会被发送到外部。
- 基础色支持以 HEX、RGB、HSL、OKLCH 各种格式输入。不支持透明度（Alpha）。
- 工具会根据输入颜色的明度自动判定最接近的层级，并在该层级原样采用输入颜色（例如：较亮的颜色会放在 200，较深的颜色会放在 800 等位置）。
- 颜色计算使用与 Tailwind CSS v4 相同的 OKLCH 色彩空间，超出 sRGB 显示范围的颜色会被自动调整到范围内。生成结果并不一定与实际的 Tailwind 标准调色板完全一致。
- 分享 URL 中仅包含基础色、颜色名称和显示格式。打开该 URL 会以相同设置还原色阶。