Strawberry Latte to Moelleux au Chocolat Color Palette

About this palette

Strawberry Latte to Moelleux au Chocolat is a 4-color muted, vintage palette: #D1ABBC (Strawberry Latte), #40777B (Ocean Slumber), #DEFBFF (Cold Canada), #54351D (Moelleux au Chocolat). It mixes pink, turquoise, white, brown tones and feels warm overall. The strongest text pairing is #DEFBFF on #54351D with a contrast ratio of 10.16:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Latte	rgb(209, 171, 188)	hsl(333, 29%, 75%)
Ocean Slumber	rgb(64, 119, 123)	hsl(184, 32%, 37%)
Cold Canada	rgb(222, 251, 255)	hsl(187, 100%, 94%)
Moelleux au Chocolat	rgb(84, 53, 29)	hsl(26, 49%, 22%)

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.16:1 Very good#DEFBFF on #54351D
Aa10.16:1 Very good#54351D on #DEFBFF
Aa5.39:1 Good#D1ABBC on #54351D
Aa5.39:1 Good#54351D on #D1ABBC
Aa4.67:1 Good#40777B on #DEFBFF
Aa4.67:1 Good#DEFBFF on #40777B

Color blindness preview

CSS variables

/* Strawberry Latte to Moelleux au Chocolat — https://swatchly.xyz/palette/d1abbc-40777b-defbff-54351d */
:root {
  --strawberry-latte: #d1abbc;
  --ocean-slumber: #40777b;
  --cold-canada: #defbff;
  --moelleux-au-chocolat: #54351d;
}

Tailwind CSS v4

/* Strawberry Latte to Moelleux au Chocolat — https://swatchly.xyz/palette/d1abbc-40777b-defbff-54351d */
@theme {
  --color-strawberry-latte: #d1abbc;
  --color-strawberry-latte-50: #ffe9f3;
  --color-strawberry-latte-100: #f7dce8;
  --color-strawberry-latte-200: #e4c6d3;
  --color-strawberry-latte-300: #d1abbc;
  --color-strawberry-latte-400: #b28e9e;
  --color-strawberry-latte-500: #987485;
  --color-strawberry-latte-600: #7d5c6c;
  --color-strawberry-latte-700: #664856;
  --color-strawberry-latte-800: #523844;
  --color-strawberry-latte-900: #412b36;
  --color-strawberry-latte-950: #2a1a21;
  --color-ocean-slumber: #40777b;
  --color-ocean-slumber-50: #ddfcfe;
  --color-ocean-slumber-100: #d0f3f6;
  --color-ocean-slumber-200: #b8e1e4;
  --color-ocean-slumber-300: #9ccccf;
  --color-ocean-slumber-400: #78adb1;
  --color-ocean-slumber-500: #5b9296;
  --color-ocean-slumber-600: #40777b;
  --color-ocean-slumber-700: #2d5f63;
  --color-ocean-slumber-800: #1e4b4e;
  --color-ocean-slumber-900: #133a3d;
  --color-ocean-slumber-950: #082426;
  --color-cold-canada: #defbff;
  --color-cold-canada-50: #defbff;
  --color-cold-canada-100: #ddeff1;
  --color-cold-canada-200: #c7dcdf;
  --color-cold-canada-300: #aec6c9;
  --color-cold-canada-400: #8da7ab;
  --color-cold-canada-500: #718c8f;
  --color-cold-canada-600: #587175;
  --color-cold-canada-700: #435a5d;
  --color-cold-canada-800: #324649;
  --color-cold-canada-900: #253639;
  --color-cold-canada-950: #152223;
  --color-moelleux-au-chocolat: #54351d;
  --color-moelleux-au-chocolat-50: #fff2ea;
  --color-moelleux-au-chocolat-100: #ffe6d5;
  --color-moelleux-au-chocolat-200: #eed1bd;
  --color-moelleux-au-chocolat-300: #d9b9a1;
  --color-moelleux-au-chocolat-400: #bb977e;
  --color-moelleux-au-chocolat-500: #9e7b61;
  --color-moelleux-au-chocolat-600: #816048;
  --color-moelleux-au-chocolat-700: #674934;
  --color-moelleux-au-chocolat-800: #54351d;
  --color-moelleux-au-chocolat-900: #3e291a;
  --color-moelleux-au-chocolat-950: #27180d;
}