Strawberry Blonde to Elite Teal Color Palette

About this palette

Strawberry Blonde to Elite Teal is a 4-color muted, cool palette: #FFD9D8 (Strawberry Blonde), #9FA97C (Forester), #6D6088 (Heron), #002F36 (Elite Teal). It mixes pink, green, purple, turquoise tones and feels cool overall. The strongest text pairing is #FFD9D8 on #002F36 with a contrast ratio of 11.08:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Blonde	rgb(255, 217, 216)	hsl(2, 100%, 92%)
Forester	rgb(159, 169, 124)	hsl(73, 21%, 57%)
Heron	rgb(109, 96, 136)	hsl(260, 17%, 45%)
Elite Teal	rgb(0, 47, 54)	hsl(188, 100%, 11%)

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.

Aa11.08:1 Very good#FFD9D8 on #002F36
Aa11.08:1 Very good#002F36 on #FFD9D8
Aa5.78:1 Good#9FA97C on #002F36
Aa5.78:1 Good#002F36 on #9FA97C
Aa4.39:1 Poor#FFD9D8 on #6D6088
Aa4.39:1 Poor#6D6088 on #FFD9D8

Color blindness preview

CSS variables

/* Strawberry Blonde to Elite Teal — https://swatchly.xyz/palette/ffd9d8-9fa97c-6d6088-002f36 */
:root {
  --strawberry-blonde: #ffd9d8;
  --forester: #9fa97c;
  --heron: #6d6088;
  --elite-teal: #002f36;
}

Tailwind CSS v4

/* Strawberry Blonde to Elite Teal — https://swatchly.xyz/palette/ffd9d8-9fa97c-6d6088-002f36 */
@theme {
  --color-strawberry-blonde: #ffd9d8;
  --color-strawberry-blonde-50: #ffe9e8;
  --color-strawberry-blonde-100: #ffd9d8;
  --color-strawberry-blonde-200: #e6c9c8;
  --color-strawberry-blonde-300: #d3b3b2;
  --color-strawberry-blonde-400: #b69493;
  --color-strawberry-blonde-500: #9c7a79;
  --color-strawberry-blonde-600: #816161;
  --color-strawberry-blonde-700: #6a4d4c;
  --color-strawberry-blonde-800: #543b3b;
  --color-strawberry-blonde-900: #422c2c;
  --color-strawberry-blonde-950: #2a1b1a;
  --color-forester: #9fa97c;
  --color-forester-50: #f3f9e0;
  --color-forester-100: #e9f0d3;
  --color-forester-200: #d5ddbb;
  --color-forester-300: #bfc8a1;
  --color-forester-400: #9fa97c;
  --color-forester-500: #848d61;
  --color-forester-600: #697248;
  --color-forester-700: #535b34;
  --color-forester-800: #404725;
  --color-forester-900: #31361a;
  --color-forester-950: #1e220d;
  --color-heron: #6d6088;
  --color-heron-50: #f6f3ff;
  --color-heron-100: #ede6ff;
  --color-heron-200: #dad0f2;
  --color-heron-300: #c3b8de;
  --color-heron-400: #a497c0;
  --color-heron-500: #887ba4;
  --color-heron-600: #6d6088;
  --color-heron-700: #574b6e;
  --color-heron-800: #443a58;
  --color-heron-900: #342c46;
  --color-heron-950: #211a2d;
  --color-elite-teal: #002f36;
  --color-elite-teal-50: #e2faff;
  --color-elite-teal-100: #d5f1f6;
  --color-elite-teal-200: #bddee5;
  --color-elite-teal-300: #a3c9d0;
  --color-elite-teal-400: #80aab2;
  --color-elite-teal-500: #669098;
  --color-elite-teal-600: #4e787f;
  --color-elite-teal-700: #3b6269;
  --color-elite-teal-800: #2c5056;
  --color-elite-teal-900: #214147;
  --color-elite-teal-950: #002f36;
}