Strawberry Bonbon to Nightly Voyager color palette

FFE9F8Strawberry Bonbon 21BDCDCaribbean Blue AD7B77Dusty Duchess 165822O Tannenbaum 341C35Nightly Voyager

Open in generator Export PNG, PDF, ASE…

About this palette

Strawberry Bonbon to Nightly Voyager is a 5-color cool palette: #FFE9F8 (Strawberry Bonbon), #21BDCD (Caribbean Blue), #AD7B77 (Dusty Duchess), #165822 (O Tannenbaum), #341C35 (Nightly Voyager). It mixes white, turquoise, red, green, purple tones and feels cool overall. The strongest text pairing is #FFE9F8 on #341C35 with a contrast ratio of 13.39:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Bonbon	rgb(255, 233, 248)	hsl(319, 100%, 96%)
Caribbean Blue	rgb(33, 189, 205)	hsl(186, 72%, 47%)
Dusty Duchess	rgb(173, 123, 119)	hsl(4, 25%, 57%)
O Tannenbaum	rgb(22, 88, 34)	hsl(131, 60%, 22%)
Nightly Voyager	rgb(52, 28, 53)	hsl(298, 31%, 16%)

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.

Aa13.39:1 Super#FFE9F8 on #341C35
Aa13.39:1 Super#341C35 on #FFE9F8
Aa7.44:1 Very good#FFE9F8 on #165822
Aa7.44:1 Very good#165822 on #FFE9F8
Aa6.77:1 Good#21BDCD on #341C35
Aa6.77:1 Good#341C35 on #21BDCD
Aa4.31:1 Poor#AD7B77 on #341C35
Aa4.31:1 Poor#341C35 on #AD7B77

Color blindness preview

CSS variables

/* Strawberry Bonbon to Nightly Voyager — https://swatchly.xyz/palette/ffe9f8-21bdcd-ad7b77-165822-341c35 */
:root {
  --strawberry-bonbon: #ffe9f8;
  --caribbean-blue: #21bdcd;
  --dusty-duchess: #ad7b77;
  --o-tannenbaum: #165822;
  --nightly-voyager: #341c35;
}

Tailwind CSS v4

/* Strawberry Bonbon to Nightly Voyager — https://swatchly.xyz/palette/ffe9f8-21bdcd-ad7b77-165822-341c35 */
@theme {
  --color-strawberry-bonbon: #ffe9f8;
  --color-strawberry-bonbon-50: #ffe9f8;
  --color-strawberry-bonbon-100: #f1e3ec;
  --color-strawberry-bonbon-200: #dfcfda;
  --color-strawberry-bonbon-300: #cbb8c5;
  --color-strawberry-bonbon-400: #ad99a7;
  --color-strawberry-bonbon-500: #927f8c;
  --color-strawberry-bonbon-600: #786572;
  --color-strawberry-bonbon-700: #604f5b;
  --color-strawberry-bonbon-800: #4c3d47;
  --color-strawberry-bonbon-900: #3b2e37;
  --color-strawberry-bonbon-950: #251c22;
  --color-caribbean-blue: #21bdcd;
  --color-caribbean-blue-50: #e7fcff;
  --color-caribbean-blue-100: #c9f9ff;
  --color-caribbean-blue-200: #95edf8;
  --color-caribbean-blue-300: #70d9e6;
  --color-caribbean-blue-400: #21bdcd;
  --color-caribbean-blue-500: #009eac;
  --color-caribbean-blue-600: #007f8a;
  --color-caribbean-blue-700: #00646e;
  --color-caribbean-blue-800: #004e56;
  --color-caribbean-blue-900: #003c42;
  --color-caribbean-blue-950: #002529;
  --color-dusty-duchess: #ad7b77;
  --color-dusty-duchess-50: #fff2f1;
  --color-dusty-duchess-100: #ffe6e3;
  --color-dusty-duchess-200: #f7cecb;
  --color-dusty-duchess-300: #e4b7b3;
  --color-dusty-duchess-400: #c89692;
  --color-dusty-duchess-500: #ad7b77;
  --color-dusty-duchess-600: #90605d;
  --color-dusty-duchess-700: #754a47;
  --color-dusty-duchess-800: #5e3836;
  --color-dusty-duchess-900: #492a28;
  --color-dusty-duchess-950: #2f1917;
  --color-o-tannenbaum: #165822;
  --color-o-tannenbaum-50: #e0ffe1;
  --color-o-tannenbaum-100: #cff8d1;
  --color-o-tannenbaum-200: #b6e6b9;
  --color-o-tannenbaum-300: #9cd39f;
  --color-o-tannenbaum-400: #79b67d;
  --color-o-tannenbaum-500: #5c9b62;
  --color-o-tannenbaum-600: #43814a;
  --color-o-tannenbaum-700: #2f6a37;
  --color-o-tannenbaum-800: #165822;
  --color-o-tannenbaum-900: #14431c;
  --color-o-tannenbaum-950: #082b0e;
  --color-nightly-voyager: #341c35;
  --color-nightly-voyager-50: #ffefff;
  --color-nightly-voyager-100: #f8e4f8;
  --color-nightly-voyager-200: #e6cfe7;
  --color-nightly-voyager-300: #d2b7d2;
  --color-nightly-voyager-400: #b396b4;
  --color-nightly-voyager-500: #9a7c9a;
  --color-nightly-voyager-600: #806480;
  --color-nightly-voyager-700: #694f69;
  --color-nightly-voyager-800: #553f56;
  --color-nightly-voyager-900: #453146;
  --color-nightly-voyager-950: #341c35;
}