混合两种颜色,可调节比例,预览 HEX、RGB 和 HSL 结果
实用工具
关于此工具
颜色混合器支持选取两种颜色,通过可调节的比例滑块进行混合。它实时插值 RGB 通道,并以预览色块展示混合结果,同时显示 HEX、RGB 和 HSL 值——所有计算均在浏览器本地完成。
主要功能
- 使用原生取色器选取两种颜色
- 可调节的混合比例滑块,范围 0% 至 100%
- 实时结果色块,即时更新
- 混合结果以 HEX、RGB 和 HSL 三种格式显示
- 一键复制 HEX 值到剪贴板
- 复制成功时显示提示通知
使用场景
- 寻找两种品牌颜色之间的完美中间色
- 为 CSS 创建平滑的渐变过渡色
- 为 UI 组件的悬停和激活状态混合颜色
- 为设计项目尝试不同的颜色组合
- 生成无障碍色阶的中间色
color
mixer
blend
常见问题
颜色混合器是如何工作的?
颜色混合器通过根据滑块控制的比例对两种颜色的 RGB 通道进行插值来混合颜色。比例为 50% 时结果是等量混合;将滑块向颜色 A 方向移动会增加其影响,反之亦然。
结果显示哪些颜色格式?
混合颜色以三种格式显示:HEX、RGB 和 HSL。当您调整颜色或比例滑块时,每个值都会实时更新。
可以复制混合后的颜色值吗?
可以,点击复制 HEX 按钮即可将混合颜色的 HEX 值复制到剪贴板。复制成功后会显示提示通知。
比例滑块有什么用?
比例滑块控制每种输入颜色对结果的贡献程度。比例为 0% 时结果完全是颜色 B;100% 时完全是颜色 A;50% 时两种颜色贡献相等。
我的颜色数据会发送到服务器吗?
不会。所有颜色混合计算均在浏览器本地完成,不会上传任何数据到服务器,确保您的信息完全私密和安全。