Naval Blue to Peach Beach color palette

364C6ANaval Blue 2064ABWing Commander A78D5EIced Coffee E2AE4FGold of Triumph FFD0A2Peach Beach

About this palette

Naval Blue to Peach Beach is a 5-color warm, earthy, vintage palette: #364C6A (Naval Blue), #2064AB (Wing Commander), #A78D5E (Iced Coffee), #E2AE4F (Gold of Triumph), #FFD0A2 (Peach Beach). It mixes blue, yellow, orange tones and feels warm overall. The strongest text pairing is #364C6A on #FFD0A2 with a contrast ratio of 6.17:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Naval Blue	rgb(54, 76, 106)	hsl(215, 33%, 31%)
Wing Commander	rgb(32, 100, 171)	hsl(211, 68%, 40%)
Iced Coffee	rgb(167, 141, 94)	hsl(39, 29%, 51%)
Gold of Triumph	rgb(226, 174, 79)	hsl(39, 72%, 60%)
Peach Beach	rgb(255, 208, 162)	hsl(30, 100%, 82%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa6.17:1 Good#364C6A on #FFD0A2
Aa6.17:1 Good#FFD0A2 on #364C6A
Aa4.34:1 Poor#364C6A on #E2AE4F
Aa4.34:1 Poor#E2AE4F on #364C6A
Aa4.26:1 Poor#2064AB on #FFD0A2
Aa4.26:1 Poor#FFD0A2 on #2064AB

Color blindness preview

CSS variables

/* Naval Blue to Peach Beach — https://swatchly.xyz/palette/364c6a-2064ab-a78d5e-e2ae4f-ffd0a2 */
:root {
  --naval-blue: #364c6a;
  --wing-commander: #2064ab;
  --iced-coffee: #a78d5e;
  --gold-of-triumph: #e2ae4f;
  --peach-beach: #ffd0a2;
}

Tailwind CSS v4

/* Naval Blue to Peach Beach — https://swatchly.xyz/palette/364c6a-2064ab-a78d5e-e2ae4f-ffd0a2 */
@theme {
  --color-naval-blue: #364c6a;
  --color-naval-blue-50: #eff6ff;
  --color-naval-blue-100: #dfecff;
  --color-naval-blue-200: #c6d9f4;
  --color-naval-blue-300: #afc5e3;
  --color-naval-blue-400: #8fa7c7;
  --color-naval-blue-500: #748dae;
  --color-naval-blue-600: #5c7493;
  --color-naval-blue-700: #485e7b;
  --color-naval-blue-800: #364c6a;
  --color-naval-blue-900: #2a3b51;
  --color-naval-blue-950: #192536;
  --color-wing-commander: #2064ab;
  --color-wing-commander-50: #eef6ff;
  --color-wing-commander-100: #dbebff;
  --color-wing-commander-200: #b6d7ff;
  --color-wing-commander-300: #8ac0ff;
  --color-wing-commander-400: #5e9ee8;
  --color-wing-commander-500: #3f81ca;
  --color-wing-commander-600: #2064ab;
  --color-wing-commander-700: #124f8c;
  --color-wing-commander-800: #053d72;
  --color-wing-commander-900: #002f5c;
  --color-wing-commander-950: #001d3d;
  --color-iced-coffee: #a78d5e;
  --color-iced-coffee-50: #fff6e6;
  --color-iced-coffee-100: #feedd0;
  --color-iced-coffee-200: #eedbb8;
  --color-iced-coffee-300: #dcc69e;
  --color-iced-coffee-400: #c0a77b;
  --color-iced-coffee-500: #a78d5e;
  --color-iced-coffee-600: #897042;
  --color-iced-coffee-700: #6f582d;
  --color-iced-coffee-800: #58441d;
  --color-iced-coffee-900: #443311;
  --color-iced-coffee-950: #2b1e07;
  --color-gold-of-triumph: #e2ae4f;
  --color-gold-of-triumph-50: #ffeed2;
  --color-gold-of-triumph-100: #ffe0ad;
  --color-gold-of-triumph-200: #f2c983;
  --color-gold-of-triumph-300: #e2ae4f;
  --color-gold-of-triumph-400: #c29031;
  --color-gold-of-triumph-500: #a77600;
  --color-gold-of-triumph-600: #875f00;
  --color-gold-of-triumph-700: #6d4c00;
  --color-gold-of-triumph-800: #563b00;
  --color-gold-of-triumph-900: #442e00;
  --color-gold-of-triumph-950: #2c1c00;
  --color-peach-beach: #ffd0a2;
  --color-peach-beach-50: #fff5eb;
  --color-peach-beach-100: #ffe9d4;
  --color-peach-beach-200: #ffd0a2;
  --color-peach-beach-300: #e2bb95;
  --color-peach-beach-400: #c49a6f;
  --color-peach-beach-500: #a87e52;
  --color-peach-beach-600: #8c6338;
  --color-peach-beach-700: #724d25;
  --color-peach-beach-800: #5a3a17;
  --color-peach-beach-900: #472c0d;
  --color-peach-beach-950: #2e1a05;
}