Skip to content
πŸ› οΈToolsShed

Color Mixer

Mix two colors and see blended results in RGB, HEX, and HSL.

A 50% / B 50%
#6366f1
#855fdb
#a857c5
#ca50af
#ec4899

About this tool

Color Mixer is a simple but powerful tool for blending two colors and exploring the results across multiple formats. Whether you're a designer choosing brand color palettes, a developer building color schemes for interfaces, or an artist experimenting with color harmony, this tool instantly shows you the RGB, HEX, and HSL values of any color combination without needing graphics software or math calculations.

To use the tool, select or paste two colors using the color pickers or HEX input fields, then adjust the blend ratio using the slider to control how much of each color influences the final result. The mixer updates in real-time, displaying the blended output alongside all three color formats, making it easy to copy exact values for use in code, design files, or digital projects. You can also reverse the colors or tweak individual RGB channels for fine-tuned control.

Frequently Asked Questions

Code Implementation

# RGB linear interpolation color mixing

def hex_to_rgb(hex_color: str) -> tuple[int, int, int]:
    hex_color = hex_color.lstrip('#')
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

def rgb_to_hex(r: int, g: int, b: int) -> str:
    return f"#{r:02x}{g:02x}{b:02x}"

def mix_colors(color_a: str, color_b: str, ratio: float = 0.5) -> str:
    """
    Mix two hex colors.
    ratio=0.0 -> pure color_a
    ratio=0.5 -> equal mix
    ratio=1.0 -> pure color_b
    """
    r1, g1, b1 = hex_to_rgb(color_a)
    r2, g2, b2 = hex_to_rgb(color_b)

    r = round(r1 + (r2 - r1) * ratio)
    g = round(g1 + (g2 - g1) * ratio)
    b = round(b1 + (b2 - b1) * ratio)

    return rgb_to_hex(r, g, b)

# Generate gradient steps
def gradient_steps(color_a: str, color_b: str, steps: int = 5) -> list[str]:
    return [mix_colors(color_a, color_b, i / (steps - 1)) for i in range(steps)]

print(mix_colors("#6366f1", "#ec4899", 0.5))  # #a7559d
print(gradient_steps("#6366f1", "#ec4899"))

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.