Mintastic to Nocturnal Expedition color palette

A9FDDCMintastic 61CCD5Petrichor 00A5BDTrue Sky Blue 007D71Wizards Orb 1C4B5FNocturnal Expedition

About this palette

Mintastic to Nocturnal Expedition is a 5-color cool, gradient palette: #A9FDDC (Mintastic), #61CCD5 (Petrichor), #00A5BD (True Sky Blue), #007D71 (Wizards Orb), #1C4B5F (Nocturnal Expedition). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #A9FDDC on #1C4B5F with a contrast ratio of 8.00:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mintastic	rgb(169, 253, 220)	hsl(156, 95%, 83%)
Petrichor	rgb(97, 204, 213)	hsl(185, 58%, 61%)
True Sky Blue	rgb(0, 165, 189)	hsl(188, 100%, 37%)
Wizards Orb	rgb(0, 125, 113)	hsl(174, 100%, 25%)
Nocturnal Expedition	rgb(28, 75, 95)	hsl(198, 54%, 24%)

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.00:1 Very good#A9FDDC on #1C4B5F
Aa8.00:1 Very good#1C4B5F on #A9FDDC
Aa5.00:1 Good#61CCD5 on #1C4B5F
Aa5.00:1 Good#1C4B5F on #61CCD5
Aa4.26:1 Poor#A9FDDC on #007D71
Aa4.26:1 Poor#007D71 on #A9FDDC
Aa3.20:1 Poor#00A5BD on #1C4B5F
Aa3.20:1 Poor#1C4B5F on #00A5BD

Color blindness preview

CSS variables

/* Mintastic to Nocturnal Expedition — https://swatchly.xyz/palette/a9fddc-61ccd5-00a5bd-007d71-1c4b5f */
:root {
  --mintastic: #a9fddc;
  --petrichor: #61ccd5;
  --true-sky-blue: #00a5bd;
  --wizards-orb: #007d71;
  --nocturnal-expedition: #1c4b5f;
}

Tailwind CSS v4

/* Mintastic to Nocturnal Expedition — https://swatchly.xyz/palette/a9fddc-61ccd5-00a5bd-007d71-1c4b5f */
@theme {
  --color-mintastic: #a9fddc;
  --color-mintastic-50: #d2ffec;
  --color-mintastic-100: #a9fddc;
  --color-mintastic-200: #a8e5cc;
  --color-mintastic-300: #8ad0b5;
  --color-mintastic-400: #63b295;
  --color-mintastic-500: #44977a;
  --color-mintastic-600: #277c61;
  --color-mintastic-700: #0e644c;
  --color-mintastic-800: #004f3a;
  --color-mintastic-900: #003d2c;
  --color-mintastic-950: #00261b;
  --color-petrichor: #61ccd5;
  --color-petrichor-50: #cdfbff;
  --color-petrichor-100: #b3f3f9;
  --color-petrichor-200: #93e0e7;
  --color-petrichor-300: #61ccd5;
  --color-petrichor-400: #43adb5;
  --color-petrichor-500: #15929b;
  --color-petrichor-600: #00777f;
  --color-petrichor-700: #005f65;
  --color-petrichor-800: #004b50;
  --color-petrichor-900: #003b3f;
  --color-petrichor-950: #002528;
  --color-true-sky-blue: #00a5bd;
  --color-true-sky-blue-50: #eafbff;
  --color-true-sky-blue-100: #d4f7ff;
  --color-true-sky-blue-200: #9eedff;
  --color-true-sky-blue-300: #7cdbee;
  --color-true-sky-blue-400: #49bed5;
  --color-true-sky-blue-500: #00a5bd;
  --color-true-sky-blue-600: #008599;
  --color-true-sky-blue-700: #006979;
  --color-true-sky-blue-800: #00525e;
  --color-true-sky-blue-900: #003e48;
  --color-true-sky-blue-950: #00262d;
  --color-wizards-orb: #007d71;
  --color-wizards-orb-50: #d7fff8;
  --color-wizards-orb-100: #c0f9ef;
  --color-wizards-orb-200: #a3e7dc;
  --color-wizards-orb-300: #83d2c6;
  --color-wizards-orb-400: #58b4a7;
  --color-wizards-orb-500: #33988c;
  --color-wizards-orb-600: #007d71;
  --color-wizards-orb-700: #00635a;
  --color-wizards-orb-800: #004e46;
  --color-wizards-orb-900: #003c36;
  --color-wizards-orb-950: #002621;
  --color-nocturnal-expedition: #1c4b5f;
  --color-nocturnal-expedition-50: #eaf8ff;
  --color-nocturnal-expedition-100: #d3f0ff;
  --color-nocturnal-expedition-200: #badef0;
  --color-nocturnal-expedition-300: #a0c8dd;
  --color-nocturnal-expedition-400: #7daac0;
  --color-nocturnal-expedition-500: #608fa5;
  --color-nocturnal-expedition-600: #47758a;
  --color-nocturnal-expedition-700: #335e71;
  --color-nocturnal-expedition-800: #1c4b5f;
  --color-nocturnal-expedition-900: #193948;
  --color-nocturnal-expedition-950: #0c242e;
}