It’s a Girl! to Red Octopus Color Palette

About this palette

It’s a Girl! to Red Octopus is a 5-color warm, vintage, monochromatic palette: #FFD8DF (It’s a Girl!), #451F2E (Castro), #C891A0 (Rosetti), #B3687F (Malevolent Mauve), #702E41 (Red Octopus). It mixes pink, red tones and feels warm overall. The strongest text pairing is #FFD8DF on #451F2E with a contrast ratio of 10.84:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
It’s a Girl!	rgb(255, 216, 223)	hsl(349, 100%, 92%)
Castro	rgb(69, 31, 46)	hsl(336, 38%, 20%)
Rosetti	rgb(200, 145, 160)	hsl(344, 33%, 68%)
Malevolent Mauve	rgb(179, 104, 127)	hsl(342, 33%, 55%)
Red Octopus	rgb(112, 46, 65)	hsl(343, 42%, 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.

Aa10.84:1 Very good#FFD8DF on #451F2E
Aa10.84:1 Very good#451F2E on #FFD8DF
Aa7.49:1 Very good#FFD8DF on #702E41
Aa7.49:1 Very good#702E41 on #FFD8DF
Aa5.38:1 Good#451F2E on #C891A0
Aa5.38:1 Good#C891A0 on #451F2E
Aa3.72:1 Poor#C891A0 on #702E41
Aa3.72:1 Poor#702E41 on #C891A0

Color blindness preview

CSS variables

/* It’s a Girl! to Red Octopus — https://swatchly.xyz/palette/ffd8df-451f2e-c891a0-b3687f-702e41 */
:root {
  --it-s-a-girl: #ffd8df;
  --castro: #451f2e;
  --rosetti: #c891a0;
  --malevolent-mauve: #b3687f;
  --red-octopus: #702e41;
}

Tailwind CSS v4

/* It’s a Girl! to Red Octopus — https://swatchly.xyz/palette/ffd8df-451f2e-c891a0-b3687f-702e41 */
@theme {
  --color-it-s-a-girl: #ffd8df;
  --color-it-s-a-girl-50: #ffe8ec;
  --color-it-s-a-girl-100: #ffd8df;
  --color-it-s-a-girl-200: #e6c8ce;
  --color-it-s-a-girl-300: #d3b2b8;
  --color-it-s-a-girl-400: #b6939a;
  --color-it-s-a-girl-500: #9c7980;
  --color-it-s-a-girl-600: #816067;
  --color-it-s-a-girl-700: #6a4c52;
  --color-it-s-a-girl-800: #543a3f;
  --color-it-s-a-girl-900: #422c30;
  --color-it-s-a-girl-950: #2a1a1d;
  --color-castro: #451f2e;
  --color-castro-50: #fff1f5;
  --color-castro-100: #ffe2ec;
  --color-castro-200: #f2ccd8;
  --color-castro-300: #deb3c2;
  --color-castro-400: #c091a1;
  --color-castro-500: #a37585;
  --color-castro-600: #855a69;
  --color-castro-700: #6a4452;
  --color-castro-800: #53323e;
  --color-castro-900: #451f2e;
  --color-castro-950: #27141b;
  --color-rosetti: #c891a0;
  --color-rosetti-50: #fff2f5;
  --color-rosetti-100: #ffe4ea;
  --color-rosetti-200: #f6cbd6;
  --color-rosetti-300: #e3b3c0;
  --color-rosetti-400: #c891a0;
  --color-rosetti-500: #ab7685;
  --color-rosetti-600: #8e5c6a;
  --color-rosetti-700: #734654;
  --color-rosetti-800: #5c3541;
  --color-rosetti-900: #482731;
  --color-rosetti-950: #2f171e;
  --color-malevolent-mauve: #b3687f;
  --color-malevolent-mauve-50: #fff0f4;
  --color-malevolent-mauve-100: #ffe1e8;
  --color-malevolent-mauve-200: #ffc2d3;
  --color-malevolent-mauve-300: #eda7bb;
  --color-malevolent-mauve-400: #d0859b;
  --color-malevolent-mauve-500: #b3687f;
  --color-malevolent-mauve-600: #964f66;
  --color-malevolent-mauve-700: #7b3b50;
  --color-malevolent-mauve-800: #632c3e;
  --color-malevolent-mauve-900: #4f2030;
  --color-malevolent-mauve-950: #33121d;
  --color-red-octopus: #702e41;
  --color-red-octopus-50: #fff1f4;
  --color-red-octopus-100: #ffe3e8;
  --color-red-octopus-200: #ffc6d2;
  --color-red-octopus-300: #f0acbb;
  --color-red-octopus-400: #d48b9c;
  --color-red-octopus-500: #b97082;
  --color-red-octopus-600: #9d5769;
  --color-red-octopus-700: #834253;
  --color-red-octopus-800: #702e41;
  --color-red-octopus-900: #552532;
  --color-red-octopus-950: #38151f;
}