新品牌识别冲刺
你有品牌色,需要围绕它建系统。丢入 HEX、选 Analogous、重随直到两个辅助色出彩、锁定三个色块。切到色阶视图、复制 Tailwind @theme block、粘贴到新项目的 app.css。总耗时:5 分钟。
调色板生成器
OKLCH 品牌调色板。挑一个基础色,生成每种经典色彩搭配 + 50–950 色阶。锁定、重新随机、导出为 CSS / Tailwind v4 / SCSS / JSON。
调色板生成器 — TL;DR
OKLCH 品牌调色板。挑一个基础色,生成每种经典色彩搭配 + 50–950 色阶。锁定、重新随机、导出为 CSS / Tailwind v4 / SCSS / JSON。
我们的 Color Picker & Converter 处理单个颜色 — 取色 / 转换 / 复制。本工具处理 整套调色板:丢入一个基础色,一次得到整套品牌就绪系统(色彩搭配 + 色阶)。差别就像买一件衬衫和置办整个衣柜。
HSL 的色相分布不均匀(60° 的黄色感觉比 240° 的蓝色亮很多,即使明度值相同)。HSL 中的三等分配色一定会有一个色块明显比其他更亮或更暗。OKLCH 是感知均匀的 — 同一 OKLCH 明度值的三个色块看起来真的同样亮。所以每个现代设计系统(Apple HI、Tailwind v4、IBM Carbon)都改用 OKLCH 处理色彩搭配与色阶。
你的品牌色永远不会离开你的设备。打开 DevTools → Network 即可验证任何操作中都没有对外请求。
提示:按空格键重新随机未锁定的色块。
色阶(50 → 950)
CSS
Tailwind v4
SCSS
JSON
为设计系统而生,不只是好看的图
OKLCH 色彩搭配、色阶、锁定重随、设计 token 导出 — 加上几个让你用起来真正顺手的小细节。
六种 OKLCH 色彩搭配
互补、类比、三等分、四等分、分裂互补、单色 — 全部以 OKLCH 计算,所以三等分配色的三个饱和明亮色保持同样明度。没有 HSL 带来的浑浊感。
50 → 950 色阶
丢入品牌色,得到 Tailwind 形态的 50, 100, 200, … 900, 950 色阶,以 OKLCH 曲线遍历明度生成。极端值处色度自动压缩以保持在 sRGB 色域内。
锁定 + 重随(Coolors 风格)
点击任意色块上的锁定图标固定它,然后按 Re-roll(或直接按空格键)让其他色块在所选搭配范围内变化。快速迭代,保留你喜欢的。
四种生产级导出
CSS custom properties(--brand-500)、Tailwind v4 @theme block、SCSS map、可丢进 Style Dictionary / Figma Tokens 的 JSON 设计 token。再加上 1200×200 PNG 色块条。
WCAG 对比一目了然
每个色块显示它与黑或白(较优那个)的 WCAG 对比度,标注 AA / AAA / fail。在上线前就发现无障碍问题。
隐私优先设计
所有数据都留在你的设备上。OKLCH 数学、搭配生成、色阶推导、PNG 导出全部以 JavaScript 在本地执行。打开 DevTools → Network 即可验证没有任何对外请求。
如何构建品牌调色板
从一个基础色到完整可作为设计 token 的调色板,四个步骤。
-
1
丢入你的品牌基础色
点击颜色框、粘贴 HEX、或按 Random base 找灵感。工具会以这个颜色为核心 — 包括色彩搭配色块与 11 阶色阶。
-
2
选择色彩搭配
默认是 Analogous(类比) — 三个在基础色 30° 内的颜色,适合沉稳的品牌调色板。Complementary(互补)用于对比强调色。Triadic / Tetradic(三/四等分)适合编辑感、活泼品牌。Monochromatic(单色)适合单色相系统。全部以 OKLCH 计算,保持同样明度。
-
3
锁定 + 重随直到满意
点击任意想保留的色块上的锁定图标,然后按 Space(或按 Re-roll)让其他色块在搭配范围内变化。快速迭代。如果想精准调到某个值,直接点击该色块的 HEX 字段编辑。
-
4
导出为设计 token
复制 CSS 输出(custom properties)、Tailwind v4(
@themeblock)、SCSS map 或 JSON 设计 token。或按 Download PNG 拿到 1200×200 色块条,可直接放进设计 brief。
为品牌设计师 + 设计系统团队打造
四种常见场景 — 在这些情况下,浏览器内隐私优先 OKLCH 调色板工具比在 Figma 手调 hex 快太多。
为现有 Tailwind 项目添加品牌色
Tailwind 默认 indigo 不是你的品牌。你的品牌是 #5B3FCD。丢入,得到完美对应 Tailwind 步距的 11 阶色阶。复制 @theme block — 所有 bg-brand-500 / text-brand-700 都直接可用。
上线前检查无障碍
每个色块显示 WCAG 对比度 + AA/AAA 标签。逐一检查 brand-500 对白底达到 AA、brand-100 作为浅底配 brand-900 文字时仍可读。有问题的色块单独重随即可修正。
多品牌设计系统
代理商 / 多品牌公司同时维护 N 套设计系统,结构相同、品牌色相不同。每个品牌都用同一套色彩搭配 + 色阶流程,各自导出为 JSON tokens、丢进 Style Dictionary。结构一致、识别独立。
100% 私密 — 在你的浏览器中运行
你的品牌色永远不会离开你的设备。打开 DevTools → Network 即可验证任何操作中都没有对外请求。
- OKLCH 数学、色彩搭配生成、色阶推导、WCAG 对比度计算、PNG 导出全部以 JavaScript 在你的机器上执行 — 没有服务器端渲染、没有第三方 API。
-
PNG 导出使用本地
canvas;色块图完全在浏览器内存中生成并以 Blob 下载 — 没有任何数据经过网络。 - 无需登录、不对色彩值埋点。我们只用一个 cookie 记录 cookie 同意状态,以及一个 cookie 记录语言偏好。
相关指南
关于 OKLCH 调色板、品牌色彩系统、设计 token 的精选阅读。
-
OKLCH in CSS — A Practical Guide for 2026
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
-
WCAG 2.2 Contrast Ratios — How They're Calculated and What "AA" vs "AAA" Means
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
常见问题
这个和普通取色器有什么不同?
我们的 Color Picker & Converter 处理单个颜色 — 取色 / 转换 / 复制。本工具处理 整套调色板:丢入一个基础色,一次得到整套品牌就绪系统(色彩搭配 + 色阶)。差别就像买一件衬衫和置办整个衣柜。
为什么用 OKLCH 而不是 HSL?
HSL 的色相分布不均匀(60° 的黄色感觉比 240° 的蓝色亮很多,即使明度值相同)。HSL 中的三等分配色一定会有一个色块明显比其他更亮或更暗。OKLCH 是感知均匀的 — 同一 OKLCH 明度值的三个色块看起来真的同样亮。所以每个现代设计系统(Apple HI、Tailwind v4、IBM Carbon)都改用 OKLCH 处理色彩搭配与色阶。
「色阶(50 → 950)」是什么意思?
Tailwind 风格的品牌色阶:indigo-50(最浅)、indigo-100、indigo-200、… indigo-900、indigo-950(最深)。丢入品牌色,工具自动以固定 OKLCH 明度曲线生成 11 个色阶。结果可以直接替换任何 Tailwind palette token,但用你的品牌色相。
怎么锁定色块只重随其他?
点击任意色块左上角的 锁定图标 — 它就不变了。然后按 Re-roll 或按 Space,所有未锁定色块会在所选色彩搭配范围内变化。这就是找到好调色板的方法:把已经定下的品牌色固定,在它周围探索变化。
数据会发送到服务器吗?
不会。OKLCH 数学、色彩搭配生成、色阶推导、WCAG 对比度计算、PNG 导出、每次剪贴板复制 — 全部以 JavaScript 在你的设备上执行。打开 DevTools → Network 即可验证没有任何对外请求。粘贴品牌色、内部设计 token、NDA 锁定的调色板都安全 — 没有任何字节离开你的电脑。