Realm of the Underworld to Violet Kiss color palette

1B4000Realm of the Underworld 3B5C30Turf 006E72Pine Scented Lagoon 008F87Dark Cyan D577B9Pink Punk F49ECBViolet Kiss

Open in generator Export PNG, PDF, ASE…

About this palette

Realm of the Underworld to Violet Kiss is a 6-color cool palette: #1B4000 (Realm of the Underworld), #3B5C30 (Turf), #006E72 (Pine Scented Lagoon), #008F87 (Dark Cyan), #D577B9 (Pink Punk), #F49ECB (Violet Kiss). It mixes green, turquoise, pink tones and feels cool overall. The strongest text pairing is #1B4000 on #F49ECB with a contrast ratio of 5.96:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Realm of the Underworld	rgb(27, 64, 0)	hsl(95, 100%, 13%)
Turf	rgb(59, 92, 48)	hsl(105, 31%, 27%)
Pine Scented Lagoon	rgb(0, 110, 114)	hsl(182, 100%, 22%)
Dark Cyan	rgb(0, 143, 135)	hsl(177, 100%, 28%)
Pink Punk	rgb(213, 119, 185)	hsl(318, 53%, 65%)
Violet Kiss	rgb(244, 158, 203)	hsl(329, 80%, 79%)

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.

Aa5.96:1 Good#1B4000 on #F49ECB
Aa5.96:1 Good#F49ECB on #1B4000
Aa4.03:1 Poor#1B4000 on #D577B9
Aa4.03:1 Poor#D577B9 on #1B4000
Aa3.84:1 Poor#3B5C30 on #F49ECB
Aa3.84:1 Poor#F49ECB on #3B5C30
Aa3.05:1 Poor#006E72 on #F49ECB
Aa3.05:1 Poor#F49ECB on #006E72

Color blindness preview

CSS variables

/* Realm of the Underworld to Violet Kiss — https://swatchly.xyz/palette/1b4000-3b5c30-006e72-008f87-d577b9-f49ecb */
:root {
  --realm-of-the-underworld: #1b4000;
  --turf: #3b5c30;
  --pine-scented-lagoon: #006e72;
  --dark-cyan: #008f87;
  --pink-punk: #d577b9;
  --violet-kiss: #f49ecb;
}

Tailwind CSS v4

/* Realm of the Underworld to Violet Kiss — https://swatchly.xyz/palette/1b4000-3b5c30-006e72-008f87-d577b9-f49ecb */
@theme {
  --color-realm-of-the-underworld: #1b4000;
  --color-realm-of-the-underworld-50: #e5feda;
  --color-realm-of-the-underworld-100: #d9f5cd;
  --color-realm-of-the-underworld-200: #c2e3b3;
  --color-realm-of-the-underworld-300: #a9ce98;
  --color-realm-of-the-underworld-400: #87b074;
  --color-realm-of-the-underworld-500: #6c9558;
  --color-realm-of-the-underworld-600: #537a3f;
  --color-realm-of-the-underworld-700: #3f632c;
  --color-realm-of-the-underworld-800: #2f4f1e;
  --color-realm-of-the-underworld-900: #1b4000;
  --color-realm-of-the-underworld-950: #142709;
  --color-turf: #3b5c30;
  --color-turf-50: #e7fde1;
  --color-turf-100: #dcf4d4;
  --color-turf-200: #c4e1bb;
  --color-turf-300: #aacba0;
  --color-turf-400: #88ab7d;
  --color-turf-500: #6c8f61;
  --color-turf-600: #527347;
  --color-turf-700: #3b5c30;
  --color-turf-800: #2e4825;
  --color-turf-900: #21371a;
  --color-turf-950: #13230e;
  --color-pine-scented-lagoon: #006e72;
  --color-pine-scented-lagoon-50: #d8feff;
  --color-pine-scented-lagoon-100: #c4f6f8;
  --color-pine-scented-lagoon-200: #abe6e9;
  --color-pine-scented-lagoon-300: #8ed3d6;
  --color-pine-scented-lagoon-400: #67b7ba;
  --color-pine-scented-lagoon-500: #479da1;
  --color-pine-scented-lagoon-600: #298488;
  --color-pine-scented-lagoon-700: #006e72;
  --color-pine-scented-lagoon-800: #005659;
  --color-pine-scented-lagoon-900: #004245;
  --color-pine-scented-lagoon-950: #002a2c;
  --color-dark-cyan: #008f87;
  --color-dark-cyan-50: #cdfff9;
  --color-dark-cyan-100: #b5f6ef;
  --color-dark-cyan-200: #94e3db;
  --color-dark-cyan-300: #6fcdc4;
  --color-dark-cyan-400: #3eaca4;
  --color-dark-cyan-500: #008f87;
  --color-dark-cyan-600: #00736d;
  --color-dark-cyan-700: #005c56;
  --color-dark-cyan-800: #004844;
  --color-dark-cyan-900: #003835;
  --color-dark-cyan-950: #002421;
  --color-pink-punk: #d577b9;
  --color-pink-punk-50: #ffeef9;
  --color-pink-punk-100: #ffddf3;
  --color-pink-punk-200: #ffbce9;
  --color-pink-punk-300: #f19dd7;
  --color-pink-punk-400: #d577b9;
  --color-pink-punk-500: #b85c9e;
  --color-pink-punk-600: #9a4482;
  --color-pink-punk-700: #7f306a;
  --color-pink-punk-800: #672155;
  --color-pink-punk-900: #521743;
  --color-pink-punk-950: #360b2b;
  --color-violet-kiss: #f49ecb;
  --color-violet-kiss-50: #ffeef6;
  --color-violet-kiss-100: #ffdeee;
  --color-violet-kiss-200: #ffbedf;
  --color-violet-kiss-300: #f49ecb;
  --color-violet-kiss-400: #d181ab;
  --color-violet-kiss-500: #b66591;
  --color-violet-kiss-600: #984c76;
  --color-violet-kiss-700: #7d385f;
  --color-violet-kiss-800: #65294b;
  --color-violet-kiss-900: #511d3b;
  --color-violet-kiss-950: #351025;
}