Start generating

Nocturnal Expedition to Gum Leaf color palette

03495BNocturnal ExpeditionFFEFE7Vanilla BlushB3809DRomanov Mauve4B705CCactusA4CDB5Gum Leaf
Open in generator Export PNG, PDF, ASE…

About this palette

Nocturnal Expedition to Gum Leaf is a 5-color muted, cool palette: #03495B (Nocturnal Expedition), #FFEFE7 (Vanilla Blush), #B3809D (Romanov Mauve), #4B705C (Cactus), #A4CDB5 (Gum Leaf). It mixes blue, white, pink, green tones and feels cool overall. The strongest text pairing is #03495B on #FFEFE7 with a contrast ratio of 8.90:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nocturnal Expeditionrgb(3, 73, 91)hsl(192, 94%, 18%)
Vanilla Blushrgb(255, 239, 231)hsl(20, 100%, 95%)
Romanov Mauvergb(179, 128, 157)hsl(326, 25%, 60%)
Cactusrgb(75, 112, 92)hsl(148, 20%, 37%)
Gum Leafrgb(164, 205, 181)hsl(145, 29%, 72%)

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.

  • Aa8.90:1 Very good#03495B on #FFEFE7
  • Aa8.90:1 Very good#FFEFE7 on #03495B
  • Aa5.68:1 Good#03495B on #A4CDB5
  • Aa5.68:1 Good#A4CDB5 on #03495B
  • Aa4.97:1 Good#FFEFE7 on #4B705C
  • Aa4.97:1 Good#4B705C on #FFEFE7
  • Aa3.18:1 Poor#4B705C on #A4CDB5
  • Aa3.18:1 Poor#A4CDB5 on #4B705C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nocturnal Expedition to Gum Leaf — https://swatchly.xyz/palette/03495b-ffefe7-b3809d-4b705c-a4cdb5 */
:root {
  --nocturnal-expedition: #03495b;
  --vanilla-blush: #ffefe7;
  --romanov-mauve: #b3809d;
  --cactus: #4b705c;
  --gum-leaf: #a4cdb5;
}

Tailwind CSS v4

/* Nocturnal Expedition to Gum Leaf — https://swatchly.xyz/palette/03495b-ffefe7-b3809d-4b705c-a4cdb5 */
@theme {
  --color-nocturnal-expedition: #03495b;
  --color-nocturnal-expedition-50: #e7f9ff;
  --color-nocturnal-expedition-100: #cff2ff;
  --color-nocturnal-expedition-200: #b4e0f0;
  --color-nocturnal-expedition-300: #97cadc;
  --color-nocturnal-expedition-400: #72abbe;
  --color-nocturnal-expedition-500: #558fa3;
  --color-nocturnal-expedition-600: #3a7487;
  --color-nocturnal-expedition-700: #265c6d;
  --color-nocturnal-expedition-800: #03495b;
  --color-nocturnal-expedition-900: #0e3844;
  --color-nocturnal-expedition-950: #05232c;
  --color-vanilla-blush: #ffefe7;
  --color-vanilla-blush-50: #ffefe7;
  --color-vanilla-blush-100: #f1e7e2;
  --color-vanilla-blush-200: #dfd3cd;
  --color-vanilla-blush-300: #cabdb6;
  --color-vanilla-blush-400: #ac9d96;
  --color-vanilla-blush-500: #91827b;
  --color-vanilla-blush-600: #766962;
  --color-vanilla-blush-700: #5f524c;
  --color-vanilla-blush-800: #4a403b;
  --color-vanilla-blush-900: #3a312c;
  --color-vanilla-blush-950: #241e1a;
  --color-romanov-mauve: #b3809d;
  --color-romanov-mauve-50: #fff4fa;
  --color-romanov-mauve-100: #ffe8f4;
  --color-romanov-mauve-200: #f8d1e6;
  --color-romanov-mauve-300: #e7bad3;
  --color-romanov-mauve-400: #cc9bb6;
  --color-romanov-mauve-500: #b3809d;
  --color-romanov-mauve-600: #946480;
  --color-romanov-mauve-700: #794c66;
  --color-romanov-mauve-800: #603950;
  --color-romanov-mauve-900: #4b2a3d;
  --color-romanov-mauve-950: #2f1826;
  --color-cactus: #4b705c;
  --color-cactus-50: #e5fcef;
  --color-cactus-100: #d8f1e3;
  --color-cactus-200: #c0decd;
  --color-cactus-300: #a5c8b4;
  --color-cactus-400: #82a893;
  --color-cactus-500: #668c77;
  --color-cactus-600: #4b705c;
  --color-cactus-700: #395948;
  --color-cactus-800: #2a4637;
  --color-cactus-900: #1e362a;
  --color-cactus-950: #112219;
  --color-gum-leaf: #a4cdb5;
  --color-gum-leaf-50: #e5fcee;
  --color-gum-leaf-100: #daf3e4;
  --color-gum-leaf-200: #c2e1cf;
  --color-gum-leaf-300: #a4cdb5;
  --color-gum-leaf-400: #86ad96;
  --color-gum-leaf-500: #6a917b;
  --color-gum-leaf-600: #507661;
  --color-gum-leaf-700: #3c5e4b;
  --color-gum-leaf-800: #2c4a3a;
  --color-gum-leaf-900: #20392b;
  --color-gum-leaf-950: #11241a;
}

Similar palettes