Ariel to Strawberry Bonbon Color Palette

About this palette

Ariel to Strawberry Bonbon is a 5-color pastel, light, cool palette: #B5D5EE (Ariel), #EAC6A1 (Egghead), #DFC5FD (Neon Boneyard), #ABEFE1 (Water Leaf), #FFEAFF (Strawberry Bonbon). It mixes blue, orange, purple, turquoise, white tones and feels cool overall. The strongest text pairing is #EAC6A1 on #FFEAFF with a contrast ratio of 1.41:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ariel	rgb(181, 213, 238)	hsl(206, 63%, 82%)
Egghead	rgb(234, 198, 161)	hsl(30, 63%, 77%)
Neon Boneyard	rgb(223, 197, 253)	hsl(268, 93%, 88%)
Water Leaf	rgb(171, 239, 225)	hsl(168, 68%, 80%)
Strawberry Bonbon	rgb(255, 234, 255)	hsl(300, 100%, 96%)

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.

Color blindness preview

CSS variables

/* Ariel to Strawberry Bonbon — https://swatchly.xyz/palette/b5d5ee-eac6a1-dfc5fd-abefe1-ffeaff */
:root {
  --ariel: #b5d5ee;
  --egghead: #eac6a1;
  --neon-boneyard: #dfc5fd;
  --water-leaf: #abefe1;
  --strawberry-bonbon: #ffeaff;
}

Tailwind CSS v4

/* Ariel to Strawberry Bonbon — https://swatchly.xyz/palette/b5d5ee-eac6a1-dfc5fd-abefe1-ffeaff */
@theme {
  --color-ariel: #b5d5ee;
  --color-ariel-50: #e3f3ff;
  --color-ariel-100: #d3e8f9;
  --color-ariel-200: #b5d5ee;
  --color-ariel-300: #a4bfd5;
  --color-ariel-400: #84a1b8;
  --color-ariel-500: #69879e;
  --color-ariel-600: #516d83;
  --color-ariel-700: #3e586b;
  --color-ariel-800: #2e4556;
  --color-ariel-900: #223544;
  --color-ariel-950: #13212b;
  --color-egghead: #eac6a1;
  --color-egghead-50: #ffead5;
  --color-egghead-100: #f7dec5;
  --color-egghead-200: #eac6a1;
  --color-egghead-300: #d2b292;
  --color-egghead-400: #b59472;
  --color-egghead-500: #9b7a58;
  --color-egghead-600: #816241;
  --color-egghead-700: #6a4d2f;
  --color-egghead-800: #553d22;
  --color-egghead-900: #432e17;
  --color-egghead-950: #2b1c0b;
  --color-neon-boneyard: #dfc5fd;
  --color-neon-boneyard-50: #f5eeff;
  --color-neon-boneyard-100: #eee0ff;
  --color-neon-boneyard-200: #dfc5fd;
  --color-neon-boneyard-300: #c8b1e1;
  --color-neon-boneyard-400: #aa92c5;
  --color-neon-boneyard-500: #9077ab;
  --color-neon-boneyard-600: #755e8f;
  --color-neon-boneyard-700: #5f4975;
  --color-neon-boneyard-800: #4b385f;
  --color-neon-boneyard-900: #3a2a4b;
  --color-neon-boneyard-950: #251931;
  --color-water-leaf: #abefe1;
  --color-water-leaf-50: #edfffb;
  --color-water-leaf-100: #d5fbf3;
  --color-water-leaf-200: #abefe1;
  --color-water-leaf-300: #9ed4c9;
  --color-water-leaf-400: #76b4a8;
  --color-water-leaf-500: #56988b;
  --color-water-leaf-600: #3a7b70;
  --color-water-leaf-700: #246258;
  --color-water-leaf-800: #144d44;
  --color-water-leaf-900: #0a3b34;
  --color-water-leaf-950: #032520;
  --color-strawberry-bonbon: #ffeaff;
  --color-strawberry-bonbon-50: #ffeaff;
  --color-strawberry-bonbon-100: #f1e3f1;
  --color-strawberry-bonbon-200: #dfd0df;
  --color-strawberry-bonbon-300: #cab9ca;
  --color-strawberry-bonbon-400: #ac99ac;
  --color-strawberry-bonbon-500: #917f91;
  --color-strawberry-bonbon-600: #776577;
  --color-strawberry-bonbon-700: #5f4f5f;
  --color-strawberry-bonbon-800: #4b3d4b;
  --color-strawberry-bonbon-900: #3a2e3a;
  --color-strawberry-bonbon-950: #241c25;
}