Swamp Thing to Slightly in Love color palette

002E2BSwamp Thing 34558AGlimpse of Void 009395Java E9A285Les Demoiselles d’Avignon FFE5D8Slightly in Love

Open in generator Export PNG, PDF, ASE…

About this palette

Swamp Thing to Slightly in Love is a 5-color cool palette: #002E2B (Swamp Thing), #34558A (Glimpse of Void), #009395 (Java), #E9A285 (Les Demoiselles d’Avignon), #FFE5D8 (Slightly in Love). It mixes turquoise, blue, orange, white tones and feels cool overall. The strongest text pairing is #002E2B on #FFE5D8 with a contrast ratio of 12.24:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swamp Thing	rgb(0, 46, 43)	hsl(176, 100%, 9%)
Glimpse of Void	rgb(52, 85, 138)	hsl(217, 45%, 37%)
Java	rgb(0, 147, 149)	hsl(181, 100%, 29%)
Les Demoiselles d’Avignon	rgb(233, 162, 133)	hsl(17, 69%, 72%)
Slightly in Love	rgb(255, 229, 216)	hsl(20, 100%, 92%)

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.24:1 Super#002E2B on #FFE5D8
Aa12.24:1 Super#FFE5D8 on #002E2B
Aa6.99:1 Good#002E2B on #E9A285
Aa6.99:1 Good#E9A285 on #002E2B
Aa6.21:1 Good#34558A on #FFE5D8
Aa6.21:1 Good#FFE5D8 on #34558A
Aa3.93:1 Poor#002E2B on #009395
Aa3.93:1 Poor#009395 on #002E2B

Color blindness preview

CSS variables

/* Swamp Thing to Slightly in Love — https://swatchly.xyz/palette/002e2b-34558a-009395-e9a285-ffe5d8 */
:root {
  --swamp-thing: #002e2b;
  --glimpse-of-void: #34558a;
  --java: #009395;
  --les-demoiselles-d-avignon: #e9a285;
  --slightly-in-love: #ffe5d8;
}

Tailwind CSS v4

/* Swamp Thing to Slightly in Love — https://swatchly.xyz/palette/002e2b-34558a-009395-e9a285-ffe5d8 */
@theme {
  --color-swamp-thing: #002e2b;
  --color-swamp-thing-50: #e3fbf8;
  --color-swamp-thing-100: #d6f2ef;
  --color-swamp-thing-200: #bfdfdc;
  --color-swamp-thing-300: #a4cac6;
  --color-swamp-thing-400: #82aba7;
  --color-swamp-thing-500: #67918d;
  --color-swamp-thing-600: #4e7874;
  --color-swamp-thing-700: #3b625e;
  --color-swamp-thing-800: #2c4f4c;
  --color-swamp-thing-900: #21403d;
  --color-swamp-thing-950: #002e2b;
  --color-glimpse-of-void: #34558a;
  --color-glimpse-of-void-50: #f0f6ff;
  --color-glimpse-of-void-100: #e0ecff;
  --color-glimpse-of-void-200: #c1d9ff;
  --color-glimpse-of-void-300: #a2c3f6;
  --color-glimpse-of-void-400: #7fa3db;
  --color-glimpse-of-void-500: #6387c0;
  --color-glimpse-of-void-600: #4a6ca2;
  --color-glimpse-of-void-700: #34558a;
  --color-glimpse-of-void-800: #28426d;
  --color-glimpse-of-void-900: #1c3257;
  --color-glimpse-of-void-950: #0f1f39;
  --color-java: #009395;
  --color-java-50: #cfffff;
  --color-java-100: #b6f7f8;
  --color-java-200: #96e5e5;
  --color-java-300: #71cfd0;
  --color-java-400: #3fb0b1;
  --color-java-500: #009395;
  --color-java-600: #007678;
  --color-java-700: #005e60;
  --color-java-800: #004a4b;
  --color-java-900: #00393a;
  --color-java-950: #002425;
  --color-les-demoiselles-d-avignon: #e9a285;
  --color-les-demoiselles-d-avignon-50: #ffeae2;
  --color-les-demoiselles-d-avignon-100: #ffdacc;
  --color-les-demoiselles-d-avignon-200: #f9bfa7;
  --color-les-demoiselles-d-avignon-300: #e9a285;
  --color-les-demoiselles-d-avignon-400: #c9856a;
  --color-les-demoiselles-d-avignon-500: #ae6c50;
  --color-les-demoiselles-d-avignon-600: #92543a;
  --color-les-demoiselles-d-avignon-700: #794129;
  --color-les-demoiselles-d-avignon-800: #62311c;
  --color-les-demoiselles-d-avignon-900: #4f2513;
  --color-les-demoiselles-d-avignon-950: #341508;
  --color-slightly-in-love: #ffe5d8;
  --color-slightly-in-love-50: #fff2ec;
  --color-slightly-in-love-100: #ffe5d8;
  --color-slightly-in-love-200: #e6d3c9;
  --color-slightly-in-love-300: #d1bcb1;
  --color-slightly-in-love-400: #b39c90;
  --color-slightly-in-love-500: #988175;
  --color-slightly-in-love-600: #7c665b;
  --color-slightly-in-love-700: #645046;
  --color-slightly-in-love-800: #4f3e35;
  --color-slightly-in-love-900: #3e2f28;
  --color-slightly-in-love-950: #271d17;
}