Strawberry Bonbon to Sunken Ship color palette

FCEAFFStrawberry Bonbon D489E0Dream Vapour 9A7B38Fernweh 005F61Beau Vert 002328Sunken Ship

About this palette

Strawberry Bonbon to Sunken Ship is a 5-color cool palette: #FCEAFF (Strawberry Bonbon), #D489E0 (Dream Vapour), #9A7B38 (Fernweh), #005F61 (Beau Vert), #002328 (Sunken Ship). It mixes white, purple, yellow, turquoise tones and feels cool overall. The strongest text pairing is #FCEAFF on #002328 with a contrast ratio of 14.44:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Bonbon	rgb(252, 234, 255)	hsl(291, 100%, 96%)
Dream Vapour	rgb(212, 137, 224)	hsl(292, 58%, 71%)
Fernweh	rgb(154, 123, 56)	hsl(41, 47%, 41%)
Beau Vert	rgb(0, 95, 97)	hsl(181, 100%, 19%)
Sunken Ship	rgb(0, 35, 40)	hsl(188, 100%, 8%)

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.

Aa14.44:1 Super#FCEAFF on #002328
Aa14.44:1 Super#002328 on #FCEAFF
Aa6.65:1 Good#D489E0 on #002328
Aa6.65:1 Good#002328 on #D489E0
Aa6.53:1 Good#FCEAFF on #005F61
Aa6.53:1 Good#005F61 on #FCEAFF
Aa4.14:1 Poor#9A7B38 on #002328
Aa4.14:1 Poor#002328 on #9A7B38

Color blindness preview

CSS variables

/* Strawberry Bonbon to Sunken Ship — https://swatchly.xyz/palette/fceaff-d489e0-9a7b38-005f61-002328 */
:root {
  --strawberry-bonbon: #fceaff;
  --dream-vapour: #d489e0;
  --fernweh: #9a7b38;
  --beau-vert: #005f61;
  --sunken-ship: #002328;
}

Tailwind CSS v4

/* Strawberry Bonbon to Sunken Ship — https://swatchly.xyz/palette/fceaff-d489e0-9a7b38-005f61-002328 */
@theme {
  --color-strawberry-bonbon: #fceaff;
  --color-strawberry-bonbon-50: #fceaff;
  --color-strawberry-bonbon-100: #efe3f1;
  --color-strawberry-bonbon-200: #ddd0df;
  --color-strawberry-bonbon-300: #c8b9ca;
  --color-strawberry-bonbon-400: #aa9aad;
  --color-strawberry-bonbon-500: #8f7f92;
  --color-strawberry-bonbon-600: #756678;
  --color-strawberry-bonbon-700: #5e5060;
  --color-strawberry-bonbon-800: #4a3e4c;
  --color-strawberry-bonbon-900: #392f3b;
  --color-strawberry-bonbon-950: #241c25;
  --color-dream-vapour: #d489e0;
  --color-dream-vapour-50: #fef5ff;
  --color-dream-vapour-100: #fce8ff;
  --color-dream-vapour-200: #f8cbff;
  --color-dream-vapour-300: #edaef6;
  --color-dream-vapour-400: #d489e0;
  --color-dream-vapour-500: #b56cc1;
  --color-dream-vapour-600: #9750a2;
  --color-dream-vapour-700: #7b3a85;
  --color-dream-vapour-800: #62286b;
  --color-dream-vapour-900: #4c1b54;
  --color-dream-vapour-950: #300e36;
  --color-fernweh: #9a7b38;
  --color-fernweh-50: #fff3da;
  --color-fernweh-100: #fce6bc;
  --color-fernweh-200: #ead19f;
  --color-fernweh-300: #d5b97f;
  --color-fernweh-400: #b79857;
  --color-fernweh-500: #9a7b38;
  --color-fernweh-600: #7f621e;
  --color-fernweh-700: #674d09;
  --color-fernweh-800: #523b00;
  --color-fernweh-900: #402e00;
  --color-fernweh-950: #291c00;
  --color-beau-vert: #005f61;
  --color-beau-vert-50: #d6feff;
  --color-beau-vert-100: #c8f5f6;
  --color-beau-vert-200: #ace3e4;
  --color-beau-vert-300: #8ecdce;
  --color-beau-vert-400: #66aeb0;
  --color-beau-vert-500: #479294;
  --color-beau-vert-600: #2a7678;
  --color-beau-vert-700: #005f61;
  --color-beau-vert-800: #034a4c;
  --color-beau-vert-900: #00393b;
  --color-beau-vert-950: #002425;
  --color-sunken-ship: #002328;
  --color-sunken-ship-50: #e5fafd;
  --color-sunken-ship-100: #d9f0f4;
  --color-sunken-ship-200: #c2dde2;
  --color-sunken-ship-300: #a8c8cd;
  --color-sunken-ship-400: #86a9ae;
  --color-sunken-ship-500: #6a8d93;
  --color-sunken-ship-600: #507277;
  --color-sunken-ship-700: #3b5a60;
  --color-sunken-ship-800: #2b474b;
  --color-sunken-ship-900: #1f363a;
  --color-sunken-ship-950: #002328;
}