Color Mixer - Blend Two Colors Together

How to use this tool

1. Choose two colors. Use either the color pickers or enter a three- or six-digit hexadecimal value for Color A and Color B.
2. Set the ratio. Move the slider from 0% B, which shows Color A, to 100% B, which shows Color B.
3. Compare blend modes. Select RGB, HSL hue arc, or pigment sqrt-space and compare the resulting swatch and sampled preview.
4. Copy a color format. Use Copy hex, Copy RGB, or Copy HSL to copy the current mixed color to your clipboard.

Blend modes

Color values can be mixed in different ways, so the same two endpoints can produce different midpoints. The preview samples the selected mode along the full blend and places a marker at the current ratio. RGB is useful when you want a direct channel-by-channel screen color transition. HSL can be easier to reason about when choosing a hue path. Pigment mode is a simple approximation for a darker, less washed-out midpoint. None of these modes is a universal model of how every display, ink, or paint will behave.

• RGB (linear): Interpolates each red, green, and blue channel independently. The simplest mode; produces the mathematically "average" color.
• HSL (hue arc): Interpolates hue, saturation, and lightness, choosing the shorter path around the hue wheel. HSL is convenient for hue control, but it is not perceptually uniform and does not guarantee evenly spaced visual changes.
• Pigment (sqrt-space): Uses a square-root transform that approximates how physical pigments mix. Good for artistic color blending.

Mix ratio

Drag the slider left for more of Color A, right for more of Color B. The number is the percentage contributed by Color B: 0% returns Color A, 50% gives the two endpoints equal weight, and 100% returns Color B. Intermediate values let you check a tint between those endpoints, such as a 25% accent in a button background or a 75% shift toward a darker brand color. The mixed hex, RGB, and HSL values update together, and each format has its own copy control.

Why square-root-space (pigment) mixing looks different

Light is additive: mixing colored lights (like LEDs or monitor pixels) adds their intensities. Mixing red and green light produces yellow. But physical pigments are subtractive: they absorb wavelengths rather than emitting them. Direct RGB interpolation mixes display channel numbers, which can create a washed-out midpoint for some pairs. Pigment mode takes the square root of each normalized RGB channel, interpolates those values, then squares the result. This channel-wise approximation often darkens midpoints compared with RGB; it does not model individual pigments, reflectance spectra, or lighting conditions, so use it as a visual design aid rather than a paint recipe. For example, mixing red and blue at 50% gives a direct RGB purple, a brighter magenta along the short HSL hue arc, and a darker purple in this square-root mode.

Design use cases

Try RGB when matching a CSS color transition, HSL when the direction around the hue wheel is the main decision, and pigment mode when exploring a darker midpoint. The sampled preview follows the active blend function at regular points from Color A to Color B, so it reflects the chosen model instead of relying on the browser's default sRGB gradient interpolation. This is still a two-color preview: it does not export a multi-stop palette or guarantee accessibility contrast. Check final text and background pairs separately before using them in an interface.

• Brand color gradients: compare interpolation modes between two brand colors and choose a midpoint that fits the rest of the design.
• Palette exploration: compare a few ratio settings between a primary and an accent before building a larger token scale in a palette tool.
• Contrast follow-up: use a mixed color as a candidate text or background color, then check that pair separately with a contrast tool.