Color Pairing Studio

Color that is not just pretty, but purposeful.

Explore color relationships through theory, emotion, contrast, and design purpose. Pick a starting color and the studio builds pairings you can read, test, preview, and keep.

Base color
#
Curated starters

The wheel marks where each color in your palette sits, so you can see the relationship.

Theory explorer

Choose how the colors should relate.

Each model is a different way of spacing colors on the wheel. Pick one and the palette regenerates from your base color.

Studio bench

Your palette, with the reasoning attached.

Filter by what you are designing, and the use cases below adjust to fit. Click any swatch to copy its hex.

Designing for
Calm Intelligence

Soft Lilac, in analogous

Live preview

See it doing real work.

The same palette, applied to interface moments where color has to earn its place. Switch the surface to pressure-test it.

Accessibility lab

Beautiful is only half of it.

Live WCAG contrast for the pairings that carry meaning: text on background, button labels, links, and accents. The ratios update with every change.

Take it with you

Copy it into whatever you build next.

Hex, CSS variables, a Tailwind snippet, the rationale, or the accessibility notes. Everything copies to your clipboard. Nothing leaves your browser.

Saved palettes

Your shelf.

Saved palettes live in this browser only. They survive a refresh, but they are yours alone.

Color principles

The ideas underneath every pairing.

A short field guide to the forces this studio is balancing for you.

Built as part of Rikki's UX Lab, where design tools feel more human, visual, and alive.