混合色调色计算器

Color Mixer

按比例混合两种颜色，生成等分中间色带，并输出 CSS color-mix() 函数代码。

颜色 A50%

颜色 B50%

混合比例50 / 50

混合结果

等分中间色

color-mix() 代码

color-mix(in srgb, #2563EB 50%, #EC4899)

加载中…

关于此工具与使用指南

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

混合色调色计算器可按任意比例混合两个 HEX 颜色，实时查看混合结果与等分中间色带，并生成现代浏览器支持的 color-mix() 代码。

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

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

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