Purple’s Baby Sister to Cold and Dark color palette

F2BFE8Purple’s Baby Sister AF9C00Lucky B456A1Magenta Memoir 005770Sea Creature 103E4CCold and Dark

About this palette

Purple’s Baby Sister to Cold and Dark is a 5-color warm palette: #F2BFE8 (Purple’s Baby Sister), #AF9C00 (Lucky), #B456A1 (Magenta Memoir), #005770 (Sea Creature), #103E4C (Cold and Dark). It mixes pink, yellow, blue tones and feels warm overall. The strongest text pairing is #F2BFE8 on #103E4C with a contrast ratio of 7.38:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple’s Baby Sister	rgb(242, 191, 232)	hsl(312, 66%, 85%)
Lucky	rgb(175, 156, 0)	hsl(53, 100%, 34%)
Magenta Memoir	rgb(180, 86, 161)	hsl(312, 39%, 52%)
Sea Creature	rgb(0, 87, 112)	hsl(193, 100%, 22%)
Cold and Dark	rgb(16, 62, 76)	hsl(194, 65%, 18%)

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.

Aa7.38:1 Very good#F2BFE8 on #103E4C
Aa7.38:1 Very good#103E4C on #F2BFE8
Aa5.16:1 Good#F2BFE8 on #005770
Aa5.16:1 Good#005770 on #F2BFE8
Aa4.17:1 Poor#AF9C00 on #103E4C
Aa4.17:1 Poor#103E4C on #AF9C00

Color blindness preview

CSS variables

/* Purple’s Baby Sister to Cold and Dark — https://swatchly.xyz/palette/f2bfe8-af9c00-b456a1-005770-103e4c */
:root {
  --purple-s-baby-sister: #f2bfe8;
  --lucky: #af9c00;
  --magenta-memoir: #b456a1;
  --sea-creature: #005770;
  --cold-and-dark: #103e4c;
}

Tailwind CSS v4

/* Purple’s Baby Sister to Cold and Dark — https://swatchly.xyz/palette/f2bfe8-af9c00-b456a1-005770-103e4c */
@theme {
  --color-purple-s-baby-sister: #f2bfe8;
  --color-purple-s-baby-sister-50: #ffeafa;
  --color-purple-s-baby-sister-100: #fcdaf5;
  --color-purple-s-baby-sister-200: #f2bfe8;
  --color-purple-s-baby-sister-300: #d8accf;
  --color-purple-s-baby-sister-400: #bb8cb2;
  --color-purple-s-baby-sister-500: #a07298;
  --color-purple-s-baby-sister-600: #85597d;
  --color-purple-s-baby-sister-700: #6d4566;
  --color-purple-s-baby-sister-800: #573451;
  --color-purple-s-baby-sister-900: #44273f;
  --color-purple-s-baby-sister-950: #2c1728;
  --color-lucky: #af9c00;
  --color-lucky-50: #fef5b6;
  --color-lucky-100: #f5eaa2;
  --color-lucky-200: #e3d57d;
  --color-lucky-300: #cdbd55;
  --color-lucky-400: #af9c00;
  --color-lucky-500: #928200;
  --color-lucky-600: #766800;
  --color-lucky-700: #5e5300;
  --color-lucky-800: #4a4100;
  --color-lucky-900: #3a3200;
  --color-lucky-950: #252000;
  --color-magenta-memoir: #b456a1;
  --color-magenta-memoir-50: #ffeefa;
  --color-magenta-memoir-100: #ffdcf6;
  --color-magenta-memoir-200: #ffb9ee;
  --color-magenta-memoir-300: #f199dd;
  --color-magenta-memoir-400: #d274be;
  --color-magenta-memoir-500: #b456a1;
  --color-magenta-memoir-600: #973e86;
  --color-magenta-memoir-700: #7c2b6d;
  --color-magenta-memoir-800: #641d58;
  --color-magenta-memoir-900: #501346;
  --color-magenta-memoir-950: #35082d;
  --color-sea-creature: #005770;
  --color-sea-creature-50: #e8f8ff;
  --color-sea-creature-100: #d1f1ff;
  --color-sea-creature-200: #acdff5;
  --color-sea-creature-300: #8dc8e1;
  --color-sea-creature-400: #65a8c3;
  --color-sea-creature-500: #458ba6;
  --color-sea-creature-600: #2a6f88;
  --color-sea-creature-700: #005770;
  --color-sea-creature-800: #064457;
  --color-sea-creature-900: #013445;
  --color-sea-creature-950: #00202c;
  --color-cold-and-dark: #103e4c;
  --color-cold-and-dark-50: #e7f9ff;
  --color-cold-and-dark-100: #d4f1fb;
  --color-cold-and-dark-200: #bcdeeb;
  --color-cold-and-dark-300: #a1c8d7;
  --color-cold-and-dark-400: #7faaba;
  --color-cold-and-dark-500: #6490a0;
  --color-cold-and-dark-600: #4b7685;
  --color-cold-and-dark-700: #37606d;
  --color-cold-and-dark-800: #284d59;
  --color-cold-and-dark-900: #103e4c;
  --color-cold-and-dark-950: #0f272f;
}