Vegetation to Loudicious Pink Color Palette

About this palette

Vegetation to Loudicious Pink is a 5-color cool, neon palette: #3DCDA0 (Vegetation), #003762 (Lost in Space), #FFDFBB (Pandora’s Box), #00754E (Greasy Greens), #D747C6 (Loudicious Pink). It mixes turquoise, blue, orange, green, pink tones and feels cool overall. The strongest text pairing is #003762 on #FFDFBB with a contrast ratio of 9.59:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vegetation	rgb(61, 205, 160)	hsl(161, 59%, 52%)
Lost in Space	rgb(0, 55, 98)	hsl(206, 100%, 19%)
Pandora’s Box	rgb(255, 223, 187)	hsl(32, 100%, 87%)
Greasy Greens	rgb(0, 117, 78)	hsl(160, 100%, 23%)
Loudicious Pink	rgb(215, 71, 198)	hsl(307, 64%, 56%)

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.59:1 Very good#003762 on #FFDFBB
Aa9.59:1 Very good#FFDFBB on #003762
Aa6.06:1 Good#3DCDA0 on #003762
Aa6.06:1 Good#003762 on #3DCDA0
Aa4.52:1 Good#FFDFBB on #00754E
Aa4.52:1 Good#00754E on #FFDFBB
Aa3.25:1 Poor#003762 on #D747C6
Aa3.25:1 Poor#D747C6 on #003762

Color blindness preview

CSS variables

/* Vegetation to Loudicious Pink — https://swatchly.xyz/palette/3dcda0-003762-ffdfbb-00754e-d747c6 */
:root {
  --vegetation: #3dcda0;
  --lost-in-space: #003762;
  --pandora-s-box: #ffdfbb;
  --greasy-greens: #00754e;
  --loudicious-pink: #d747c6;
}

Tailwind CSS v4

/* Vegetation to Loudicious Pink — https://swatchly.xyz/palette/3dcda0-003762-ffdfbb-00754e-d747c6 */
@theme {
  --color-vegetation: #3dcda0;
  --color-vegetation-50: #b9ffe2;
  --color-vegetation-100: #a1f5d4;
  --color-vegetation-200: #7be2bc;
  --color-vegetation-300: #3dcda0;
  --color-vegetation-400: #05af84;
  --color-vegetation-500: #00936e;
  --color-vegetation-600: #007759;
  --color-vegetation-700: #006047;
  --color-vegetation-800: #004d38;
  --color-vegetation-900: #003d2c;
  --color-vegetation-950: #00261b;
  --color-lost-in-space: #003762;
  --color-lost-in-space-50: #eef6ff;
  --color-lost-in-space-100: #dcedff;
  --color-lost-in-space-200: #b9dcff;
  --color-lost-in-space-300: #9ac6f2;
  --color-lost-in-space-400: #76a7d7;
  --color-lost-in-space-500: #5a8bbc;
  --color-lost-in-space-600: #4171a0;
  --color-lost-in-space-700: #2e5a85;
  --color-lost-in-space-800: #1f476d;
  --color-lost-in-space-900: #003762;
  --color-lost-in-space-950: #09233a;
  --color-pandora-s-box: #ffdfbb;
  --color-pandora-s-box-50: #ffedd8;
  --color-pandora-s-box-100: #ffdfbb;
  --color-pandora-s-box-200: #e6ceb3;
  --color-pandora-s-box-300: #d3b89a;
  --color-pandora-s-box-400: #b69978;
  --color-pandora-s-box-500: #9b7e5d;
  --color-pandora-s-box-600: #816545;
  --color-pandora-s-box-700: #695033;
  --color-pandora-s-box-800: #533e24;
  --color-pandora-s-box-900: #412f19;
  --color-pandora-s-box-950: #291c0d;
  --color-greasy-greens: #00754e;
  --color-greasy-greens-50: #dcffec;
  --color-greasy-greens-100: #c1f8db;
  --color-greasy-greens-200: #a2e6c3;
  --color-greasy-greens-300: #81cfa8;
  --color-greasy-greens-400: #56af86;
  --color-greasy-greens-500: #329269;
  --color-greasy-greens-600: #00754e;
  --color-greasy-greens-700: #005d3d;
  --color-greasy-greens-800: #00492f;
  --color-greasy-greens-900: #003924;
  --color-greasy-greens-950: #002415;
  --color-loudicious-pink: #d747c6;
  --color-loudicious-pink-50: #fff2fc;
  --color-loudicious-pink-100: #ffe4f9;
  --color-loudicious-pink-200: #ffc6f4;
  --color-loudicious-pink-300: #ff9fef;
  --color-loudicious-pink-400: #f26adf;
  --color-loudicious-pink-500: #d747c6;
  --color-loudicious-pink-600: #b623a7;
  --color-loudicious-pink-700: #96008a;
  --color-loudicious-pink-800: #76006c;
  --color-loudicious-pink-900: #5c0054;
  --color-loudicious-pink-950: #3b0036;
}