不喜欢广告？ 去 无广告 今天
Tailwind CSS 颜色渐变生成器
颜色开发人员
广告 移除？
广告 移除？
指导
Tailwind CSS 颜色渐变生成器
粘贴一个十六进制颜色，立即获得完整的 Tailwind 风格 50 到 950 调色板，步长在人眼感知上均匀。该调色板基于 OKLCH 颜色空间构建，因此每个点在人眼看来都是均匀的亮度跃升，而不是在 RGB 或 HSL 中的线性下降。
将结果直接复制到你的 tailwind.config.js中，作为 CSS 自定义属性或 SCSS 变量插入，或导出为 JSON 用于你的设计令牌管道。
如何使用
- 使用颜色选择器选择一个基础颜色，或粘贴一个十六进制值如
#464aff. - 为调色板命名（例如
primary,brand， 或者accent）——这将成为导出代码中的对象键。 - 选择 Tailwind v4（OKLCH） 用于现代
oklch()CSS，或 Tailwind v3（十六进制） 用于经典十六进制输出。 - 开启或关闭 950 点，并调整色相滑块以增强或减弱饱和度。
- 选择导出格式——Tailwind 配置、CSS 自定义属性、SCSS 变量或 JSON——然后复制或下载生成的代码。
- 点击预览中的任意色块，将其十六进制值复制到剪贴板。
特征
- OKLCH 的感知数学 – 在 OKLCH 颜色空间中插值亮度和色相，使得 50 到 950 范围内的每个点在人眼看来都是均匀的步长。
- 完整的 50 到 950 范围 – 生成完整的 11 点 Tailwind 调色板，并提供可选择是否移除额外深色 950 点的选项（如果你只需要经典的 10 点）。
- 实时色块预览 – 一目了然地看到每个色调，点击任意色块可复制其十六进制值，并在输入时即时调整调色板。
- WCAG对比度检查器 – 每个色块都针对白色和黑色背景进行评分，带有 AA 和 AAA 通过或失败徽章。
- 多种导出目标 – 输出为 CSS 变量、SCSS 变量或纯 JSON 设计令牌。
tailwind.config.js,:root色相增强控制 - – 一个滑块可缩放所有点的饱和度，从而可以在不改变色调的情况下使调色板更亮或更暗。 色域安全
- – 在每个亮度级别上自动限制色相，确保生成的十六进制值始终在 sRGB 范围内渲染。 什么是 OKLCH 颜色空间？
广告 移除？
常问问题
-
OKLCH 是基于 Oklab 模型的感知颜色空间。它将颜色表示为三个值——L（感知亮度）、C（色相，即颜色强度）和 H（色调角度）。与 HSL 不同，OKLCH 的设计是使得在任意色调下，L 的变化量在人眼看来是相同的。这使其非常适合生成每个步骤都需均匀分布的颜色刻度。
为什么 OKLCH 比 HSL 更适合颜色刻度？
-
HSL 是为了便于计算而设计的，而不是为了匹配人眼的感知。在 HSL 中，相同 L 值的颜色在亮度上可能差异巨大——例如，50% 的黄色比相同亮度的蓝色看起来要亮得多。OKLCH 通过模拟人眼对亮度的实际感知，解决了这一问题，因此在 OKLCH 中构建的刻度能产生 HSL 无法匹配的视觉平衡色调。
什么是感知均匀性？
-
当数值上的等距变化对应于人眼感知的等距差异时，颜色空间就是感知均匀的。换句话说，如果两次移动亮度值相同的量，人眼应该看到这两个步骤大小相同。OKLCH 大致是感知均匀的，因此它能产生平滑自然的渐变和均匀的色阶。
50 到 950 的数字在 Tailwind 调色板中意味着什么？
-
Tailwind 为调色板中的每个色调命名一个从 50（最浅的色调）到 950（最深的色调）的数字，其中 500 通常代表基础颜色。数字越小越浅，数字越大越深。11 点刻度（50、100、200、300、400、500、600、700、800、900、950）为设计师提供了系统中每个颜色的一致词汇。
primary
