颜色
图片取色器
从图片中拾取任意颜色，并提取其调色板。
你的主色
输入色值或选取颜色：调色板的其余部分会围绕它生成。
输入HEX值（如#2563EB），或点击方块选取颜色。
你的调色板
点击色值或色阶（50至950）即可复制。点击铅笔图标可将推荐颜色替换为你自己的颜色：更换主色时，它会保持不变。
- —
主色
你的颜色 - —
辅助色
互补色 - —
第三色
近互补色 - —
提示
蓝色 - —
成功色
绿色 - —
警告
橙色 - —
危险
红色 - —
中性
带色调的灰色
浅色和深色设计令牌
界面实际使用的颜色，浅色和深色主题都已备好。每个令牌都对应调色板中的一个色阶。点击即可复制。
- --background页面背景
- --surface卡片和面板
- --surface-muted次要区域
- --border边框和分隔线
- --text主要文字
- --text-muted次要文字
- --primary按钮和链接
- --primary-hover悬停状态
- --on-primary主色上的文字
- --focus-ring焦点轮廓
- --secondary次要强调色
- --tertiary第三强调色
- --info信息
- --info-soft信息提示背景
- --success成功色
- --success-soft成功提示背景
- --warning警告
- --warning-soft警告提示背景
- --danger危险、错误
- --danger-soft错误提示背景
搭配色
围绕主色的经典配色规则，可用于插图、图表或点缀。
互补色
正对面的颜色分裂互补
比互补色更柔和邻近色
相邻的颜色三角色
均衡分布的三种颜色四色
构成正方形的四种颜色单色
同一色相，不同深浅
预览与对比度
将调色板应用到几个界面元素上，并按WCAG规则查看每组配色的可读性。
页面标题标题下方的次要文字，没那么重要。
一张带有链接和按钮的卡片。
主色辅助色第三色
提示 · 有可用的更新。
成功色 · 更改已保存。
警告 · 你的会员即将到期。
出错 · 付款失败。
- 背景上的文字比值—普通文字—大号文字—AAA—
- 背景上的次要文字比值—普通文字—大号文字—AAA—
- 背景上的链接比值—普通文字—大号文字—AAA—
- 主按钮比值—普通文字—大号文字—AAA—
- 次要按钮比值—普通文字—大号文字—AAA—
- 背景上的第三色文字比值—普通文字—大号文字—AAA—
- 信息提示比值—普通文字—大号文字—AAA—
- 成功提示比值—普通文字—大号文字—AAA—
- 警告提示比值—普通文字—大号文字—AAA—
- 危险提示比值—普通文字—大号文字—AAA—
导出
按上方选择的格式（HEX）获取调色板。
输入主色即可生成代码。
调色板的CSS变量（--color-primary-500…）。设计令牌指向这些变量；在html元素上添加data-theme="dark"即可启用深色主题。
关于调色板生成器
选定品牌主色，即可得到界面所需的一整套配色：搭配色、状态色、中性色、色阶、浅色和深色设计令牌、对比度检查以及可直接粘贴的代码，全程无需离开浏览器。
一种颜色，生成完整调色板
工具会从主色推导出第二色和第三色，配上与其风格协调的状态色（信息、成功、警告、危险），以及略带色调、用于背景和文字的灰色。
现成可用的色阶
每种颜色都有11个色阶，从最浅（50）到最深（950），适用于背景、边框、悬停状态和文字。如果推荐的颜色不合适，换成你自己的颜色即可，色阶会随之更新。
浅色和深色设计令牌
背景、表面、边框、文字、悬停、焦点和提示背景：每种界面用色都对应调色板中的一个色阶，浅色主题和深色主题各有一个值。
对比度检查
每组文字与背景的搭配都按WCAG规则评级：普通文字需达到4.5:1，大号文字需达到3:1，AAA级需达到7:1。
导出为CSS、Tailwind、JSON
可复制HEX、RGB、HSL或OKLCH格式的各个色值，也可下载CSS变量文件、Tailwind v4主题、Tailwind v3配置、JSON或纯文本列表。一切都在浏览器中完成，不会发送或保存任何内容。