Pink Pleasure to Cola Color Palette

About this palette

Pink Pleasure to Cola is a 5-color muted, vintage palette: #FCE1E3 (Pink Pleasure), #BE9798 (Mutabilis), #618B99 (Horizon), #2F5862 (Great Void), #42301E (Cola). It mixes white, red, blue, brown tones and feels balanced overall. The strongest text pairing is #FCE1E3 on #42301E with a contrast ratio of 10.17:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Pleasure	rgb(252, 225, 227)	hsl(356, 82%, 94%)
Mutabilis	rgb(190, 151, 152)	hsl(358, 23%, 67%)
Horizon	rgb(97, 139, 153)	hsl(195, 22%, 49%)
Great Void	rgb(47, 88, 98)	hsl(192, 35%, 28%)
Cola	rgb(66, 48, 30)	hsl(30, 38%, 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.17:1 Very good#FCE1E3 on #42301E
Aa10.17:1 Very good#42301E on #FCE1E3
Aa6.32:1 Good#FCE1E3 on #2F5862
Aa6.32:1 Good#2F5862 on #FCE1E3
Aa4.82:1 Good#BE9798 on #42301E
Aa4.82:1 Good#42301E on #BE9798
Aa3.38:1 Poor#618B99 on #42301E
Aa3.38:1 Poor#42301E on #618B99

Color blindness preview

CSS variables

/* Pink Pleasure to Cola — https://swatchly.xyz/palette/fce1e3-be9798-618b99-2f5862-42301e */
:root {
  --pink-pleasure: #fce1e3;
  --mutabilis: #be9798;
  --horizon: #618b99;
  --great-void: #2f5862;
  --cola: #42301e;
}

Tailwind CSS v4

/* Pink Pleasure to Cola — https://swatchly.xyz/palette/fce1e3-be9798-618b99-2f5862-42301e */
@theme {
  --color-pink-pleasure: #fce1e3;
  --color-pink-pleasure-50: #feeff0;
  --color-pink-pleasure-100: #fce1e3;
  --color-pink-pleasure-200: #e4d0d1;
  --color-pink-pleasure-300: #cfb9bb;
  --color-pink-pleasure-400: #b2999b;
  --color-pink-pleasure-500: #977e80;
  --color-pink-pleasure-600: #7b6567;
  --color-pink-pleasure-700: #644f51;
  --color-pink-pleasure-800: #4f3d3f;
  --color-pink-pleasure-900: #3d2e30;
  --color-pink-pleasure-950: #271c1d;
  --color-mutabilis: #be9798;
  --color-mutabilis-50: #fff2f2;
  --color-mutabilis-100: #ffe4e5;
  --color-mutabilis-200: #eecfd0;
  --color-mutabilis-300: #dab8b9;
  --color-mutabilis-400: #be9798;
  --color-mutabilis-500: #a17c7d;
  --color-mutabilis-600: #856263;
  --color-mutabilis-700: #6c4c4d;
  --color-mutabilis-800: #563a3b;
  --color-mutabilis-900: #432c2d;
  --color-mutabilis-950: #2b1a1b;
  --color-horizon: #618b99;
  --color-horizon-50: #e6f8ff;
  --color-horizon-100: #d4f0f9;
  --color-horizon-200: #bcdce8;
  --color-horizon-300: #a1c6d3;
  --color-horizon-400: #7ea7b5;
  --color-horizon-500: #618b99;
  --color-horizon-600: #48717e;
  --color-horizon-700: #355a66;
  --color-horizon-800: #264751;
  --color-horizon-900: #1b373f;
  --color-horizon-950: #0e2228;
  --color-great-void: #2f5862;
  --color-great-void-50: #e5faff;
  --color-great-void-100: #d6f1f8;
  --color-great-void-200: #bddde6;
  --color-great-void-300: #a1c7d0;
  --color-great-void-400: #7ea7b2;
  --color-great-void-500: #618b96;
  --color-great-void-600: #476f79;
  --color-great-void-700: #2f5862;
  --color-great-void-800: #24444c;
  --color-great-void-900: #1a353b;
  --color-great-void-950: #0d2125;
  --color-cola: #42301e;
  --color-cola-50: #fff3e7;
  --color-cola-100: #f7e8db;
  --color-cola-200: #e5d4c4;
  --color-cola-300: #d1bdab;
  --color-cola-400: #b39e8a;
  --color-cola-500: #98826e;
  --color-cola-600: #7c6855;
  --color-cola-700: #655241;
  --color-cola-800: #504031;
  --color-cola-900: #42301e;
  --color-cola-950: #281e15;
}