调色板生成器：OKLCH 色阶、配色方案与 CSS 变量导出

• 主色色阶生成

  从一个主色生成 50、100、200 到 950 的完整色阶，可用于 Tailwind 风格主题、CSS 变量和设计 token。

• 配色方案生成

  支持单色、相邻色、互补色和三角色方案，帮助快速建立主色、辅助色、强调色和对比色。

• OKLCH 明度控制

  使用 OKLCH 处理亮度和色度，让色阶在视觉上更均匀，减少 HSL 色阶常见的跳变问题。

• 中性色阶

  自动生成可用于背景、边框、弱化文字和卡片底色的 neutral 色阶。

• 推荐文字颜色

  每个色块会根据对比度推荐黑字或白字，并显示对应对比度比值。

• 界面预览

  用按钮、链接、标签和卡片模拟真实 UI，方便确认色板在界面中的层级关系。

• CSS 与 JSON 导出

  输出 CSS Variables 和 JSON 色板数据，适合前端工程、组件库配置和设计 token 管理。

• 主色

  品牌或产品界面中最核心的颜色，常用于主要按钮、链接、选中状态和关键强调。

• 色阶

  同一色相在不同明度下形成的颜色序列。前端常用 50 到 950 表示从浅到深的层级。

• 单色配色

  围绕同一色相调整明度和色度，适合稳定、克制、偏工具型的界面。

• 相邻色配色

  选择色相环上相邻的颜色，过渡自然，适合网页视觉、图表和品牌辅助色。

• 互补色配色

  选择色相环上相对的颜色，反差更强，适合强调按钮、警告区域和营销视觉。

• 三角色配色

  在色相环上相隔约 120 度取色，能形成较丰富的视觉层次，但需要控制饱和度。

• OKLCH

  更接近人眼感知的颜色空间，适合生成亮度变化更均匀的色阶和暗色模式色板。

• 设计 token

  把颜色以变量或结构化数据保存，便于在设计工具、CSS、组件库和多主题系统中复用。

1. 1

   输入 Hex、RGB、HSL 或 OKLCH 格式的主色。

2. 2

   选择配色模式：单色适合稳定界面，相邻色适合自然过渡，互补色适合强调，三角色适合更丰富的视觉系统。

3. 3

   选择风格：柔和、标准、鲜明或深色，用于控制整体饱和度和明暗倾向。

4. 4

   检查主色色阶、配色方案和界面预览，确认按钮、链接、标签和卡片的层级是否清晰。

5. 5

   点击色块复制单个色值，或复制 CSS Variables / JSON 接入项目。

• 主色色阶采用 50 到 950 命名，便于映射到 Tailwind、主题变量或组件库 token。
• CSS 输出包含 primary、scheme 和 neutral 变量，可直接整理到 global.css、theme.css 或设计系统配置中。
• JSON 输出保留 primary、scheme、neutral 三组结构，适合进一步写入配置文件或设计资源管理系统。
• 每个色块都可点击复制，适合在开发调试、设计走查和临时试色时快速取值。
• 色块自动显示推荐文字色和对比度，帮助判断该颜色适合作为背景还是文字。
• 随机主色功能适合探索主题方向，预设色适合快速启动常见品牌风格。
• 界面预览能同时观察主按钮、次按钮、链接、标签和卡片背景的实际组合效果。

如果主色来自设计稿、截图或旧样式，先用 颜色转换器 确认它的准确表达，再生成完整色阶。色板落到正文、按钮和状态标签时，继续用 对比度检查 检查关键组合；当这些颜色进入首屏背景、柔和强调或活动视觉时，再交给 渐变生成器 处理过渡关系，避免另起一套割裂的视觉语言。

• 网站主题色设计

  从一个品牌主色生成完整色阶，用于按钮、链接、背景、边框和强调信息。

• 组件库颜色规范

  为 Button、Badge、Alert、Tabs、Input 等组件建立统一色阶和状态颜色。

• 暗色模式准备

  生成偏深色风格的主色和中性色，检查暗色背景下的层级与可读性。

• 设计 token 整理

  把色板导出为 CSS 变量和 JSON，便于同步到前端主题、文档站和设计系统。

• 品牌色扩展

  将一个品牌色扩展为浅色背景、标准主色、深色强调和可读文字组合。

• 数据可视化辅助色

  相邻色、互补色和三角色可用于图表分类色，但仍建议结合对比度检查。

• 落地页与营销页面

  快速生成主视觉、CTA、标签和信息卡片需要的协调色组。

• 后台管理系统配色

  为侧边栏、表格状态、筛选器、仪表盘卡片和提示信息建立稳定的颜色基线。

• 先确定主色用途：品牌识别、操作按钮、链接、图表还是状态提示，不同用途需要不同强度。
• 不要把 500 色阶用于所有场景，浅背景、边框、悬停态、深色强调应使用不同层级。
• 正文和辅助文字不要只凭色彩感觉判断，应配合对比度检查确认可读性。
• 暗色模式不要简单反转亮色模式色阶，应单独检查背景、边框、文字和强调色关系。
• 将最终色板沉淀为 token，而不是在页面里散落多个近似色值。
• 品牌色太亮或太暗时，优先调整明度和色度，不要随意改变色相。
• 图表色和 UI 操作色建议分开管理，避免“品牌色过多”导致界面语义混乱。
• 上线前在真实页面中检查按钮、链接、表单状态、警告提示和禁用态。

• 生成的色阶基于算法推导，最终是否适合品牌仍需要人工判断。
• 推荐黑字或白字只基于当前色块对比度，复杂背景、图片和渐变需要额外检查。
• OKLCH 在现代浏览器和设计系统中越来越常见，但部分旧工具链可能需要转换为 Hex 或 RGB。
• 三角色和互补色更容易产生强烈视觉冲突，使用时应控制面积和饱和度。
• 本工具生成的是色板和变量，不会自动修改你的 Tailwind 配置、CSS 文件或设计稿。
• 如果页面涉及无障碍合规，仍需使用对比度检查器验证具体前景色和背景色组合。