Sunken Ship to Hot Flamingo Color Palette

About this palette

Sunken Ship to Hot Flamingo is a 5-color warm, vintage palette: #022526 (Sunken Ship), #E5898A (Boho Blush), #294A77 (Dragonfly), #DDB686 (Brandy), #AA5766 (Hot Flamingo). It mixes turquoise, red, blue, orange tones and feels warm overall. The strongest text pairing is #022526 on #DDB686 with a contrast ratio of 8.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunken Ship	rgb(2, 37, 38)	hsl(182, 90%, 8%)
Boho Blush	rgb(229, 137, 138)	hsl(359, 64%, 72%)
Dragonfly	rgb(41, 74, 119)	hsl(215, 49%, 31%)
Brandy	rgb(221, 182, 134)	hsl(33, 56%, 70%)
Hot Flamingo	rgb(170, 87, 102)	hsl(349, 33%, 50%)

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.58:1 Very good#022526 on #DDB686
Aa8.58:1 Very good#DDB686 on #022526
Aa6.39:1 Good#022526 on #E5898A
Aa6.39:1 Good#E5898A on #022526
Aa4.75:1 Good#294A77 on #DDB686
Aa4.75:1 Good#DDB686 on #294A77
Aa3.54:1 Poor#E5898A on #294A77
Aa3.54:1 Poor#294A77 on #E5898A

Color blindness preview

CSS variables

/* Sunken Ship to Hot Flamingo — https://swatchly.xyz/palette/022526-e5898a-294a77-ddb686-aa5766 */
:root {
  --sunken-ship: #022526;
  --boho-blush: #e5898a;
  --dragonfly: #294a77;
  --brandy: #ddb686;
  --hot-flamingo: #aa5766;
}

Tailwind CSS v4

/* Sunken Ship to Hot Flamingo — https://swatchly.xyz/palette/022526-e5898a-294a77-ddb686-aa5766 */
@theme {
  --color-sunken-ship: #022526;
  --color-sunken-ship-50: #e5fafa;
  --color-sunken-ship-100: #daf1f1;
  --color-sunken-ship-200: #c2dede;
  --color-sunken-ship-300: #a9c8c8;
  --color-sunken-ship-400: #87a9aa;
  --color-sunken-ship-500: #6b8e8e;
  --color-sunken-ship-600: #517374;
  --color-sunken-ship-700: #3d5c5c;
  --color-sunken-ship-800: #2d4849;
  --color-sunken-ship-900: #213838;
  --color-sunken-ship-950: #022526;
  --color-boho-blush: #e5898a;
  --color-boho-blush-50: #fff4f4;
  --color-boho-blush-100: #ffe8e7;
  --color-boho-blush-200: #ffcdcc;
  --color-boho-blush-300: #fdadad;
  --color-boho-blush-400: #e5898a;
  --color-boho-blush-500: #c56d6f;
  --color-boho-blush-600: #a65254;
  --color-boho-blush-700: #893c3f;
  --color-boho-blush-800: #6e2b2e;
  --color-boho-blush-900: #571e21;
  --color-boho-blush-950: #381012;
  --color-dragonfly: #294a77;
  --color-dragonfly-50: #eff6ff;
  --color-dragonfly-100: #dfecff;
  --color-dragonfly-200: #bfdaff;
  --color-dragonfly-300: #a4c5f1;
  --color-dragonfly-400: #83a6d7;
  --color-dragonfly-500: #688cbe;
  --color-dragonfly-600: #5072a2;
  --color-dragonfly-700: #3d5d88;
  --color-dragonfly-800: #294a77;
  --color-dragonfly-900: #21395b;
  --color-dragonfly-950: #12243c;
  --color-brandy: #ddb686;
  --color-brandy-50: #fff1e0;
  --color-brandy-100: #fee4c6;
  --color-brandy-200: #edcfab;
  --color-brandy-300: #ddb686;
  --color-brandy-400: #bc986a;
  --color-brandy-500: #a17d4e;
  --color-brandy-600: #856336;
  --color-brandy-700: #6d4d23;
  --color-brandy-800: #573c16;
  --color-brandy-900: #452d0d;
  --color-brandy-950: #2c1b05;
  --color-hot-flamingo: #aa5766;
  --color-hot-flamingo-50: #fff1f3;
  --color-hot-flamingo-100: #ffe6e8;
  --color-hot-flamingo-200: #ffcbd2;
  --color-hot-flamingo-300: #faadb8;
  --color-hot-flamingo-400: #e08c99;
  --color-hot-flamingo-500: #c6707f;
  --color-hot-flamingo-600: #aa5766;
  --color-hot-flamingo-700: #8c404f;
  --color-hot-flamingo-800: #712f3c;
  --color-hot-flamingo-900: #59212d;
  --color-hot-flamingo-950: #3b121b;
}