色阶生成器

OKLCH 色阶生成器

生成可直接用于项目的 50-950 OKLCH 色阶，并导出为 CSS 变量、Tailwind 和设计令牌。

一键生成完整 50-950 色阶

支持 CSS 变量、Tailwind 和 Token 导出

面向产品与设计系统工作流

使用指南

先确定基础色

先调整 OKLCH 的亮度、彩度和色相，定义这组色阶的中间主色。

选择色阶风格

根据用途切换 balanced、soft、vivid、neutral 等预设，适配品牌色、界面色阶或更克制的系统色。

检查 50-950 各档位

逐个查看生成的明暗层级，复制单个颜色，并快速发现超出 sRGB 色域的颜色。

设置前缀后导出

设置 token 前缀，再把整套色阶导出为 CSS 自定义属性、Tailwind v4 变量或 JSON 设计令牌。

直接进入项目使用

借助预览和工作流说明，把一个基础色快速扩展成可真正落地的产品色彩系统。

实时系统预览

不要只看孤立色块，要看它是否像一套真正的界面系统。

一套可用的色阶需要兼顾背景层、内容容器和更强的交互色。这个预览就是用来一起判断这三者的。

Balanced

前缀：brand

界面层级

50-200 适合背景和低强调层，400-700 更适合作为品牌强调和交互重点。

可用于系统

50-200

最浅的几个档位更适合做页面底色、分区背景和需要留白感的柔和层级。

界面层

#e7f2ff

强调色

#388cf0

文本层

#022c5b

主要操作

500-700 通常适合主要按钮、链接和选中态。

brand-500

#388cf0

brand-700

#1458a5

100

200

300

400

500

600

700

800

900

950

基础颜色

先调整中间主色，再由生成器围绕它补全整套色阶。

亮度

彩度

色相

Token 前缀

导出时将使用 `brand` 作为前缀。

色阶风格

稳定、通用的产品色阶，适合应用界面、品牌主色和常规设计系统。

生成的色阶

点击任意档位即可按当前格式复制。

色块复制格式

导出整套色阶

从试色直接过渡到实现，不需要再手动整理数值。

色块复制格式

HEX

:root {
  --brand-50: oklch(0.98 0.009 255.0);
  --brand-100: oklch(0.96 0.021 255.0);
  --brand-200: oklch(0.92 0.042 255.0);
  --brand-300: oklch(0.84 0.080 255.0);
  --brand-400: oklch(0.75 0.133 255.0);
  --brand-500: oklch(0.64 0.170 255.0);
  --brand-600: oklch(0.55 0.156 255.0);
  --brand-700: oklch(0.46 0.139 255.0);
  --brand-800: oklch(0.38 0.119 255.0);
  --brand-900: oklch(0.30 0.095 255.0);
  --brand-950: oklch(0.24 0.071 255.0);
}

更实用的使用方式

从一个靠谱的品牌主色开始

先确定最能代表产品气质的色相和主彩度。

让系统自动补齐层级

用色阶去覆盖背景、强调、交互和更深的内容层。

把档位映射到组件角色

把 50-200 用在背景，400-600 用在品牌强调，700-950 用在文字、边框或深色层。

统一导出并复用

把同一套颜色带入 CSS 变量、Tailwind 或 Token 流程中，保持设计和开发一致。

命名建议

一个清晰的前缀能让整套色阶在应用、组件库和设计文件里都更容易被理解和复用。

brand-50#f5f9ff

brand-100#e7f2ff

brand-200#d1e5ff

如果主要面向 Web 交付，除非你明确有 P3 策略，否则建议默认开启 sRGB 限制。