Swamp Thing to Punched Pink color palette

122921Swamp Thing 3D5A74Dark Blue 3B766BGreen Sleeves E6CAB4Cashew Nut B4819APunched Pink

About this palette

Swamp Thing to Punched Pink is a 5-color muted, vintage palette: #122921 (Swamp Thing), #3D5A74 (Dark Blue), #3B766B (Green Sleeves), #E6CAB4 (Cashew Nut), #B4819A (Punched Pink). It mixes gray, blue, turquoise, orange, pink tones and feels balanced overall. The strongest text pairing is #122921 on #E6CAB4 with a contrast ratio of 9.87:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swamp Thing	rgb(18, 41, 33)	hsl(159, 39%, 12%)
Dark Blue	rgb(61, 90, 116)	hsl(208, 31%, 35%)
Green Sleeves	rgb(59, 118, 107)	hsl(169, 33%, 35%)
Cashew Nut	rgb(230, 202, 180)	hsl(26, 50%, 80%)
Punched Pink	rgb(180, 129, 154)	hsl(331, 25%, 61%)

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.87:1 Very good#122921 on #E6CAB4
Aa9.87:1 Very good#E6CAB4 on #122921
Aa4.80:1 Good#122921 on #B4819A
Aa4.80:1 Good#B4819A on #122921
Aa4.62:1 Good#3D5A74 on #E6CAB4
Aa4.62:1 Good#E6CAB4 on #3D5A74
Aa3.38:1 Poor#3B766B on #E6CAB4
Aa3.38:1 Poor#E6CAB4 on #3B766B

Color blindness preview

CSS variables

/* Swamp Thing to Punched Pink — https://swatchly.xyz/palette/122921-3d5a74-3b766b-e6cab4-b4819a */
:root {
  --swamp-thing: #122921;
  --dark-blue: #3d5a74;
  --green-sleeves: #3b766b;
  --cashew-nut: #e6cab4;
  --punched-pink: #b4819a;
}

Tailwind CSS v4

/* Swamp Thing to Punched Pink — https://swatchly.xyz/palette/122921-3d5a74-3b766b-e6cab4-b4819a */
@theme {
  --color-swamp-thing: #122921;
  --color-swamp-thing-50: #eaf9f3;
  --color-swamp-thing-100: #dff0e9;
  --color-swamp-thing-200: #c9ddd5;
  --color-swamp-thing-300: #b0c7be;
  --color-swamp-thing-400: #8fa89e;
  --color-swamp-thing-500: #748e84;
  --color-swamp-thing-600: #5b746a;
  --color-swamp-thing-700: #475e55;
  --color-swamp-thing-800: #374b43;
  --color-swamp-thing-900: #2a3b35;
  --color-swamp-thing-950: #122921;
  --color-dark-blue: #3d5a74;
  --color-dark-blue-50: #edf6ff;
  --color-dark-blue-100: #dbeeff;
  --color-dark-blue-200: #c3dbf2;
  --color-dark-blue-300: #aac5df;
  --color-dark-blue-400: #88a6c2;
  --color-dark-blue-500: #6c8ba7;
  --color-dark-blue-600: #53718b;
  --color-dark-blue-700: #3d5a74;
  --color-dark-blue-800: #2f465b;
  --color-dark-blue-900: #223648;
  --color-dark-blue-950: #13212e;
  --color-green-sleeves: #3b766b;
  --color-green-sleeves-50: #ddfdf6;
  --color-green-sleeves-100: #cff4ec;
  --color-green-sleeves-200: #b5e2d8;
  --color-green-sleeves-300: #99ccc1;
  --color-green-sleeves-400: #74ada1;
  --color-green-sleeves-500: #569186;
  --color-green-sleeves-600: #3b766b;
  --color-green-sleeves-700: #295e55;
  --color-green-sleeves-800: #1a4a42;
  --color-green-sleeves-900: #103a33;
  --color-green-sleeves-950: #06241f;
  --color-cashew-nut: #e6cab4;
  --color-cashew-nut-50: #fdeddf;
  --color-cashew-nut-100: #f4e1d2;
  --color-cashew-nut-200: #e6cab4;
  --color-cashew-nut-300: #ceb6a3;
  --color-cashew-nut-400: #b19783;
  --color-cashew-nut-500: #977d69;
  --color-cashew-nut-600: #7c6451;
  --color-cashew-nut-700: #654f3e;
  --color-cashew-nut-800: #513e2f;
  --color-cashew-nut-900: #3f2f22;
  --color-cashew-nut-950: #281d13;
  --color-punched-pink: #b4819a;
  --color-punched-pink-50: #fff4f9;
  --color-punched-pink-100: #ffe9f3;
  --color-punched-pink-200: #f9d1e4;
  --color-punched-pink-300: #e8bbd0;
  --color-punched-pink-400: #cd9cb3;
  --color-punched-pink-500: #b4819a;
  --color-punched-pink-600: #95657d;
  --color-punched-pink-700: #794d63;
  --color-punched-pink-800: #613a4e;
  --color-punched-pink-900: #4b2a3b;
  --color-punched-pink-950: #2f1824;
}