Girlie to Sunken Mystery color palette

About this palette

Girlie to Sunken Mystery is a 4-color vintage palette: #FFD5D2 (Girlie), #EA6656 (Flattered Flamingo), #077E91 (Bermuda), #0B5158 (Sunken Mystery). It mixes pink, red, turquoise tones and feels balanced overall. The strongest text pairing is #FFD5D2 on #0B5158 with a contrast ratio of 6.73:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Girliergb(255, 213, 210)hsl(4, 100%, 91%)
Flattered Flamingorgb(234, 102, 86)hsl(6, 78%, 63%)
Bermudargb(7, 126, 145)hsl(188, 91%, 30%)
Sunken Mysteryrgb(11, 81, 88)hsl(185, 78%, 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.

  • Aa6.73:1 Good#FFD5D2 on #0B5158
  • Aa6.73:1 Good#0B5158 on #FFD5D2
  • Aa3.57:1 Poor#FFD5D2 on #077E91
  • Aa3.57:1 Poor#077E91 on #FFD5D2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Girlie to Sunken Mystery — https://swatchly.xyz/palette/ffd5d2-ea6656-077e91-0b5158 */
:root {
  --girlie: #ffd5d2;
  --flattered-flamingo: #ea6656;
  --bermuda: #077e91;
  --sunken-mystery: #0b5158;
}

Tailwind CSS v4

/* Girlie to Sunken Mystery — https://swatchly.xyz/palette/ffd5d2-ea6656-077e91-0b5158 */
@theme {
  --color-girlie: #ffd5d2;
  --color-girlie-50: #fffaf9;
  --color-girlie-100: #ffeeed;
  --color-girlie-200: #ffd5d2;
  --color-girlie-300: #e1bfbd;
  --color-girlie-400: #c29d9a;
  --color-girlie-500: #a5807d;
  --color-girlie-600: #886462;
  --color-girlie-700: #6d4d4b;
  --color-girlie-800: #563a38;
  --color-girlie-900: #432c2a;
  --color-girlie-950: #2b1a19;
  --color-flattered-flamingo: #ea6656;
  --color-flattered-flamingo-50: #ffece9;
  --color-flattered-flamingo-100: #ffdbd5;
  --color-flattered-flamingo-200: #ffbcb1;
  --color-flattered-flamingo-300: #ff9585;
  --color-flattered-flamingo-400: #ea6656;
  --color-flattered-flamingo-500: #cd4b3d;
  --color-flattered-flamingo-600: #ae3227;
  --color-flattered-flamingo-700: #911f16;
  --color-flattered-flamingo-800: #77100a;
  --color-flattered-flamingo-900: #610704;
  --color-flattered-flamingo-950: #420201;
  --color-bermuda: #077e91;
  --color-bermuda-50: #e4faff;
  --color-bermuda-100: #c9f5ff;
  --color-bermuda-200: #a4e6f5;
  --color-bermuda-300: #84d1e2;
  --color-bermuda-400: #5ab3c6;
  --color-bermuda-500: #3599ac;
  --color-bermuda-600: #077e91;
  --color-bermuda-700: #006474;
  --color-bermuda-800: #004e5b;
  --color-bermuda-900: #003c46;
  --color-bermuda-950: #00262d;
  --color-sunken-mystery: #0b5158;
  --color-sunken-mystery-50: #dffcff;
  --color-sunken-mystery-100: #cdf3f8;
  --color-sunken-mystery-200: #b4e1e7;
  --color-sunken-mystery-300: #99cdd3;
  --color-sunken-mystery-400: #75afb6;
  --color-sunken-mystery-500: #57949c;
  --color-sunken-mystery-600: #3e7a81;
  --color-sunken-mystery-700: #2a636a;
  --color-sunken-mystery-800: #0b5158;
  --color-sunken-mystery-900: #0f3e43;
  --color-sunken-mystery-950: #05272b;
}

Similar palettes