Color & Palette

Color Mixer

Drag a ratio slider between two colors, see all seven color spaces side-by-side, generate multi-stop CSS gradients with the chosen color space, mix up to six weighted colors at once, save mixes for comparison, and read WCAG contrast vs both inputs + white / black.

Two-color mixer

Pick two colors, drag the slider, and choose how they should blend. The seven color spaces produce visibly different results — compare them at a glance.

#0ea5e9

R14

G165

B233

#ec4899

R236

G72

B153

Mix ratio50% · OKLCH

Even 50 / 50 mix

Side-by-side at current ratio

Cylindrical OKLab; best for clean hue transitions.

Mixed color

#a179f6

HEX#a179f6

RGBrgb(161, 121, 246)

HSLhsl(259, 87%, 72%)

OKLCHoklch(0.671 0.18 295.9)

OKLABoklab(0.671 0.079 -0.162)

Contrast (WCAG)

Aavs A1.15:1

Aavs B1.11:1

Aaon white3.19:1

Aaon black6.58:1

A ↔ B: 1.27:1

Gradient generator

Spread the mix across multiple stops to export a CSS or Tailwind gradient using the same color space.

0EA5E9

5398F8

7D89FD

A179F6

BF68E2

D858C3

EC4899

Stops7

Direction

CSS

background: linear-gradient(to right, #0ea5e9 0%, #5398f8 16.7%, #7d89fd 33.3%, #a179f6 50%, #bf68e2 66.7%, #d858c3 83.3%, #ec4899 100%);

Tailwind 4

bg-gradient-to-r from-[#0ea5e9] via-[#5398f8] via-[#7d89fd] via-[#a179f6] via-[#bf68e2] via-[#d858c3] to-[#ec4899]

Multi-color mix

Average up to six colors with per-swatch weight — great for palette averages.

Sample swatches

Tap a swatch to assign it to A or B. The target auto-toggles after each pick.

Assign to

Tailwind 500s

Material

Brand colors

Pinned mixes

Pin up to 5 mixes to compare brand palette candidates side by side.

Pin a mix from the result panel to start your shortlist.