Skip to content
TechnologyTools

Colors

Color Mixer & Blender

Blend any two colors at any ratio with RGB and HSL mixing modes, showing the full gradient of intermediate steps.

#848C80
rgb(132, 140, 128)

Full blend strip (click to copy)

RGB mixing blends light channels (can look muddy); HSL travels the color wheel for more vivid intermediates.

Screen Mixing Is Not Paint Mixing

Displays add light (RGB), paint subtracts it (RYB/CMYK), which is why mixing blue and yellow on screen gives gray or white rather than green. For on-screen work the additive result is the correct one; for printing, simulate the mix in a subtractive space or test with the actual inks.

How the Color Math Works

  1. Pick the two endpoint colors.
  2. Set the blend proportion with the slider, from 100% A to 100% B.
  3. Choose RGB mixing (physical light blend) or HSL mixing (smoother hue travel).
  4. The full ten-step blend strip is shown; copy any step’s HEX value.
Formula & Technical Standard
RGB mix: linear interpolation per channel. HSL mix: shortest-path hue interpolation plus L/S interpolation.

Worked Example

Hover state derivation
Input: Brand color mixed 15% toward black
Output: Darker hover swatch
Mixing toward black or white derives consistent hover/active states from one brand color.
Neutral between brand colors
Input: 50/50 blend of two brand hues (HSL mode)
Output: Balanced intermediate hue
HSL-mode midpoint hues make better section backgrounds than RGB midpoints, which can turn muddy.

Common Questions

Why do RGB and HSL mixing give different results?

RGB blends channel intensities (can look muddy); HSL travels around the color wheel by hue, producing more vivid intermediates.

Is this subtractive paint mixing?

No. Screens mix additively (light). Paint and ink mix subtractively, which produces different — usually darker — results.

Colorspopular

Color Palette Generator

Turn one base color into a full design-ready palette: tints, shades, and harmonic variations, each with HEX/RGB/HSL values.

Colorspopular

CSS Gradient Generator

Design linear and radial CSS gradients with multiple stops and full angle control — previewed live, exported as clean CSS.

Colorspopular

WCAG Color Contrast Checker

Test foreground/background color pairs against WCAG 2.1 AA and AAA contrast requirements with a live text preview.