Sunken Ship to Cookie Crust color palette

002526Sunken Ship 8B6100Alligator 50216DElegant Purple Gown AE85BBHeart Potion 8FF1FFShallow Water E6B457Cookie Crust

Open in generator Export PNG, PDF, ASE…

About this palette

Sunken Ship to Cookie Crust is a 6-color cool palette: #002526 (Sunken Ship), #8B6100 (Alligator), #50216D (Elegant Purple Gown), #AE85BB (Heart Potion), #8FF1FF (Shallow Water), #E6B457 (Cookie Crust). It mixes turquoise, brown, purple, yellow tones and feels cool overall. The strongest text pairing is #002526 on #8FF1FF with a contrast ratio of 12.53:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunken Ship	rgb(0, 37, 38)	hsl(182, 100%, 7%)
Alligator	rgb(139, 97, 0)	hsl(42, 100%, 27%)
Elegant Purple Gown	rgb(80, 33, 109)	hsl(277, 54%, 28%)
Heart Potion	rgb(174, 133, 187)	hsl(286, 28%, 63%)
Shallow Water	rgb(143, 241, 255)	hsl(188, 100%, 78%)
Cookie Crust	rgb(230, 180, 87)	hsl(39, 74%, 62%)

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.53:1 Super#002526 on #8FF1FF
Aa12.53:1 Super#8FF1FF on #002526
Aa9.10:1 Very good#50216D on #8FF1FF
Aa9.10:1 Very good#8FF1FF on #50216D
Aa8.53:1 Very good#002526 on #E6B457
Aa8.53:1 Very good#E6B457 on #002526
Aa6.20:1 Good#50216D on #E6B457
Aa6.20:1 Good#E6B457 on #50216D

Color blindness preview

CSS variables

/* Sunken Ship to Cookie Crust — https://swatchly.xyz/palette/002526-8b6100-50216d-ae85bb-8ff1ff-e6b457 */
:root {
  --sunken-ship: #002526;
  --alligator: #8b6100;
  --elegant-purple-gown: #50216d;
  --heart-potion: #ae85bb;
  --shallow-water: #8ff1ff;
  --cookie-crust: #e6b457;
}

Tailwind CSS v4

/* Sunken Ship to Cookie Crust — https://swatchly.xyz/palette/002526-8b6100-50216d-ae85bb-8ff1ff-e6b457 */
@theme {
  --color-sunken-ship: #002526;
  --color-sunken-ship-50: #e5fafa;
  --color-sunken-ship-100: #d9f1f1;
  --color-sunken-ship-200: #c2dede;
  --color-sunken-ship-300: #a8c8c9;
  --color-sunken-ship-400: #86a9aa;
  --color-sunken-ship-500: #698e8f;
  --color-sunken-ship-600: #507374;
  --color-sunken-ship-700: #3c5c5d;
  --color-sunken-ship-800: #2c4849;
  --color-sunken-ship-900: #1f3838;
  --color-sunken-ship-950: #002526;
  --color-alligator: #8b6100;
  --color-alligator-50: #fff4e2;
  --color-alligator-100: #ffe7c2;
  --color-alligator-200: #f4d19a;
  --color-alligator-300: #e0b979;
  --color-alligator-400: #c3984f;
  --color-alligator-500: #a77c2c;
  --color-alligator-600: #8b6100;
  --color-alligator-700: #6f4c00;
  --color-alligator-800: #573b00;
  --color-alligator-900: #442d00;
  --color-alligator-950: #2b1b00;
  --color-elegant-purple-gown: #50216d;
  --color-elegant-purple-gown-50: #f9f2ff;
  --color-elegant-purple-gown-100: #f3e5ff;
  --color-elegant-purple-gown-200: #e7caff;
  --color-elegant-purple-gown-300: #d5acf6;
  --color-elegant-purple-gown-400: #b688d9;
  --color-elegant-purple-gown-500: #9a6bbc;
  --color-elegant-purple-gown-600: #7d509d;
  --color-elegant-purple-gown-700: #633a7f;
  --color-elegant-purple-gown-800: #50216d;
  --color-elegant-purple-gown-900: #3b1d4f;
  --color-elegant-purple-gown-950: #251033;
  --color-heart-potion: #ae85bb;
  --color-heart-potion-50: #faebff;
  --color-heart-potion-100: #f6daff;
  --color-heart-potion-200: #e4c2ee;
  --color-heart-potion-300: #cda8d9;
  --color-heart-potion-400: #ae85bb;
  --color-heart-potion-500: #946ca0;
  --color-heart-potion-600: #7a5486;
  --color-heart-potion-700: #63416e;
  --color-heart-potion-800: #4f3259;
  --color-heart-potion-900: #3f2647;
  --color-heart-potion-950: #29172f;
  --color-shallow-water: #8ff1ff;
  --color-shallow-water-50: #f0fdff;
  --color-shallow-water-100: #d4faff;
  --color-shallow-water-200: #8ff1ff;
  --color-shallow-water-300: #88d6e1;
  --color-shallow-water-400: #5ab6c3;
  --color-shallow-water-500: #3199a7;
  --color-shallow-water-600: #007d89;
  --color-shallow-water-700: #00626c;
  --color-shallow-water-800: #004c54;
  --color-shallow-water-900: #003a41;
  --color-shallow-water-950: #002529;
  --color-cookie-crust: #e6b457;
  --color-cookie-crust-50: #fff1da;
  --color-cookie-crust-100: #ffe5b8;
  --color-cookie-crust-200: #f4ce8b;
  --color-cookie-crust-300: #e6b457;
  --color-cookie-crust-400: #c5963a;
  --color-cookie-crust-500: #aa7a08;
  --color-cookie-crust-600: #8a6200;
  --color-cookie-crust-700: #6e4e00;
  --color-cookie-crust-800: #573c00;
  --color-cookie-crust-900: #442e00;
  --color-cookie-crust-950: #2b1c00;
}