aestheticcolours

Colour pairings

Pink and Navy

Pink (#EC4899) paired with navy (#1E3A8A). Below are both colours expanded into full 11-step ramps, generated in OKLCH for even lightness steps and gamut-mapped to sRGB. Copy the Tailwind v4 config for either, or open them in the generator to fine-tune.

Pink #EC4899
Navy #1E3A8A
50#FFF1F5
100#FFDDE8
200#FFC1D7
300#FF94C1
400#FF5EAA
500#EC4899
600#BE2A79
700#9B2D69
800#772754
900#5F2445
950#2E0B20
pink — Tailwind v4@theme
@theme {
  --color-pink-50: #fff1f5;
  --color-pink-100: #ffdde8;
  --color-pink-200: #ffc1d7;
  --color-pink-300: #ff94c1;
  --color-pink-400: #ff5eaa;
  --color-pink-500: #ec4899;
  --color-pink-600: #be2a79;
  --color-pink-700: #9b2d69;
  --color-pink-800: #772754;
  --color-pink-900: #5f2445;
  --color-pink-950: #2e0b20;
}
50#F2F5FF
100#DEE7FF
200#C3D5FF
300#9BBAFF
400#759EFF
500#5580EE
600#416ACC
700#365BA6
800#28487F
900#1E3A8A
950#0A1A32
navy — Tailwind v4@theme
@theme {
  --color-navy-50: #f2f5ff;
  --color-navy-100: #dee7ff;
  --color-navy-200: #c3d5ff;
  --color-navy-300: #9bbaff;
  --color-navy-400: #759eff;
  --color-navy-500: #5580ee;
  --color-navy-600: #416acc;
  --color-navy-700: #365ba6;
  --color-navy-800: #28487f;
  --color-navy-900: #1e3a8a;
  --color-navy-950: #0a1a32;
}

Aesthetic

Want this palette built into your site?

You bring the colours. You'll get a site that uses them properly, designed and built by the team at Aesthetic.

More combinations