Baby Blue to Night Demons color palette

A9D2FFBaby Blue 97AD75Green Tea Mochi 5889C9Marina 76577FDr Who 593D00Pineapple 251B26Night Demons

Open in generator Export PNG, PDF, ASE…

About this palette

Baby Blue to Night Demons is a 6-color cool palette: #A9D2FF (Baby Blue), #97AD75 (Green Tea Mochi), #5889C9 (Marina), #76577F (Dr Who), #593D00 (Pineapple), #251B26 (Night Demons). It mixes blue, green, purple, brown, gray tones and feels cool overall. The strongest text pairing is #A9D2FF on #251B26 with a contrast ratio of 10.57:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Baby Blue	rgb(169, 210, 255)	hsl(211, 100%, 83%)
Green Tea Mochi	rgb(151, 173, 117)	hsl(84, 25%, 57%)
Marina	rgb(88, 137, 201)	hsl(214, 51%, 57%)
Dr Who	rgb(118, 87, 127)	hsl(286, 19%, 42%)
Pineapple	rgb(89, 61, 0)	hsl(41, 100%, 17%)
Night Demons	rgb(37, 27, 38)	hsl(295, 17%, 13%)

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.

Aa10.57:1 Very good#A9D2FF on #251B26
Aa10.57:1 Very good#251B26 on #A9D2FF
Aa6.77:1 Good#97AD75 on #251B26
Aa6.77:1 Good#251B26 on #97AD75
Aa6.38:1 Good#A9D2FF on #593D00
Aa6.38:1 Good#593D00 on #A9D2FF
Aa4.62:1 Good#5889C9 on #251B26
Aa4.62:1 Good#251B26 on #5889C9

Color blindness preview

CSS variables

/* Baby Blue to Night Demons — https://swatchly.xyz/palette/a9d2ff-97ad75-5889c9-76577f-593d00-251b26 */
:root {
  --baby-blue: #a9d2ff;
  --green-tea-mochi: #97ad75;
  --marina: #5889c9;
  --dr-who: #76577f;
  --pineapple: #593d00;
  --night-demons: #251b26;
}

Tailwind CSS v4

/* Baby Blue to Night Demons — https://swatchly.xyz/palette/a9d2ff-97ad75-5889c9-76577f-593d00-251b26 */
@theme {
  --color-baby-blue: #a9d2ff;
  --color-baby-blue-50: #e3f0ff;
  --color-baby-blue-100: #cfe6ff;
  --color-baby-blue-200: #a9d2ff;
  --color-baby-blue-300: #99bde4;
  --color-baby-blue-400: #799fc9;
  --color-baby-blue-500: #5f85ae;
  --color-baby-blue-600: #476c93;
  --color-baby-blue-700: #35567a;
  --color-baby-blue-800: #274464;
  --color-baby-blue-900: #1b344f;
  --color-baby-blue-950: #0e2033;
  --color-green-tea-mochi: #97ad75;
  --color-green-tea-mochi-50: #eefcdc;
  --color-green-tea-mochi-100: #e4f3cf;
  --color-green-tea-mochi-200: #cfe1b6;
  --color-green-tea-mochi-300: #b8cb9b;
  --color-green-tea-mochi-400: #97ad75;
  --color-green-tea-mochi-500: #7c915a;
  --color-green-tea-mochi-600: #627541;
  --color-green-tea-mochi-700: #4c5e2d;
  --color-green-tea-mochi-800: #3a491e;
  --color-green-tea-mochi-900: #2c3814;
  --color-green-tea-mochi-950: #1a2309;
  --color-marina: #5889c9;
  --color-marina-50: #eff6ff;
  --color-marina-100: #dfedff;
  --color-marina-200: #bfdaff;
  --color-marina-300: #99c5fe;
  --color-marina-400: #75a5e4;
  --color-marina-500: #5889c9;
  --color-marina-600: #3f6eab;
  --color-marina-700: #2b568e;
  --color-marina-800: #1d4373;
  --color-marina-900: #12335c;
  --color-marina-950: #081f3d;
  --color-dr-who: #76577f;
  --color-dr-who-50: #fcf1ff;
  --color-dr-who-100: #f7e1fe;
  --color-dr-who-200: #e4caec;
  --color-dr-who-300: #ceb0d7;
  --color-dr-who-400: #af8fb8;
  --color-dr-who-500: #92729c;
  --color-dr-who-600: #76577f;
  --color-dr-who-700: #5f4466;
  --color-dr-who-800: #4b3452;
  --color-dr-who-900: #3b2740;
  --color-dr-who-950: #251729;
  --color-pineapple: #593d00;
  --color-pineapple-50: #fff4e1;
  --color-pineapple-100: #fde8c7;
  --color-pineapple-200: #ecd4ac;
  --color-pineapple-300: #d9bd90;
  --color-pineapple-400: #bb9d6b;
  --color-pineapple-500: #a0814d;
  --color-pineapple-600: #846734;
  --color-pineapple-700: #6b5121;
  --color-pineapple-800: #593d00;
  --color-pineapple-900: #432f09;
  --color-pineapple-950: #2b1d03;
  --color-night-demons: #251b26;
  --color-night-demons-50: #faf2fb;
  --color-night-demons-100: #f1e8f1;
  --color-night-demons-200: #ded4df;
  --color-night-demons-300: #c8bcc9;
  --color-night-demons-400: #a99daa;
  --color-night-demons-500: #8e818f;
  --color-night-demons-600: #736774;
  --color-night-demons-700: #5c515d;
  --color-night-demons-800: #483f49;
  --color-night-demons-900: #373038;
  --color-night-demons-950: #251b26;
}