Skip to content

Color Mixer

Blend two colors together at custom percentages with multiple blend modes, full color space support, and accessibility analysis

Updated

What is the Color Mixer?

Blend any two colors with precision. The Color Mixer combines hex, RGB, or HSL color values at custom percentages using professional-grade blend modes — from simple linear interpolation to Photoshop-style effects like multiply, screen, and overlay.

What It Does

  • Mix at any percentage — 0% to 100% control between two colors
  • Multiple blend modes — Normal, Multiply, Screen, Overlay, Soft Light, Hard Light
  • Three input formats — Hex (#RRGGBB), RGB (0-255), or HSL (0-360, 0-100%)
  • Live gradient preview — See 9-step interpolation between your colors
  • Accessibility analysis — WCAG luminance, contrast ratios, and pass/fail ratings
  • Instant export — CSS gradients, SVG definitions, Tailwind config, CSS variables

Perfect For

  • UI/UX designers creating cohesive color palettes and gradients
  • Web developers generating accessible color combinations
  • Illustrators finding natural mid-tones and shadows
  • Brand designers ensuring color consistency across media
  • Accessibility advocates verifying contrast compliance

Why This Tool?

Most color mixers stop at two-color blending. This tool reveals the complete picture: how colors behave across the entire spectrum, how blend modes affect the result, and whether your mixed color actually works for real users with accessibility needs.

How it works

Color Spaces Explained

The Color Mixer operates in RGB color space internally, converting all inputs (hex, RGB, HSL) to normalized 0-1 values before processing. This ensures consistent results regardless of how you input colors.

Input Format Conversion Notes
Hex (#RRGGBB) Direct to RGB Supports 3-digit shorthand (#RGB)
RGB (0-255) Normalized to 0-1 Clamped to valid range
HSL (0-360, 0-100%) Converted via standard algorithm Hue wraps at 360°

Blend Modes in Detail

Normal (Linear Interpolation)

The default mode performs simple linear interpolation (lerp) between color values:

Cresult=C1+(C2−C1)×percentage100C_{result} = C_1 + (C_2 - C_1) \times \frac{percentage}{100}

Each RGB channel is interpolated independently. This creates the most predictable, physically intuitive color mixing.

Multiply

Darkens by multiplying color values. Simulates light passing through two translucent filters:

Cresult=C1×C2C_{result} = C_1 \times C_2

Useful for shadows, depth effects, and simulating ink on paper.

Screen

Lightens by inverse multiplication. The opposite of multiply:

Cresult=1−(1−C1)×(1−C2)C_{result} = 1 - (1 - C_1) \times (1 - C_2)

Creates glow effects, highlights, and luminous color combinations.

Overlay

Combines multiply and screen based on the base color's brightness:

Cresult={2C1C2if C1<0.51−2(1−C1)(1−C2)otherwiseC_{result} = \begin{cases} 2C_1C_2 & \text{if } C_1 < 0.5 \\ 1 - 2(1-C_1)(1-C_2) & \text{otherwise} \end{cases}

Increases contrast — darks get darker, lights get lighter.

Soft Light

Gentle lighting effect using a combination of dodge and burn:

Cresult={2C1C2+C12(1−2C2)if C2<0.52C1(1−C2)+C1(2C2−1)otherwiseC_{result} = \begin{cases} 2C_1C_2 + C_1^2(1-2C_2) & \text{if } C_2 < 0.5 \\ 2C_1(1-C_2) + \sqrt{C_1}(2C_2-1) & \text{otherwise} \end{cases}

Subtle and natural — ideal for skin tones and organic colors.

Hard Light

Strong lighting effect, more aggressive than overlay:

Cresult={2C1C2if C2<0.51−2(1−C1)(1−C2)otherwiseC_{result} = \begin{cases} 2C_1C_2 & \text{if } C_2 < 0.5 \\ 1 - 2(1-C_1)(1-C_2) & \text{otherwise} \end{cases}

Creates dramatic highlights and shadows.

WCAG Luminance Calculation

Relative luminance follows the WCAG 2.1 specification:

L=0.2126×R+0.7152×G+0.0722×BL = 0.2126 \times R + 0.7152 \times G + 0.0722 \times B

Where R, G, B are linearized (gamma-corrected) values:

if csRGB≤0.03928:clinear=csRGB12.92\text{if } c_{sRGB} \leq 0.03928: c_{linear} = \frac{c_{sRGB}}{12.92}

else: clinear=(csRGB+0.0551.055)2.4\text{else: } c_{linear} = \left(\frac{c_{sRGB} + 0.055}{1.055}\right)^{2.4}

Contrast Ratio

Against white (L = 1.0):

CR=Lwhite+0.05Lcolor+0.05=1.05Lcolor+0.05\text{CR} = \frac{L_{white} + 0.05}{L_{color} + 0.05} = \frac{1.05}{L_{color} + 0.05}

Rating Contrast Ratio Use Case
AAA ≥ 7:1 Enhanced accessibility
AA ≥ 4.5:1 Standard text
AA Large ≥ 3:1 Large text (18pt+)
Fail < 3:1 Decorative only

Gradient Generation

The 9-step gradient includes endpoints at 0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, and 100%. This provides sufficient resolution to visualize the color curve while remaining compact.

CSS output uses the linear-gradient() function with explicit color stops. SVG output generates <linearGradient> with <stop> elements at calculated offsets.

Examples

Sunset Gradient

Mix coral red and turquoise at 50% to create a vibrant sunset mid-tone

Color 1: #FF6B6B, Color 2: #4ECDC4, Percentage: 50%
 
#A6B9B4 — a soft desaturated green perfect for backgrounds

Deep Ocean Shadow

Use multiply blend mode to darken ocean blue with navy

Color 1: #006BA6, Color 2: #001F3F, Percentage: 60%, Mode: Multiply
 
#00152A — an almost black-blue with depth

Accessible Button Color

Find a mix that passes WCAG AA against white backgrounds

Color 1: #FFD700, Color 2: #FF8C00, Percentage: 40%
 
#FFB800 with 2.1:1 luminance, indicating use on dark backgrounds only

Soft Light Portrait

Create gentle skin-tone variations with soft-light blending

Color 1: #F5D0C5, Color 2: #E8A87C, Percentage: 35%, Mode: Soft Light
 
#EBBBA8 — warm natural tone for illustrations

High Contrast CTA

Screen blend to amplify vibrancy for call-to-action buttons

Color 1: #7209B7, Color 2: #F72585, Percentage: 70%, Mode: Screen
 
#FF4EC4 — electric pink that pops on dark interfaces

Frequently asked questions

What color formats does the Color Mixer support?

The Color Mixer accepts Hex (#RRGGBB or #RGB shorthand), RGB (0-255 per channel), and HSL (0-360° hue, 0-100% saturation/lightness). You can switch input modes independently for each color, and the tool synchronizes all representations automatically.

What is the difference between blend modes?

Normal creates a straightforward mix between colors. Multiply darkens (like overlapping inks). Screen lightens (like projected light). Overlay increases contrast. Soft Light applies gentle lighting. Hard Light applies strong lighting. Each mode simulates different physical or optical color combination scenarios.

Why does my mixed color look different than expected?

Color mixing is not perceptually uniform in RGB space. Two colors with equal numerical distance may appear to shift differently depending on their hue and saturation. For more predictable results with hue shifts, consider working in HSL mode for input, though the actual blend still occurs in RGB space.

What does the WCAG rating mean?

The WCAG (Web Content Accessibility Guidelines) rating indicates how well your mixed color contrasts against white backgrounds. AAA (7:1+) is best for small text. AA (4.5:1+) works for normal text. AA Large (3:1+) suffices for large text. Fail means the color should only be used decoratively or on dark backgrounds.

How do I use the exported CSS gradient?

Copy the CSS gradient code into any background or background-image property. Example: background: linear-gradient(to right, #FF6B6B, #A6B9B4, #4ECDC4);. The 9-step gradient provides smooth interpolation — reduce stops if you need simpler code.

Can I mix more than two colors?

This tool blends two colors at a time. For multi-color gradients, chain multiple mix operations or use the 9-step gradient preview as a starting point, then add intermediate colors manually. Tools like the CSS gradient generator can extend this with additional stops.

Why does the percentage go from Color 1 to Color 2?

At 0%, you see pure Color 1. At 100%, you see pure Color 2. At 50%, you see an equal blend (in Normal mode). This follows standard interpolation conventions. Use the Swap button to reverse direction without retyping values.

What is luminance and why does it matter?

Luminance measures perceived brightness, weighted by human eye sensitivity (green appears brightest). It's crucial for accessibility — two colors with the same numerical brightness can have very different luminance. The tool calculates this per WCAG standards for accurate contrast prediction.

How accurate are the blend modes compared to Photoshop?

The blend modes implement standard compositing formulas used across design software. Results match Photoshop, Figma, and CSS mix-blend-mode closely. Minor differences may occur due to color space handling (this tool uses sRGB).

Can I save or share my color mixes?

The tool operates client-side only with no server storage. To save a mix, copy the hex values and percentage. To share, export the CSS/SVG code or screenshot the result. Bookmarking the page will not preserve your current colors.

Why do some blends create muddy or gray colors?

Complementary colors (opposites on the color wheel) mixed in RGB often desaturate toward gray because you're averaging opposing wavelengths. This is mathematically correct but sometimes visually disappointing. Try blend modes like Screen or Overlay to preserve vibrancy, or adjust the mix percentage away from 50%.

What browsers support the exported CSS?

The exported CSS uses standard linear-gradient() syntax supported in all modern browsers (Chrome, Firefox, Safari, Edge) since 2012. SVG gradients work in all SVG-capable browsers. No vendor prefixes or fallbacks are included as they are no longer necessary.

How do I convert the result back to HSL for my design system?

The tool displays HSL values automatically in the result panel. If you need precise values for code, the Tailwind Config export includes ready-to-use HSL-equivalent hex codes. Most design tools (Figma, Sketch) accept hex and convert internally.

Related tools

More utilities you might find handy.

Color

CMYK to RGB

Convert CMYK print colors to RGB values instantly with live preview, hex output, and copy-ready results.
Color

Color Blindness Simulator

Preview how images and designs appear to people with protanopia, deuteranopia, tritanopia, and other color vision deficiencies
Color

Color Escape Code Generator

Generate ANSI terminal color escape codes for styles, foregrounds, and backgrounds across bash, python, javascript, and more.