Color
Mixer
Mix two colors together and get the blended result instantly — with HEX, RGB and HSL values.
① Pick Color A and Color B ② Drag the slider to set the ratio ③ Copy the mixed result
Color A
Color B
Color pair presets:
RGB Blending
Linear channel interpolation
Ratio
0% = Color A · 100% = Color B
Output
HEX, RGB and HSL formats
How does color mixing work?
Color mixing in digital design uses linear RGB interpolation: result = color1 + (color2 − color1) × ratio, applied independently to each R, G, B channel. At 50% you get the arithmetic mean; at 25% the result leans 75% toward Color A. This is the same algorithm behind the CSS
color-mix() function and mix-blend-mode, and mirrors the blending engine in Figma. Copy the result as HEX, RGB, or HSL directly into your codebase. For design tokens and brand palettes, chain results: mix A+B, then mix result+C for multi-step blends.Frequently asked questions
The mixer uses linear interpolation in the RGB color space. Each channel (R, G, B) is blended independently using the formula: result = color1 + (color2 - color1) × ratio. At 0% you get Color A, at 100% you get Color B, and at 50% you get the arithmetic mean of both.
RGB mixing is additive: it works with light and produces results that may differ from physical paint mixing. Mixing red and green light gives yellow, while mixing red and green paint gives a muddy brown. The digital mixer uses RGB (additive) blending, so results may differ from physical pigment mixing.
When mixing in RGB space, the midpoint of two saturated complementary colors often passes through a low-saturation (grey) area. This is because RGB linear interpolation does not preserve the hue path. For more vibrant intermediate colors, designers sometimes mix in HSL or HSV space. Our tool uses standard RGB blending for predictable, code-compatible results.
The tool outputs three formats. Use the HEX code directly in CSS properties (e.g. color: #a3c4bc). Use the RGB value with rgb() notation. Use HSL with hsl() notation. In CSS, you can also use color-mix() function natively in modern browsers: color-mix(in srgb, #color1 50%, #color2).
This tool mixes exactly two colors. To mix multiple colors, chain the results: first mix Color A and Color B, then take the result and mix it with Color C. The ratio slider lets you weight the contribution of each color in each step.
The mix ratio slider goes from 0% (100% Color A) to 100% (100% Color B). At 50% both colors contribute equally. At 25% the result leans 75% toward Color A and 25% toward Color B. You can drag the slider or type a precise value to control blending precisely.
Common use cases include: generating transition colors between brand colors, creating intermediate states for interactive elements (hover, active), building smooth color ramps for data visualization, and producing realistic color gradients. Copy the HEX or RGB output directly into your design tool or codebase.