On Waves Color Studio

Pick a base color, choose a harmony mode, and watch your palette come to life.

Color Input

0
188
212

Color Theory Tip

Complementary Colors

Colors directly opposite on the color wheel create maximum contrast and visual impact. This pairing naturally draws attention.

Usage tip: Use the complement sparingly as a CTA or accent color. Too much of both can create visual tension — let one dominate.

Export Palette

:root {
  --color-primary: #00BCD4;
  --color-secondary: #D61900;
}

Generated Palette

Base#00BCD4
Complement#D61900

Color Roles

Assign each color a job, then pick a neutral base for the preview.

Primary60%#00BCD4

Dominant brand color — hero band & key sections

Secondary30%#D61900

Supporting color — bands, chips & icons

Accent10%#D61900

The pop — buttons, links & highlights

Neutral Base#f7f8f8

Backgrounds & large calm areas (whites / grays)

Great designs lean on the neutral base for most of the page, letting your primary and secondary colors do the heavy lifting and the accent create a small, deliberate pop.

Live Website Preview

Preview: your palette applied like a real website