颜色混合器-将两种颜色按比例混合，生成新的颜色

颜色 1

#FF0000

颜色 2

#0000FF

混合模式：

RGB 混合▼

混合比例50% : 50%

#FF0000#0000FF

混合结果

#800080

HEX

#800080

RGB

rgb(128, 0, 128)

HSL

hsl(300, 100%, 25%)

渐变预览

#FF0000#800080#0000FF

CSS 代码

/* CSS 渐变 */
background: #FF0000;
background: linear-gradient(to right, #FF0000, #0000FF);
background: -webkit-linear-gradient(left, #FF0000, #0000FF);
background: -moz-linear-gradient(left, #FF0000, #0000FF);

工具概述

颜色混合器是一款实用的颜色混合工具，可以将两种颜色按照指定比例混合，生成新的颜色。支持 RGB 混合和 LAB 混合两种模式，满足不同场景的设计需求。

混合模式说明

1. RGB 混合

直接对 RGB 三个通道的数值进行线性插值混合。计算简单快速，是最常用的混合方式。适合大多数网页设计和 UI 设计场景。

2. LAB 混合

将颜色转换到 LAB 颜色空间进行混合，然后再转换回 RGB。LAB 是基于人眼感知的颜色空间，混合结果更符合人眼的视觉感受，色彩过渡更自然。适合需要更精确色彩控制的场景，如印刷设计、品牌配色等。

使用方法

从预设颜色中选择或自定义输入两种颜色
选择混合模式（RGB 或 LAB）
调整混合比例滑块
查看混合结果并复制颜色值
复制渐变 CSS 代码用于项目

混合比例说明

0%：完全使用颜色1
50%：两种颜色各占一半
100%：完全使用颜色2

渐变 CSS 复制

工具提供两种渐变代码复制选项：

简洁版：只包含标准语法，适合现代浏览器
完整版：包含各浏览器前缀，兼容性更好