什么是单色调色板？

选择一个基础色，从中生成暗色（较深）和浅色（较亮）。设定步骤数，然后导出为 CSS 变量、Tailwind 配置，或复制单个 hex/RGB 值。

选择任意 HEX 或使用拾色器,设定浅色、色调(灰调)和深色的数量,页面会在 LAB 空间内均匀插值。每个色块都显示 HEX、RGB 和 HSL,一键即可复制,点「全部复制」还能一次性拿到整套色阶。可以筛选只查看浅色、色调或深色,也可以将整套色阶导出为 CSS 自定义属性、Tailwind 配置代码、SCSS 变量、JSON 设计 token 或 PNG 色卡。

使用方法

1. 用取色器选一个基础色、直接输入十六进制代码，或用「从图片」直接从徽标或照片中提取主色。
2. 调整你想要的浅色(更亮)、色调(灰调)和深色(更暗)数量,如果只需要某一行,可用「显示」筛选缩小范围。
3. 复制单个颜色值,点「全部复制」一次性拿到所有 HEX,或将整个调色板导出为 CSS 自定义属性、Tailwind 配置对象、SCSS 变量、JSON 设计 token 或颜色色板图片。

何时使用

• 搭建 UI 设计系统,需要把品牌色拆成 9 级用于组件状态。
• 做数据可视化:热力图、单色条形图等所有图层都来自同一个色相。
• 选择文字与背景的搭配:-100 背景配 -900 文字,对比度通常足够安全。

结果

您正在构建数据可视化仪表板，需要一套蓝色调色板。以 #3B82F6 为基础色，生成从接近白色（#EBF2FE）到接近黑色（#1A2744）的 9 个步骤。导出为 CSS 变量，在图表中使用 --color-blue-100 到 --color-blue-900。

常见问题

什么叫单色调色板?

色相相同、只是饱和度和明度不同的一组颜色。整体视觉一致,看上去就是同一个蓝、同一个绿的不同深浅,避免了多色相搭配带来的混乱。

一般生成几级合适?

UI 设计最常见是 9 级(Tailwind、Material、IBM Carbon 都用 50-900 的 10 级体系)。数据可视化通常 5-7 级足够。超过 11 级,相邻色块就会接近渐变,人眼很难区分了。

该选哪种导出格式?

CSS 变量可以直接粘进任何样式表;Tailwind 片段塞进 theme.extend.colors 后就能用 bg-brand-500 等工具类;SCSS 同时给你 $brand-500 变量和一个 Sass map;JSON 把整套色阶导出成结构化的设计 token,可接入 style dictionary;PNG 色板图方便给设计师或品牌团队在 Figma 里参考。

为什么最浅的几级看起来都像白色?

亮度太高时,任何饱和色都会被眼睛感知为接近白色。如果 -100 几乎和白色一样,可以减少 tint 数量,或把亮度范围的上限收窄到离基色更近一些,相邻色块就能分得清。

生成的颜色符合无障碍标准吗?

现在可以直接在这里检查。打开 WCAG 对比度徽章，每个色块就会显示其上的黑色或白色文字能否达到 AA 或 AAA；色觉预览会把色阶重新着色，呈现绿色盲、红色盲或蓝色盲人士看到的效果。一个简便规则：把 -100/-200 档与 -700/-800 档搭配，通常就能通过 WCAG AA。

相关工具