Romanov Mauve to Grape Color Palette

About this palette

Romanov Mauve to Grape is a 5-color vintage palette: #C27FA9 (Romanov Mauve), #007F95 (Pacific Pleasure), #FFF6E3 (Creamy Cloud Dreams), #7BCFEB (Below Zero), #742C5F (Grape). It mixes pink, blue, white, red tones and feels balanced overall. The strongest text pairing is #FFF6E3 on #742C5F with a contrast ratio of 8.62:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Romanov Mauve	rgb(194, 127, 169)	hsl(322, 35%, 63%)
Pacific Pleasure	rgb(0, 127, 149)	hsl(189, 100%, 29%)
Creamy Cloud Dreams	rgb(255, 246, 227)	hsl(41, 100%, 95%)
Below Zero	rgb(123, 207, 235)	hsl(195, 74%, 70%)
Grape	rgb(116, 44, 95)	hsl(318, 45%, 31%)

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.

Aa8.62:1 Very good#FFF6E3 on #742C5F
Aa8.62:1 Very good#742C5F on #FFF6E3
Aa5.28:1 Good#7BCFEB on #742C5F
Aa5.28:1 Good#742C5F on #7BCFEB
Aa4.37:1 Poor#007F95 on #FFF6E3
Aa4.37:1 Poor#FFF6E3 on #007F95
Aa3.04:1 Poor#C27FA9 on #742C5F
Aa3.04:1 Poor#742C5F on #C27FA9

Color blindness preview

CSS variables

/* Romanov Mauve to Grape — https://swatchly.xyz/palette/c27fa9-007f95-fff6e3-7bcfeb-742c5f */
:root {
  --romanov-mauve: #c27fa9;
  --pacific-pleasure: #007f95;
  --creamy-cloud-dreams: #fff6e3;
  --below-zero: #7bcfeb;
  --grape: #742c5f;
}

Tailwind CSS v4

/* Romanov Mauve to Grape — https://swatchly.xyz/palette/c27fa9-007f95-fff6e3-7bcfeb-742c5f */
@theme {
  --color-romanov-mauve: #c27fa9;
  --color-romanov-mauve-50: #ffebf7;
  --color-romanov-mauve-100: #ffd9f0;
  --color-romanov-mauve-200: #f5bddf;
  --color-romanov-mauve-300: #e0a2c8;
  --color-romanov-mauve-400: #c27fa9;
  --color-romanov-mauve-500: #a7668f;
  --color-romanov-mauve-600: #8b4e75;
  --color-romanov-mauve-700: #723b5f;
  --color-romanov-mauve-800: #5c2c4c;
  --color-romanov-mauve-900: #4a213c;
  --color-romanov-mauve-950: #311327;
  --color-pacific-pleasure: #007f95;
  --color-pacific-pleasure-50: #e5f9ff;
  --color-pacific-pleasure-100: #ccf4ff;
  --color-pacific-pleasure-200: #a3e6f7;
  --color-pacific-pleasure-300: #84d2e5;
  --color-pacific-pleasure-400: #58b4ca;
  --color-pacific-pleasure-500: #3399b0;
  --color-pacific-pleasure-600: #007f95;
  --color-pacific-pleasure-700: #006577;
  --color-pacific-pleasure-800: #004f5d;
  --color-pacific-pleasure-900: #003c48;
  --color-pacific-pleasure-950: #00262e;
  --color-creamy-cloud-dreams: #fff6e3;
  --color-creamy-cloud-dreams-50: #fff6e3;
  --color-creamy-cloud-dreams-100: #f1ece1;
  --color-creamy-cloud-dreams-200: #ded8ca;
  --color-creamy-cloud-dreams-300: #c8c1b2;
  --color-creamy-cloud-dreams-400: #a9a190;
  --color-creamy-cloud-dreams-500: #8e8675;
  --color-creamy-cloud-dreams-600: #736b5b;
  --color-creamy-cloud-dreams-700: #5b5546;
  --color-creamy-cloud-dreams-800: #484235;
  --color-creamy-cloud-dreams-900: #373227;
  --color-creamy-cloud-dreams-950: #231f17;
  --color-below-zero: #7bcfeb;
  --color-below-zero-50: #e8f9ff;
  --color-below-zero-100: #cff2ff;
  --color-below-zero-200: #a7e3f7;
  --color-below-zero-300: #7bcfeb;
  --color-below-zero-400: #5faec8;
  --color-below-zero-500: #3d93ad;
  --color-below-zero-600: #1c7791;
  --color-below-zero-700: #005f76;
  --color-below-zero-800: #004a5d;
  --color-below-zero-900: #003948;
  --color-below-zero-950: #00242e;
  --color-grape: #742c5f;
  --color-grape-50: #fff0f9;
  --color-grape-100: #ffe1f3;
  --color-grape-200: #ffc2e9;
  --color-grape-300: #f0a9d7;
  --color-grape-400: #d588bb;
  --color-grape-500: #bb6da1;
  --color-grape-600: #9f5487;
  --color-grape-700: #864071;
  --color-grape-800: #742c5f;
  --color-grape-900: #592349;
  --color-grape-950: #3b1330;
}