颜色混合器:两色按比例混合 (RGB / HSL / LAB)

真实使用场景

• 给联名落地页混出一个共用强调色

  一次合作活动,把你方品牌蓝 #2563EB 和对方的橙 #F97316 拼在 一起,市场想要一个统一的「联名」强调色用在按钮和顶部徽章上。 用 LAB 模式取 50% 混合,避开 RGB 中点那种发灰发脏的结果, 再把 HEX 直接复制进按钮 token。两个值进去,一个能直接上线的 强调色出来,不用在 Figma 里凭感觉调。

• 给设计系统 token 表生成一条 9 阶 tint 色阶

  手上有个基准色 #0EA5E9,要做出类似 slate-50 到 slate-900 的 九档色阶填进 tokens 文件。把两端设成这个色相的接近白和接近黑, 用 LAB 生成 9 阶(感知步进才均匀),再把整组 HEX 数组贴进 tailwind.config.js。原本要手调九次的猜测,现在一次复制搞定。

• 找出新旧强调色之间的正中间过渡色

  一次改版,强调色要分两个版本从 #DB2777 过渡到 #7C3AED, 产品想在中间那个 sprint 用一个过渡色。把两个 HEX 丢进去, 比例拉到 50%,读出 HEX 和 HSL 结果。你交出一个站得住脚的 中点色,而不是在 Slack 里为三个长得差不多的粉色吵半天。

• 在配色课上讲清 RGB 和 LAB 中点为什么不一样

  设计课上要给同学演示:为什么 #000000 和 #FFFFFF 取 50%, RGB 给的是 #808080,LAB 却大约是 #777777。当场切换色彩空间 开关,把两个中点色块并排截图,伽马编码和感知均匀的差别就成了 一个 20 秒的演示,不用堆一黑板公式。

常见踩坑

• 用 RGB 混两个高饱和色,结果中点发灰。蓝

• 在 RGB 里做 token 色阶,纳闷中间几档为什么挤在一起。因为 sRGB 是伽马编码,等距的 RGB 步进在人眼看来并不等距。用 LAB 生成 5/9/11 阶,感知间距才均匀。

• 把屏幕上的 HEX 当成可直接印刷的颜色。显示器 sRGB 值和 CMYK 油墨不是一一对应。把混出的 HEX 当目标值,实际印刷交给印厂的 ICC 配置去换算。

隐私说明