Strawberry Frappé to English Breakfast color palette

FFA2ACStrawberry Frappé 007166Pine Scented Lagoon E9F3FFCotton Boll 4C3200Moelleux au Chocolat B57700Caramel Coating 410C16English Breakfast

Open in generator Export PNG, PDF, ASE…

About this palette

Strawberry Frappé to English Breakfast is a 6-color warm, vintage palette: #FFA2AC (Strawberry Frappé), #007166 (Pine Scented Lagoon), #E9F3FF (Cotton Boll), #4C3200 (Moelleux au Chocolat), #B57700 (Caramel Coating), #410C16 (English Breakfast). It mixes pink, turquoise, white, brown, orange tones and feels warm overall. The strongest text pairing is #E9F3FF on #410C16 with a contrast ratio of 14.53:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Frappé	rgb(255, 162, 172)	hsl(354, 100%, 82%)
Pine Scented Lagoon	rgb(0, 113, 102)	hsl(174, 100%, 22%)
Cotton Boll	rgb(233, 243, 255)	hsl(213, 100%, 96%)
Moelleux au Chocolat	rgb(76, 50, 0)	hsl(39, 100%, 15%)
Caramel Coating	rgb(181, 119, 0)	hsl(39, 100%, 35%)
English Breakfast	rgb(65, 12, 22)	hsl(349, 69%, 15%)

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.53:1 Super#E9F3FF on #410C16
Aa14.53:1 Super#410C16 on #E9F3FF
Aa10.62:1 Very good#E9F3FF on #4C3200
Aa10.62:1 Very good#4C3200 on #E9F3FF
Aa8.55:1 Very good#FFA2AC on #410C16
Aa8.55:1 Very good#410C16 on #FFA2AC
Aa6.25:1 Good#FFA2AC on #4C3200
Aa6.25:1 Good#4C3200 on #FFA2AC

Color blindness preview

CSS variables

/* Strawberry Frappé to English Breakfast — https://swatchly.xyz/palette/ffa2ac-007166-e9f3ff-4c3200-b57700-410c16 */
:root {
  --strawberry-frapp: #ffa2ac;
  --pine-scented-lagoon: #007166;
  --cotton-boll: #e9f3ff;
  --moelleux-au-chocolat: #4c3200;
  --caramel-coating: #b57700;
  --english-breakfast: #410c16;
}

Tailwind CSS v4

/* Strawberry Frappé to English Breakfast — https://swatchly.xyz/palette/ffa2ac-007166-e9f3ff-4c3200-b57700-410c16 */
@theme {
  --color-strawberry-frapp: #ffa2ac;
  --color-strawberry-frapp-50: #fff1f2;
  --color-strawberry-frapp-100: #ffe3e5;
  --color-strawberry-frapp-200: #ffc6cb;
  --color-strawberry-frapp-300: #ffa2ac;
  --color-strawberry-frapp-400: #db848e;
  --color-strawberry-frapp-500: #be6873;
  --color-strawberry-frapp-600: #a04e59;
  --color-strawberry-frapp-700: #843a45;
  --color-strawberry-frapp-800: #6b2a34;
  --color-strawberry-frapp-900: #551e27;
  --color-strawberry-frapp-950: #371017;
  --color-pine-scented-lagoon: #007166;
  --color-pine-scented-lagoon-50: #d7fff8;
  --color-pine-scented-lagoon-100: #c1f6ed;
  --color-pine-scented-lagoon-200: #a2e2d8;
  --color-pine-scented-lagoon-300: #80ccc0;
  --color-pine-scented-lagoon-400: #55ab9f;
  --color-pine-scented-lagoon-500: #328e82;
  --color-pine-scented-lagoon-600: #007166;
  --color-pine-scented-lagoon-700: #005a51;
  --color-pine-scented-lagoon-800: #00463f;
  --color-pine-scented-lagoon-900: #003731;
  --color-pine-scented-lagoon-950: #00221e;
  --color-cotton-boll: #e9f3ff;
  --color-cotton-boll-50: #e9f3ff;
  --color-cotton-boll-100: #e3e9f1;
  --color-cotton-boll-200: #cfd6df;
  --color-cotton-boll-300: #b8c0ca;
  --color-cotton-boll-400: #99a1ac;
  --color-cotton-boll-500: #7e8791;
  --color-cotton-boll-600: #646d77;
  --color-cotton-boll-700: #4e565f;
  --color-cotton-boll-800: #3c434b;
  --color-cotton-boll-900: #2e333a;
  --color-cotton-boll-950: #1c2024;
  --color-moelleux-au-chocolat: #4c3200;
  --color-moelleux-au-chocolat-50: #fff3e3;
  --color-moelleux-au-chocolat-100: #fce8cb;
  --color-moelleux-au-chocolat-200: #ebd4b1;
  --color-moelleux-au-chocolat-300: #d7bc95;
  --color-moelleux-au-chocolat-400: #bb9d72;
  --color-moelleux-au-chocolat-500: #a08356;
  --color-moelleux-au-chocolat-600: #86693e;
  --color-moelleux-au-chocolat-700: #6e542b;
  --color-moelleux-au-chocolat-800: #59421d;
  --color-moelleux-au-chocolat-900: #4c3200;
  --color-moelleux-au-chocolat-950: #2f2008;
  --color-caramel-coating: #b57700;
  --color-caramel-coating-50: #fff3e5;
  --color-caramel-coating-100: #ffe7c9;
  --color-caramel-coating-200: #ffce8e;
  --color-caramel-coating-300: #edb56b;
  --color-caramel-coating-400: #d1933a;
  --color-caramel-coating-500: #b57700;
  --color-caramel-coating-600: #925f00;
  --color-caramel-coating-700: #754b00;
  --color-caramel-coating-800: #5c3a00;
  --color-caramel-coating-900: #472c00;
  --color-caramel-coating-950: #2e1b00;
  --color-english-breakfast: #410c16;
  --color-english-breakfast-50: #fff1f2;
  --color-english-breakfast-100: #ffe3e5;
  --color-english-breakfast-200: #fdc8cb;
  --color-english-breakfast-300: #eaafb3;
  --color-english-breakfast-400: #cd8e92;
  --color-english-breakfast-500: #b27278;
  --color-english-breakfast-600: #96595f;
  --color-english-breakfast-700: #7b454a;
  --color-english-breakfast-800: #643439;
  --color-english-breakfast-900: #51272c;
  --color-english-breakfast-950: #410c16;
}