Sunken Ship to Dream Vapour Color Palette

About this palette

Sunken Ship to Dream Vapour is a 5-color cool palette: #002725 (Sunken Ship), #FFDBA4 (Honey Bee), #009796 (Java), #7B25AA (Fuchsia Nebula), #D38EFF (Dream Vapour). It mixes turquoise, yellow, purple tones and feels cool overall. The strongest text pairing is #002725 on #FFDBA4 with a contrast ratio of 12.09:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunken Ship	rgb(0, 39, 37)	hsl(177, 100%, 8%)
Honey Bee	rgb(255, 219, 164)	hsl(36, 100%, 82%)
Java	rgb(0, 151, 150)	hsl(180, 100%, 30%)
Fuchsia Nebula	rgb(123, 37, 170)	hsl(279, 64%, 41%)
Dream Vapour	rgb(211, 142, 255)	hsl(277, 100%, 78%)

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.

Aa12.09:1 Super#002725 on #FFDBA4
Aa12.09:1 Super#FFDBA4 on #002725
Aa6.90:1 Good#002725 on #D38EFF
Aa6.90:1 Good#D38EFF on #002725
Aa5.92:1 Good#FFDBA4 on #7B25AA
Aa5.92:1 Good#7B25AA on #FFDBA4
Aa4.46:1 Poor#002725 on #009796
Aa4.46:1 Poor#009796 on #002725

Color blindness preview

CSS variables

/* Sunken Ship to Dream Vapour — https://swatchly.xyz/palette/002725-ffdba4-009796-7b25aa-d38eff */
:root {
  --sunken-ship: #002725;
  --honey-bee: #ffdba4;
  --java: #009796;
  --fuchsia-nebula: #7b25aa;
  --dream-vapour: #d38eff;
}

Tailwind CSS v4

/* Sunken Ship to Dream Vapour — https://swatchly.xyz/palette/002725-ffdba4-009796-7b25aa-d38eff */
@theme {
  --color-sunken-ship: #002725;
  --color-sunken-ship-50: #e4fbf8;
  --color-sunken-ship-100: #d8f1ef;
  --color-sunken-ship-200: #c1dfdc;
  --color-sunken-ship-300: #a7c9c6;
  --color-sunken-ship-400: #85aaa7;
  --color-sunken-ship-500: #698f8c;
  --color-sunken-ship-600: #507471;
  --color-sunken-ship-700: #3c5d5b;
  --color-sunken-ship-800: #2c4a47;
  --color-sunken-ship-900: #203938;
  --color-sunken-ship-950: #002725;
  --color-honey-bee: #ffdba4;
  --color-honey-bee-50: #fffbf5;
  --color-honey-bee-100: #fff1dc;
  --color-honey-bee-200: #ffdba4;
  --color-honey-bee-300: #e1c498;
  --color-honey-bee-400: #c2a270;
  --color-honey-bee-500: #a68450;
  --color-honey-bee-600: #886935;
  --color-honey-bee-700: #6e5120;
  --color-honey-bee-800: #563d11;
  --color-honey-bee-900: #432e08;
  --color-honey-bee-950: #2b1c02;
  --color-java: #009796;
  --color-java-50: #d3fffe;
  --color-java-100: #b7f9f7;
  --color-java-200: #97e7e5;
  --color-java-300: #73d2d0;
  --color-java-400: #41b3b2;
  --color-java-500: #009796;
  --color-java-600: #007a79;
  --color-java-700: #006160;
  --color-java-800: #004c4b;
  --color-java-900: #003b3a;
  --color-java-950: #002525;
  --color-fuchsia-nebula: #7b25aa;
  --color-fuchsia-nebula-50: #f9f2ff;
  --color-fuchsia-nebula-100: #f3e5ff;
  --color-fuchsia-nebula-200: #e8cbff;
  --color-fuchsia-nebula-300: #dbabff;
  --color-fuchsia-nebula-400: #c87cfb;
  --color-fuchsia-nebula-500: #ae5de1;
  --color-fuchsia-nebula-600: #9241c3;
  --color-fuchsia-nebula-700: #7b25aa;
  --color-fuchsia-nebula-800: #611a88;
  --color-fuchsia-nebula-900: #4d0d6d;
  --color-fuchsia-nebula-950: #320449;
  --color-dream-vapour: #d38eff;
  --color-dream-vapour-50: #fcf9ff;
  --color-dream-vapour-100: #f8efff;
  --color-dream-vapour-200: #efd8ff;
  --color-dream-vapour-300: #e3bbff;
  --color-dream-vapour-400: #d38eff;
  --color-dream-vapour-500: #b370dd;
  --color-dream-vapour-600: #9551bd;
  --color-dream-vapour-700: #79399d;
  --color-dream-vapour-800: #5f267f;
  --color-dream-vapour-900: #4a1964;
  --color-dream-vapour-950: #2e0b40;
}