深色模式配色转换器

Dark Mode Color Converter

将浅色语义令牌自动转换为深色模式配色，三种策略可选，输出 :root 与 .dark 变量。

转换策略

浅色令牌深色对应

#FFFFFFbackground

#261717

#F8FAFCsurface

#121F2B

#E2E8F0border

#151D28

#0F172Atext-primary

#BCC8E7

#475569text-secondary

#8FA2BC

#2563EBprimary

#1453DB

#16A34Asuccess

#5DE991

#D97706warning

#F99624

#DC2626danger

#D72323

CSS 变量

:root {
  --background: #FFFFFF;
  --surface: #F8FAFC;
  --border: #E2E8F0;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --primary: #2563EB;
  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;
}

.dark {
  --background: #261717;
  --surface: #121F2B;
  --border: #151D28;
  --text-primary: #BCC8E7;
  --text-secondary: #8FA2BC;
  --primary: #1453DB;
  --success: #5DE991;
  --warning: #F99624;
  --danger: #D72323;
}

加载中…

关于此工具与使用指南

理解原理 · 操作场景 · 隐私说明

深色模式配色转换器可将一套浅色语义颜色令牌自动映射为深色模式对应值，避免简单反色带来的刺眼与脏色问题，直接产出可用的 CSS 变量。

核心特性

✓三种转换策略：反转明度、柔和降低、保持鲜艳，适配不同风格
✓语义化对照：背景、前景、边框、主色等令牌浅深并排展示
✓实时预览：每个令牌均可直接看到浅色与深色效果
✓标准 CSS 输出：生成 :root 与 .dark 两套变量，直接接入主题切换

探索相关协同工具

查看全部工具→

调色板与 WCAG 对比度检查

智能生成色阶渐变，精确计算文字与背景的 WCAG 2.1 无障碍对比度（AA/AAA）。

图片调色板提取器

上传图片自动提取主色调，基于中位切分量化算法生成调色板，一键复制 CSS 变量。

渐变色生成器

可视化调节线性、径向、圆锥渐变与颜色节点，实时预览并输出 CSS 与 Tailwind 代码。