Sunken Ship to Dust of the Moon Color Palette

About this palette

Sunken Ship to Dust of the Moon is a 5-color muted, vintage palette: #092625 (Sunken Ship), #A19868 (Guacamole), #9C6D7D (Never Forget), #424564 (Genie), #C9CBE0 (Dust of the Moon). It mixes gray, yellow, red, purple tones and feels warm overall. The strongest text pairing is #092625 on #C9CBE0 with a contrast ratio of 9.96:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunken Ship	rgb(9, 38, 37)	hsl(178, 62%, 9%)
Guacamole	rgb(161, 152, 104)	hsl(51, 23%, 52%)
Never Forget	rgb(156, 109, 125)	hsl(340, 19%, 52%)
Genie	rgb(66, 69, 100)	hsl(235, 20%, 33%)
Dust of the Moon	rgb(201, 203, 224)	hsl(235, 27%, 83%)

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.

Aa9.96:1 Very good#092625 on #C9CBE0
Aa9.96:1 Very good#C9CBE0 on #092625
Aa5.78:1 Good#424564 on #C9CBE0
Aa5.78:1 Good#C9CBE0 on #424564
Aa5.48:1 Good#092625 on #A19868
Aa5.48:1 Good#A19868 on #092625
Aa3.72:1 Poor#092625 on #9C6D7D
Aa3.72:1 Poor#9C6D7D on #092625

Color blindness preview

CSS variables

/* Sunken Ship to Dust of the Moon — https://swatchly.xyz/palette/092625-a19868-9c6d7d-424564-c9cbe0 */
:root {
  --sunken-ship: #092625;
  --guacamole: #a19868;
  --never-forget: #9c6d7d;
  --genie: #424564;
  --dust-of-the-moon: #c9cbe0;
}

Tailwind CSS v4

/* Sunken Ship to Dust of the Moon — https://swatchly.xyz/palette/092625-a19868-9c6d7d-424564-c9cbe0 */
@theme {
  --color-sunken-ship: #092625;
  --color-sunken-ship-50: #e8f9f8;
  --color-sunken-ship-100: #dcf0ef;
  --color-sunken-ship-200: #c5dddc;
  --color-sunken-ship-300: #acc7c6;
  --color-sunken-ship-400: #8ba8a7;
  --color-sunken-ship-500: #6f8d8c;
  --color-sunken-ship-600: #567371;
  --color-sunken-ship-700: #425c5b;
  --color-sunken-ship-800: #314947;
  --color-sunken-ship-900: #253938;
  --color-sunken-ship-950: #092625;
  --color-guacamole: #a19868;
  --color-guacamole-50: #f7f2d5;
  --color-guacamole-100: #ece7c6;
  --color-guacamole-200: #d8d1ab;
  --color-guacamole-300: #c1b98d;
  --color-guacamole-400: #a19868;
  --color-guacamole-500: #877f4f;
  --color-guacamole-600: #6e6639;
  --color-guacamole-700: #595128;
  --color-guacamole-800: #47401b;
  --color-guacamole-900: #383212;
  --color-guacamole-950: #241f08;
  --color-never-forget: #9c6d7d;
  --color-never-forget-50: #ffeef3;
  --color-never-forget-100: #ffdde8;
  --color-never-forget-200: #eec6d3;
  --color-never-forget-300: #d9acba;
  --color-never-forget-400: #ba8a9a;
  --color-never-forget-500: #9c6d7d;
  --color-never-forget-600: #815565;
  --color-never-forget-700: #694250;
  --color-never-forget-800: #54323e;
  --color-never-forget-900: #432630;
  --color-never-forget-950: #2b171e;
  --color-genie: #424564;
  --color-genie-50: #f3f4ff;
  --color-genie-100: #e7eaff;
  --color-genie-200: #d2d5f1;
  --color-genie-300: #bcc0df;
  --color-genie-400: #9da1c3;
  --color-genie-500: #8286a9;
  --color-genie-600: #696d8e;
  --color-genie-700: #545776;
  --color-genie-800: #424564;
  --color-genie-900: #33354c;
  --color-genie-950: #1f2132;
  --color-dust-of-the-moon: #c9cbe0;
  --color-dust-of-the-moon-50: #ebedfa;
  --color-dust-of-the-moon-100: #dfe1ef;
  --color-dust-of-the-moon-200: #c9cbe0;
  --color-dust-of-the-moon-300: #b5b7c9;
  --color-dust-of-the-moon-400: #9799ac;
  --color-dust-of-the-moon-500: #7e8093;
  --color-dust-of-the-moon-600: #656779;
  --color-dust-of-the-moon-700: #515263;
  --color-dust-of-the-moon-800: #40414f;
  --color-dust-of-the-moon-900: #31323e;
  --color-dust-of-the-moon-950: #1e1e27;
}