Naval Night to Peaches of Immortality color palette

011C34Naval Night 00551CO Tannenbaum B6DEB5Big Spender B84B60Extravagant Blush D5858DPeaches of Immortality

Open in generator Export PNG, PDF, ASE…

About this palette

Naval Night to Peaches of Immortality is a 5-color cool, vintage palette: #011C34 (Naval Night), #00551C (O Tannenbaum), #B6DEB5 (Big Spender), #B84B60 (Extravagant Blush), #D5858D (Peaches of Immortality). It mixes blue, green, red tones and feels cool overall. The strongest text pairing is #011C34 on #B6DEB5 with a contrast ratio of 11.59:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Naval Night	rgb(1, 28, 52)	hsl(208, 96%, 10%)
O Tannenbaum	rgb(0, 85, 28)	hsl(140, 100%, 17%)
Big Spender	rgb(182, 222, 181)	hsl(119, 38%, 79%)
Extravagant Blush	rgb(184, 75, 96)	hsl(348, 43%, 51%)
Peaches of Immortality	rgb(213, 133, 141)	hsl(354, 49%, 68%)

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.

Aa11.59:1 Very good#011C34 on #B6DEB5
Aa11.59:1 Very good#B6DEB5 on #011C34
Aa6.22:1 Good#011C34 on #D5858D
Aa6.22:1 Good#D5858D on #011C34
Aa6.09:1 Good#00551C on #B6DEB5
Aa6.09:1 Good#B6DEB5 on #00551C
Aa3.46:1 Poor#011C34 on #B84B60
Aa3.46:1 Poor#B84B60 on #011C34

Color blindness preview

CSS variables

/* Naval Night to Peaches of Immortality — https://swatchly.xyz/palette/011c34-00551c-b6deb5-b84b60-d5858d */
:root {
  --naval-night: #011c34;
  --o-tannenbaum: #00551c;
  --big-spender: #b6deb5;
  --extravagant-blush: #b84b60;
  --peaches-of-immortality: #d5858d;
}

Tailwind CSS v4

/* Naval Night to Peaches of Immortality — https://swatchly.xyz/palette/011c34-00551c-b6deb5-b84b60-d5858d */
@theme {
  --color-naval-night: #011c34;
  --color-naval-night-50: #eef6ff;
  --color-naval-night-100: #dceeff;
  --color-naval-night-200: #c2dbf3;
  --color-naval-night-300: #a9c4e0;
  --color-naval-night-400: #87a5c3;
  --color-naval-night-500: #6a89a7;
  --color-naval-night-600: #506d89;
  --color-naval-night-700: #3b556f;
  --color-naval-night-800: #2a4157;
  --color-naval-night-900: #1e3143;
  --color-naval-night-950: #011c34;
  --color-o-tannenbaum: #00551c;
  --color-o-tannenbaum-50: #e0ffe2;
  --color-o-tannenbaum-100: #ccf9d0;
  --color-o-tannenbaum-200: #b2e7b8;
  --color-o-tannenbaum-300: #96d39d;
  --color-o-tannenbaum-400: #72b67a;
  --color-o-tannenbaum-500: #549b5e;
  --color-o-tannenbaum-600: #3a8046;
  --color-o-tannenbaum-700: #256832;
  --color-o-tannenbaum-800: #00551c;
  --color-o-tannenbaum-900: #0b4118;
  --color-o-tannenbaum-950: #03290c;
  --color-big-spender: #b6deb5;
  --color-big-spender-50: #e1f9e0;
  --color-big-spender-100: #d4efd3;
  --color-big-spender-200: #b6deb5;
  --color-big-spender-300: #a5c7a4;
  --color-big-spender-400: #84a983;
  --color-big-spender-500: #698f69;
  --color-big-spender-600: #517551;
  --color-big-spender-700: #3e5e3d;
  --color-big-spender-800: #2e4b2e;
  --color-big-spender-900: #223a22;
  --color-big-spender-950: #132413;
  --color-extravagant-blush: #b84b60;
  --color-extravagant-blush-50: #fff1f2;
  --color-extravagant-blush-100: #ffe6e8;
  --color-extravagant-blush-200: #ffccd1;
  --color-extravagant-blush-300: #ffabb6;
  --color-extravagant-blush-400: #ef8293;
  --color-extravagant-blush-500: #d56579;
  --color-extravagant-blush-600: #b84b60;
  --color-extravagant-blush-700: #993449;
  --color-extravagant-blush-800: #7c2237;
  --color-extravagant-blush-900: #621629;
  --color-extravagant-blush-950: #410917;
  --color-peaches-of-immortality: #d5858d;
  --color-peaches-of-immortality-50: #fff0f1;
  --color-peaches-of-immortality-100: #ffe2e3;
  --color-peaches-of-immortality-200: #ffc4c9;
  --color-peaches-of-immortality-300: #f0a8af;
  --color-peaches-of-immortality-400: #d5858d;
  --color-peaches-of-immortality-500: #b76a73;
  --color-peaches-of-immortality-600: #9a515a;
  --color-peaches-of-immortality-700: #7e3d45;
  --color-peaches-of-immortality-800: #662d35;
  --color-peaches-of-immortality-900: #512127;
  --color-peaches-of-immortality-950: #351217;
}