Creamy Strawberry to Ink Black Color Palette

About this palette

Creamy Strawberry to Ink Black is a 4-color muted palette: #F7D2DD (Creamy Strawberry), #72958E (Yucca), #265B56 (Lacrosse), #2E2023 (Ink Black). It mixes pink, turquoise, gray tones and feels cool overall. The strongest text pairing is #F7D2DD on #2E2023 with a contrast ratio of 11.30:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Creamy Strawberry	rgb(247, 210, 221)	hsl(342, 70%, 90%)
Yucca	rgb(114, 149, 142)	hsl(168, 14%, 52%)
Lacrosse	rgb(38, 91, 86)	hsl(174, 41%, 25%)
Ink Black	rgb(46, 32, 35)	hsl(347, 18%, 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.

Aa11.30:1 Very good#F7D2DD on #2E2023
Aa11.30:1 Very good#2E2023 on #F7D2DD
Aa5.61:1 Good#F7D2DD on #265B56
Aa5.61:1 Good#265B56 on #F7D2DD
Aa4.75:1 Good#72958E on #2E2023
Aa4.75:1 Good#2E2023 on #72958E

Color blindness preview

CSS variables

/* Creamy Strawberry to Ink Black — https://swatchly.xyz/palette/f7d2dd-72958e-265b56-2e2023 */
:root {
  --creamy-strawberry: #f7d2dd;
  --yucca: #72958e;
  --lacrosse: #265b56;
  --ink-black: #2e2023;
}

Tailwind CSS v4

/* Creamy Strawberry to Ink Black — https://swatchly.xyz/palette/f7d2dd-72958e-265b56-2e2023 */
@theme {
  --color-creamy-strawberry: #f7d2dd;
  --color-creamy-strawberry-50: #fff7f9;
  --color-creamy-strawberry-100: #ffeaf0;
  --color-creamy-strawberry-200: #f7d2dd;
  --color-creamy-strawberry-300: #dbbcc5;
  --color-creamy-strawberry-400: #bc9ba5;
  --color-creamy-strawberry-500: #a07e89;
  --color-creamy-strawberry-600: #83636d;
  --color-creamy-strawberry-700: #694d56;
  --color-creamy-strawberry-800: #533a42;
  --color-creamy-strawberry-900: #412c33;
  --color-creamy-strawberry-950: #291a1f;
  --color-yucca: #72958e;
  --color-yucca-50: #e7fbf7;
  --color-yucca-100: #ddf3ee;
  --color-yucca-200: #c7e2dc;
  --color-yucca-300: #afcdc7;
  --color-yucca-400: #8eafa8;
  --color-yucca-500: #72958e;
  --color-yucca-600: #577972;
  --color-yucca-700: #41605a;
  --color-yucca-800: #304b46;
  --color-yucca-900: #233a36;
  --color-yucca-950: #132421;
  --color-lacrosse: #265b56;
  --color-lacrosse-50: #dffcf9;
  --color-lacrosse-100: #d2f3ef;
  --color-lacrosse-200: #b8e0db;
  --color-lacrosse-300: #9ccac4;
  --color-lacrosse-400: #77aba5;
  --color-lacrosse-500: #5a8e89;
  --color-lacrosse-600: #40726d;
  --color-lacrosse-700: #265b56;
  --color-lacrosse-800: #1e4743;
  --color-lacrosse-900: #143734;
  --color-lacrosse-950: #092220;
  --color-ink-black: #2e2023;
  --color-ink-black-50: #fdf2f4;
  --color-ink-black-100: #f4e8ea;
  --color-ink-black-200: #e2d3d6;
  --color-ink-black-300: #ccbcbf;
  --color-ink-black-400: #ae9ca0;
  --color-ink-black-500: #948285;
  --color-ink-black-600: #7a696c;
  --color-ink-black-700: #635457;
  --color-ink-black-800: #504245;
  --color-ink-black-900: #403436;
  --color-ink-black-950: #2e2023;
}