Nocturnal Expedition to Blue Burst color palette

004961Nocturnal Expedition DDFFEDCandied Snow 007258Tropical Rainforest 00E4EFFish Boy 00998EGreen Dynasty 00A4D7Blue Burst

Open in generator Export PNG, PDF, ASE…

About this palette

Nocturnal Expedition to Blue Burst is a 6-color cool palette: #004961 (Nocturnal Expedition), #DDFFED (Candied Snow), #007258 (Tropical Rainforest), #00E4EF (Fish Boy), #00998E (Green Dynasty), #00A4D7 (Blue Burst). It mixes blue, white, turquoise tones and feels cool overall. The strongest text pairing is #004961 on #DDFFED with a contrast ratio of 9.22:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nocturnal Expedition	rgb(0, 73, 97)	hsl(195, 100%, 19%)
Candied Snow	rgb(221, 255, 237)	hsl(148, 100%, 93%)
Tropical Rainforest	rgb(0, 114, 88)	hsl(166, 100%, 22%)
Fish Boy	rgb(0, 228, 239)	hsl(183, 100%, 47%)
Green Dynasty	rgb(0, 153, 142)	hsl(176, 100%, 30%)
Blue Burst	rgb(0, 164, 215)	hsl(194, 100%, 42%)

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.

Aa9.22:1 Very good#004961 on #DDFFED
Aa9.22:1 Very good#DDFFED on #004961
Aa6.28:1 Good#004961 on #00E4EF
Aa6.28:1 Good#00E4EF on #004961
Aa5.52:1 Good#DDFFED on #007258
Aa5.52:1 Good#007258 on #DDFFED
Aa3.76:1 Poor#007258 on #00E4EF
Aa3.76:1 Poor#00E4EF on #007258

Color blindness preview

CSS variables

/* Nocturnal Expedition to Blue Burst — https://swatchly.xyz/palette/004961-ddffed-007258-00e4ef-00998e-00a4d7 */
:root {
  --nocturnal-expedition: #004961;
  --candied-snow: #ddffed;
  --tropical-rainforest: #007258;
  --fish-boy: #00e4ef;
  --green-dynasty: #00998e;
  --blue-burst: #00a4d7;
}

Tailwind CSS v4

/* Nocturnal Expedition to Blue Burst — https://swatchly.xyz/palette/004961-ddffed-007258-00e4ef-00998e-00a4d7 */
@theme {
  --color-nocturnal-expedition: #004961;
  --color-nocturnal-expedition-50: #e9f8ff;
  --color-nocturnal-expedition-100: #d3f1ff;
  --color-nocturnal-expedition-200: #b3dff5;
  --color-nocturnal-expedition-300: #96cae2;
  --color-nocturnal-expedition-400: #71abc5;
  --color-nocturnal-expedition-500: #538fa9;
  --color-nocturnal-expedition-600: #39748d;
  --color-nocturnal-expedition-700: #255c73;
  --color-nocturnal-expedition-800: #004961;
  --color-nocturnal-expedition-900: #0c3849;
  --color-nocturnal-expedition-950: #04232f;
  --color-candied-snow: #ddffed;
  --color-candied-snow-50: #ddffed;
  --color-candied-snow-100: #ddf1e6;
  --color-candied-snow-200: #c6dfd2;
  --color-candied-snow-300: #adc9ba;
  --color-candied-snow-400: #8baa9a;
  --color-candied-snow-500: #708f7f;
  --color-candied-snow-600: #567465;
  --color-candied-snow-700: #415c4f;
  --color-candied-snow-800: #31483d;
  --color-candied-snow-900: #24382e;
  --color-candied-snow-950: #14231c;
  --color-tropical-rainforest: #007258;
  --color-tropical-rainforest-50: #dafff1;
  --color-tropical-rainforest-100: #c1f7e3;
  --color-tropical-rainforest-200: #a2e4cc;
  --color-tropical-rainforest-300: #80cdb2;
  --color-tropical-rainforest-400: #56ad90;
  --color-tropical-rainforest-500: #328f73;
  --color-tropical-rainforest-600: #007258;
  --color-tropical-rainforest-700: #005b45;
  --color-tropical-rainforest-800: #004736;
  --color-tropical-rainforest-900: #003729;
  --color-tropical-rainforest-950: #002319;
  --color-fish-boy: #00e4ef;
  --color-fish-boy-50: #ebfeff;
  --color-fish-boy-100: #cafcff;
  --color-fish-boy-200: #88f3fa;
  --color-fish-boy-300: #00e4ef;
  --color-fish-boy-400: #00bfc8;
  --color-fish-boy-500: #009ea6;
  --color-fish-boy-600: #007f86;
  --color-fish-boy-700: #006469;
  --color-fish-boy-800: #004e52;
  --color-fish-boy-900: #003b3e;
  --color-fish-boy-950: #002527;
  --color-green-dynasty: #00998e;
  --color-green-dynasty-50: #d5fff9;
  --color-green-dynasty-100: #b8faf1;
  --color-green-dynasty-200: #98e8de;
  --color-green-dynasty-300: #74d3c8;
  --color-green-dynasty-400: #41b5aa;
  --color-green-dynasty-500: #00998e;
  --color-green-dynasty-600: #007b72;
  --color-green-dynasty-700: #00625b;
  --color-green-dynasty-800: #004d47;
  --color-green-dynasty-900: #003b37;
  --color-green-dynasty-950: #002522;
  --color-blue-burst: #00a4d7;
  --color-blue-burst-50: #e0f5ff;
  --color-blue-burst-100: #c5ecff;
  --color-blue-burst-200: #8fdbff;
  --color-blue-burst-300: #58c5f4;
  --color-blue-burst-400: #00a4d7;
  --color-blue-burst-500: #0089b4;
  --color-blue-burst-600: #006e92;
  --color-blue-burst-700: #005875;
  --color-blue-burst-800: #00465e;
  --color-blue-burst-900: #00374a;
  --color-blue-burst-950: #002331;
}