Start generating

Creamy Strawberry to Soul Anchor color palette

FFD3DDCreamy Strawberry5BBCF6Hello Summer878300Olive006E8DCopacabana58083DSoul Anchor
Open in generator Export PNG, PDF, ASE…

About this palette

Creamy Strawberry to Soul Anchor is a 5-color warm palette: #FFD3DD (Creamy Strawberry), #5BBCF6 (Hello Summer), #878300 (Olive), #006E8D (Copacabana), #58083D (Soul Anchor). It mixes pink, blue, yellow, red tones and feels warm overall. The strongest text pairing is #FFD3DD on #58083D with a contrast ratio of 10.29:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Creamy Strawberryrgb(255, 211, 221)hsl(346, 100%, 91%)
Hello Summerrgb(91, 188, 246)hsl(202, 90%, 66%)
Olivergb(135, 131, 0)hsl(58, 100%, 26%)
Copacabanargb(0, 110, 141)hsl(193, 100%, 28%)
Soul Anchorrgb(88, 8, 61)hsl(320, 83%, 19%)

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.29:1 Very good#FFD3DD on #58083D
  • Aa10.29:1 Very good#58083D on #FFD3DD
  • Aa6.57:1 Good#5BBCF6 on #58083D
  • Aa6.57:1 Good#58083D on #5BBCF6
  • Aa4.32:1 Poor#FFD3DD on #006E8D
  • Aa4.32:1 Poor#006E8D on #FFD3DD
  • Aa3.48:1 Poor#878300 on #58083D
  • Aa3.48:1 Poor#58083D on #878300

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Creamy Strawberry to Soul Anchor — https://swatchly.xyz/palette/ffd3dd-5bbcf6-878300-006e8d-58083d */
:root {
  --creamy-strawberry: #ffd3dd;
  --hello-summer: #5bbcf6;
  --olive: #878300;
  --copacabana: #006e8d;
  --soul-anchor: #58083d;
}

Tailwind CSS v4

/* Creamy Strawberry to Soul Anchor — https://swatchly.xyz/palette/ffd3dd-5bbcf6-878300-006e8d-58083d */
@theme {
  --color-creamy-strawberry: #ffd3dd;
  --color-creamy-strawberry-50: #fff9fb;
  --color-creamy-strawberry-100: #ffeef1;
  --color-creamy-strawberry-200: #ffd3dd;
  --color-creamy-strawberry-300: #e1bdc5;
  --color-creamy-strawberry-400: #c29ba4;
  --color-creamy-strawberry-500: #a57e87;
  --color-creamy-strawberry-600: #88626c;
  --color-creamy-strawberry-700: #6d4c54;
  --color-creamy-strawberry-800: #563940;
  --color-creamy-strawberry-900: #432b31;
  --color-creamy-strawberry-950: #2b191e;
  --color-hello-summer: #5bbcf6;
  --color-hello-summer-50: #dbf0ff;
  --color-hello-summer-100: #c1e6ff;
  --color-hello-summer-200: #90d3ff;
  --color-hello-summer-300: #5bbcf6;
  --color-hello-summer-400: #3d9fd6;
  --color-hello-summer-500: #1685bc;
  --color-hello-summer-600: #006c9c;
  --color-hello-summer-700: #00577f;
  --color-hello-summer-800: #004566;
  --color-hello-summer-900: #003752;
  --color-hello-summer-950: #002235;
  --color-olive: #878300;
  --color-olive-50: #f8f8c0;
  --color-olive-100: #ededae;
  --color-olive-200: #dad88c;
  --color-olive-300: #c3c168;
  --color-olive-400: #a3a038;
  --color-olive-500: #878300;
  --color-olive-600: #6d6900;
  --color-olive-700: #565400;
  --color-olive-800: #444100;
  --color-olive-900: #343300;
  --color-olive-950: #212000;
  --color-copacabana: #006e8d;
  --color-copacabana-50: #e9f8ff;
  --color-copacabana-100: #cef0ff;
  --color-copacabana-200: #a1dff9;
  --color-copacabana-300: #7fc8e6;
  --color-copacabana-400: #55a8c8;
  --color-copacabana-500: #318aaa;
  --color-copacabana-600: #006e8d;
  --color-copacabana-700: #005771;
  --color-copacabana-800: #004459;
  --color-copacabana-900: #003546;
  --color-copacabana-950: #00212d;
  --color-soul-anchor: #58083d;
  --color-soul-anchor-50: #fff0f8;
  --color-soul-anchor-100: #ffe2f0;
  --color-soul-anchor-200: #ffc3e2;
  --color-soul-anchor-300: #f3a5cf;
  --color-soul-anchor-400: #d682b0;
  --color-soul-anchor-500: #b96594;
  --color-soul-anchor-600: #9a4b79;
  --color-soul-anchor-700: #7e3660;
  --color-soul-anchor-800: #65264b;
  --color-soul-anchor-900: #58083d;
  --color-soul-anchor-950: #330d24;
}

Similar palettes