在 RGB 或 HSL 空间按比例混合两种颜色,并输出 CSS。
混合两种或多种颜色,以探索跨产品和品牌工作流程的 UI 调色板、渐变和视觉实验的中间混合。
它组合输入颜色并以可配置的比例计算混合输出。
它帮助设计师和开发者找到不同品牌色之间更平滑的过渡色调。
它支持悬停状态、背景和强调变体的快速原型设计。
颜色对
#2563EB + #F59E0B
混合比例
70% 主要,30% 重音
主题样本
#0F172A + #E2E8F0
混合结果
#6284C8
步骤系列
从源A到源B的10%增量
界面说明
在浅色和深色背景中验证混合颜色。
混合颜色看起来暗淡
调整比例或混合感知颜色空间以获得更好的活力。
对比度低于可访问性目标
对文本运行对比度检查和 UI 控件。
深色模式中的意外转变
生成专用的深色主题混合,而不是重复使用浅色结果。
太多类似的标记使调色板混乱
仅保留与实际 UI 使用相关的有意义的混合步骤。
颜色混合器 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
RGB 混合总是最适合 UI 吗?
这是常见做法,但感知色彩空间通常能带来更平滑的视觉过渡。
我应该保留多少个混合步骤?
仅使用映射到状态或组件的实用步骤。
混合颜色可以取代手动设计决策吗?
它们有助于探索,但最终选择应通过设计进行审查。
暗色模式需要单独生成混合色吗?
通常是的,黑暗环境通常需要调整亮度行为。