Guides JP

Color Mixer

Mix two colors to create blends and gradients. Adjust the blend ratio with a slider and view results in HEX/RGB.

Last updated: 2026/10/16 Design Feedback & bug reports
Blend Ratio 50% / 50%

Use the slider to adjust how the two colors are mixed.

HEX #9A6F86
RGB rgb(154, 111, 134)
Gradient
5

How to Use

1

Pick Two Colors

Enter Color 1 and Color 2 using the color picker or HEX code.

2

Adjust the Blend Ratio

Move the slider to see the blended color update in real-time in HEX and RGB.

3

Get the Gradient

Choose 2 to 10 steps and copy each color or the CSS gradient with one click.

About Color Mixer

A web tool that blends two colors at a chosen ratio to create intermediate colors and gradients. Mixing is computed via linear interpolation in the sRGB color space. All processing runs entirely in your browser, so your color data is never sent to any server.

Features

  • Real-time BlendingMove the slider to instantly compute the blended color, shown in both HEX and RGB.
  • Gradient GenerationGenerate 2 to 10 intermediate steps and copy them as CSS or a HEX list at once.
  • One-click CopyClick any color swatch to copy its HEX code instantly.
  • Privacy ProtectedAll processing happens in your browser. Color data is never sent to servers.

Use Cases

  • Finding the midpoint between two brand colors
  • Building sequential color steps for UI or charts
  • Quickly grabbing a CSS linear-gradient snippet
  • Prototyping mid tones between light and dark
  • Simulating color blending for illustration and design

FAQ

Is the color mixer free to use?
Yes, it is completely free. No registration required, just open it in your browser and start mixing.
How are the colors mixed?
Each of the R, G, and B channels is linearly interpolated in the sRGB color space. At a 50% ratio, the result is exactly halfway between the two RGB values. This follows additive screen-based blending, not subtractive paint mixing.
Can I use 3-digit HEX values (#abc)?
Yes. Shorthand 3-digit values like #abc are automatically expanded to #aabbcc. You may also omit the leading # when typing.
How many gradient steps can I create?
You can choose from 2 to 10 steps. Intermediate colors are spaced evenly, including the Color 1 and Color 2 endpoints, and can be copied as a CSS linear-gradient.
Is my color data saved or sent anywhere?
No. Your color data is never sent to or stored on any server. All calculations happen locally in your browser, so you can use the tool with peace of mind.

Related Tools

Color Converter Convert between HEX, RGB, and HSL colors Color Palette Generator Generate harmonious color palettes from a base color CSS Gradient Generator Visually create Linear, Radial & Conic CSS gradients

Popular Tools

Character Counter Count characters, words, and lines in real-time JSON Formatter Format and validate JSON with syntax highlighting QR Code Generator Create custom QR codes with logo, colors & styles Password Generator Generate secure random passwords with one click Base64 Encoder Encode and decode text or files to Base64 IP Address Checker Check your global IP address

Related Guides

Color Mixing Basics: Additive (RGB) vs Subtractive (CMY) Explained A beginner-friendly guide to color mixing: additive mixing where light (RGB) turns white when combined, subtractive mixing where paint (CMY) turns black, adding colors on the web, making intermediate colors, complementary colors, and where intuition and reality diverge.