免费 · 实时生成 · CSS 代码直接复制
网站HEX 颜色调色板生成器
输入一个 HEX 颜色值，即刻生成完整的色调系统：和谐色、色调刻度、语义色彩令牌，以及可直接使用的 CSS 变量。
#
支持 #RGB 或 #RRGGBB，例如 #0EA5E9
快速预设：
调色板总览
查看基础色与衍生色之间的关系，快速构建一致的色彩系统
#2563EB
基础色
色调刻度 (50 - 900)
由浅至深的渐变色阶，适用于背景、边框、状态和文字对比
语义色彩令牌
直接在 UI 中使用这些角色，保持产品视觉和品牌风格的一致性
CSS 变量
复制后直接粘贴到您的样式表中
对比度检测
验证文字与背景的颜色对比度是否符合 WCAG 可访问性标准
使用方法
1
输入或选择颜色
直接输入 HEX 值，使用拾色器，或点击「随机颜色」探索新方向。
2
查看调色板总览
查看基础色旁边自动生成的和谐色，它们能完美配合并扩展您的设计语言。
3
探索色调刻度与语义令牌
审阅 50-900 色调刻度，以及预定义的语义角色，直接在设计系统中使用。
4
复制 CSS 变量
一键复制 CSS 变量或 Tailwind 配置，立即在项目中使用。
