Sunken Ship to White Truffle color palette

15222ASunken Ship 465541Heavy Green 687C89Citadel B596B9Dripping Wisteria F0DBCEWhite Truffle

About this palette

Sunken Ship to White Truffle is a 5-color muted, gradient palette: #15222A (Sunken Ship), #465541 (Heavy Green), #687C89 (Citadel), #B596B9 (Dripping Wisteria), #F0DBCE (White Truffle). It mixes gray, green, pink tones and feels cool overall. The strongest text pairing is #15222A on #F0DBCE with a contrast ratio of 12.15:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunken Ship	rgb(21, 34, 42)	hsl(203, 33%, 12%)
Heavy Green	rgb(70, 85, 65)	hsl(105, 13%, 29%)
Citadel	rgb(104, 124, 137)	hsl(204, 14%, 47%)
Dripping Wisteria	rgb(181, 150, 185)	hsl(293, 20%, 66%)
White Truffle	rgb(240, 219, 206)	hsl(23, 53%, 87%)

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.15:1 Super#15222A on #F0DBCE
Aa12.15:1 Super#F0DBCE on #15222A
Aa6.20:1 Good#15222A on #B596B9
Aa6.20:1 Good#B596B9 on #15222A
Aa5.97:1 Good#465541 on #F0DBCE
Aa5.97:1 Good#F0DBCE on #465541
Aa3.73:1 Poor#15222A on #687C89
Aa3.73:1 Poor#687C89 on #15222A

Color blindness preview

CSS variables

/* Sunken Ship to White Truffle — https://swatchly.xyz/palette/15222a-465541-687c89-b596b9-f0dbce */
:root {
  --sunken-ship: #15222a;
  --heavy-green: #465541;
  --citadel: #687c89;
  --dripping-wisteria: #b596b9;
  --white-truffle: #f0dbce;
}

Tailwind CSS v4

/* Sunken Ship to White Truffle — https://swatchly.xyz/palette/15222a-465541-687c89-b596b9-f0dbce */
@theme {
  --color-sunken-ship: #15222a;
  --color-sunken-ship-50: #edf7fd;
  --color-sunken-ship-100: #e2edf4;
  --color-sunken-ship-200: #cddae2;
  --color-sunken-ship-300: #b5c3cc;
  --color-sunken-ship-400: #95a4ae;
  --color-sunken-ship-500: #798993;
  --color-sunken-ship-600: #606f78;
  --color-sunken-ship-700: #4b5861;
  --color-sunken-ship-800: #39454c;
  --color-sunken-ship-900: #2b353c;
  --color-sunken-ship-950: #15222a;
  --color-heavy-green: #465541;
  --color-heavy-green-50: #eff9eb;
  --color-heavy-green-100: #e4efe0;
  --color-heavy-green-200: #cedbc9;
  --color-heavy-green-300: #b5c4b0;
  --color-heavy-green-400: #94a48e;
  --color-heavy-green-500: #788872;
  --color-heavy-green-600: #5d6c58;
  --color-heavy-green-700: #465541;
  --color-heavy-green-800: #364232;
  --color-heavy-green-900: #293326;
  --color-heavy-green-950: #181f16;
  --color-citadel: #687c89;
  --color-citadel-50: #ebf7ff;
  --color-citadel-100: #e3f0f9;
  --color-citadel-200: #cfdfe9;
  --color-citadel-300: #b9cbd7;
  --color-citadel-400: #9aaebb;
  --color-citadel-500: #8095a2;
  --color-citadel-600: #687c89;
  --color-citadel-700: #50636f;
  --color-citadel-800: #3d4d57;
  --color-citadel-900: #2d3b44;
  --color-citadel-950: #1a242b;
  --color-dripping-wisteria: #b596b9;
  --color-dripping-wisteria-50: #fdf0ff;
  --color-dripping-wisteria-100: #f8e4fb;
  --color-dripping-wisteria-200: #e7cfea;
  --color-dripping-wisteria-300: #d2b7d6;
  --color-dripping-wisteria-400: #b596b9;
  --color-dripping-wisteria-500: #997b9d;
  --color-dripping-wisteria-600: #7d6181;
  --color-dripping-wisteria-700: #654b68;
  --color-dripping-wisteria-800: #503953;
  --color-dripping-wisteria-900: #3e2b41;
  --color-dripping-wisteria-950: #271a29;
  --color-white-truffle: #f0dbce;
  --color-white-truffle-50: #fff9f6;
  --color-white-truffle-100: #fcefe8;
  --color-white-truffle-200: #f0dbce;
  --color-white-truffle-300: #d5c4b9;
  --color-white-truffle-400: #b5a297;
  --color-white-truffle-500: #99867a;
  --color-white-truffle-600: #7c6a5f;
  --color-white-truffle-700: #635348;
  --color-white-truffle-800: #4d3f36;
  --color-white-truffle-900: #3c3029;
  --color-white-truffle-950: #261d18;
}