Pink to Chocolate Castle color palette

FFC1D2Pink E37C97Pinking. Fast and Slow 0087A8Corfu Waters 005A72Deep Lagoon 402600Chocolate Castle

About this palette

Pink to Chocolate Castle is a 5-color warm, vintage palette: #FFC1D2 (Pink), #E37C97 (Pinking. Fast and Slow), #0087A8 (Corfu Waters), #005A72 (Deep Lagoon), #402600 (Chocolate Castle). It mixes pink, blue, brown tones and feels warm overall. The strongest text pairing is #FFC1D2 on #402600 with a contrast ratio of 9.24:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink	rgb(255, 193, 210)	hsl(344, 100%, 88%)
Pinking. Fast and Slow	rgb(227, 124, 151)	hsl(344, 65%, 69%)
Corfu Waters	rgb(0, 135, 168)	hsl(192, 100%, 33%)
Deep Lagoon	rgb(0, 90, 114)	hsl(193, 100%, 22%)
Chocolate Castle	rgb(64, 38, 0)	hsl(36, 100%, 13%)

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.

Aa9.24:1 Very good#FFC1D2 on #402600
Aa9.24:1 Very good#402600 on #FFC1D2
Aa5.10:1 Good#FFC1D2 on #005A72
Aa5.10:1 Good#005A72 on #FFC1D2
Aa5.08:1 Good#E37C97 on #402600
Aa5.08:1 Good#402600 on #E37C97
Aa3.36:1 Poor#0087A8 on #402600
Aa3.36:1 Poor#402600 on #0087A8

Color blindness preview

CSS variables

/* Pink to Chocolate Castle — https://swatchly.xyz/palette/ffc1d2-e37c97-0087a8-005a72-402600 */
:root {
  --pink: #ffc1d2;
  --pinking-fast-and-slow: #e37c97;
  --corfu-waters: #0087a8;
  --deep-lagoon: #005a72;
  --chocolate-castle: #402600;
}

Tailwind CSS v4

/* Pink to Chocolate Castle — https://swatchly.xyz/palette/ffc1d2-e37c97-0087a8-005a72-402600 */
@theme {
  --color-pink: #ffc1d2;
  --color-pink-50: #ffeef2;
  --color-pink-100: #ffdfe7;
  --color-pink-200: #ffc1d2;
  --color-pink-300: #e3aebc;
  --color-pink-400: #c68d9d;
  --color-pink-500: #aa7282;
  --color-pink-600: #8e5969;
  --color-pink-700: #744453;
  --color-pink-800: #5d3441;
  --color-pink-900: #492631;
  --color-pink-950: #2f161e;
  --color-pinking-fast-and-slow: #e37c97;
  --color-pinking-fast-and-slow-50: #fff1f3;
  --color-pinking-fast-and-slow-100: #ffe2e8;
  --color-pinking-fast-and-slow-200: #ffc5d1;
  --color-pinking-fast-and-slow-300: #fda2b8;
  --color-pinking-fast-and-slow-400: #e37c97;
  --color-pinking-fast-and-slow-500: #c4617c;
  --color-pinking-fast-and-slow-600: #a54762;
  --color-pinking-fast-and-slow-700: #89324d;
  --color-pinking-fast-and-slow-800: #6f233b;
  --color-pinking-fast-and-slow-900: #58182d;
  --color-pinking-fast-and-slow-950: #3a0b1b;
  --color-corfu-waters: #0087a8;
  --color-corfu-waters-50: #e2f7ff;
  --color-corfu-waters-100: #c4efff;
  --color-corfu-waters-200: #92ddf9;
  --color-corfu-waters-300: #6dc6e5;
  --color-corfu-waters-400: #3ca5c6;
  --color-corfu-waters-500: #0087a8;
  --color-corfu-waters-600: #006d88;
  --color-corfu-waters-700: #00576d;
  --color-corfu-waters-800: #004456;
  --color-corfu-waters-900: #003544;
  --color-corfu-waters-950: #00222d;
  --color-deep-lagoon: #005a72;
  --color-deep-lagoon-50: #e8f8ff;
  --color-deep-lagoon-100: #d0f2ff;
  --color-deep-lagoon-200: #ace0f5;
  --color-deep-lagoon-300: #8dcae1;
  --color-deep-lagoon-400: #65aac3;
  --color-deep-lagoon-500: #468ea7;
  --color-deep-lagoon-600: #2a728a;
  --color-deep-lagoon-700: #005a72;
  --color-deep-lagoon-800: #044659;
  --color-deep-lagoon-900: #003646;
  --color-deep-lagoon-950: #00222d;
  --color-chocolate-castle: #402600;
  --color-chocolate-castle-50: #fff3e6;
  --color-chocolate-castle-100: #fde7cf;
  --color-chocolate-castle-200: #ecd3b6;
  --color-chocolate-castle-300: #d8bc9b;
  --color-chocolate-castle-400: #b99a77;
  --color-chocolate-castle-500: #9c7d59;
  --color-chocolate-castle-600: #7f6240;
  --color-chocolate-castle-700: #654b2c;
  --color-chocolate-castle-800: #4e381d;
  --color-chocolate-castle-900: #402600;
  --color-chocolate-castle-950: #241808;
}