Loudicious Pink to Envy’s Love color palette

CD40B8Loudicious Pink 00869BCruising 66FECDA State of Mint 003D45Rich Black 873304Kobe 00D98CEnvy’s Love

Open in generator Export PNG, PDF, ASE…

About this palette

Loudicious Pink to Envy’s Love is a 6-color cool palette: #CD40B8 (Loudicious Pink), #00869B (Cruising), #66FECD (A State of Mint), #003D45 (Rich Black), #873304 (Kobe), #00D98C (Envy’s Love). It mixes pink, turquoise, brown, green tones and feels cool overall. The strongest text pairing is #66FECD on #003D45 with a contrast ratio of 9.48:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Loudicious Pink	rgb(205, 64, 184)	hsl(309, 59%, 53%)
Cruising	rgb(0, 134, 155)	hsl(188, 100%, 30%)
A State of Mint	rgb(102, 254, 205)	hsl(161, 99%, 70%)
Rich Black	rgb(0, 61, 69)	hsl(187, 100%, 14%)
Kobe	rgb(135, 51, 4)	hsl(22, 94%, 27%)
Envy’s Love	rgb(0, 217, 140)	hsl(159, 100%, 43%)

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.48:1 Very good#66FECD on #003D45
Aa9.48:1 Very good#003D45 on #66FECD
Aa6.63:1 Good#66FECD on #873304
Aa6.63:1 Good#873304 on #66FECD
Aa6.45:1 Good#003D45 on #00D98C
Aa6.45:1 Good#00D98C on #003D45
Aa4.51:1 Good#873304 on #00D98C
Aa4.51:1 Good#00D98C on #873304

Color blindness preview

CSS variables

/* Loudicious Pink to Envy’s Love — https://swatchly.xyz/palette/cd40b8-00869b-66fecd-003d45-873304-00d98c */
:root {
  --loudicious-pink: #cd40b8;
  --cruising: #00869b;
  --a-state-of-mint: #66fecd;
  --rich-black: #003d45;
  --kobe: #873304;
  --envy-s-love: #00d98c;
}

Tailwind CSS v4

/* Loudicious Pink to Envy’s Love — https://swatchly.xyz/palette/cd40b8-00869b-66fecd-003d45-873304-00d98c */
@theme {
  --color-loudicious-pink: #cd40b8;
  --color-loudicious-pink-50: #ffeffb;
  --color-loudicious-pink-100: #ffe0f7;
  --color-loudicious-pink-200: #ffbff1;
  --color-loudicious-pink-300: #ff94ea;
  --color-loudicious-pink-400: #ea63d4;
  --color-loudicious-pink-500: #cd40b8;
  --color-loudicious-pink-600: #ad1f9b;
  --color-loudicious-pink-700: #8f007f;
  --color-loudicious-pink-800: #710064;
  --color-loudicious-pink-900: #59004f;
  --color-loudicious-pink-950: #3a0033;
  --color-cruising: #00869b;
  --color-cruising-50: #e4faff;
  --color-cruising-100: #cef6ff;
  --color-cruising-200: #a4e9f9;
  --color-cruising-300: #85d6e8;
  --color-cruising-400: #5ab9ce;
  --color-cruising-500: #35a0b5;
  --color-cruising-600: #00869b;
  --color-cruising-700: #006a7c;
  --color-cruising-800: #005361;
  --color-cruising-900: #00404b;
  --color-cruising-950: #00282f;
  --color-a-state-of-mint: #66fecd;
  --color-a-state-of-mint-50: #edfff7;
  --color-a-state-of-mint-100: #cbffea;
  --color-a-state-of-mint-200: #66fecd;
  --color-a-state-of-mint-300: #6be0b8;
  --color-a-state-of-mint-400: #21c296;
  --color-a-state-of-mint-500: #00a17b;
  --color-a-state-of-mint-600: #008262;
  --color-a-state-of-mint-700: #00664d;
  --color-a-state-of-mint-800: #004f3b;
  --color-a-state-of-mint-900: #003d2d;
  --color-a-state-of-mint-950: #00261b;
  --color-rich-black: #003d45;
  --color-rich-black-50: #e1fbff;
  --color-rich-black-100: #d1f2f8;
  --color-rich-black-200: #b8e0e7;
  --color-rich-black-300: #9dcad2;
  --color-rich-black-400: #7aacb4;
  --color-rich-black-500: #5d919a;
  --color-rich-black-600: #44767f;
  --color-rich-black-700: #305f67;
  --color-rich-black-800: #214c52;
  --color-rich-black-900: #003d45;
  --color-rich-black-950: #0a262a;
  --color-kobe: #873304;
  --color-kobe-50: #fff2ed;
  --color-kobe-100: #ffe5da;
  --color-kobe-200: #ffc9b3;
  --color-kobe-300: #fba886;
  --color-kobe-400: #de855f;
  --color-kobe-500: #c06741;
  --color-kobe-600: #a14c27;
  --color-kobe-700: #873304;
  --color-kobe-800: #6a2806;
  --color-kobe-900: #541c01;
  --color-kobe-950: #370f00;
  --color-envy-s-love: #00d98c;
  --color-envy-s-love-50: #caffe0;
  --color-envy-s-love-100: #9cfdc8;
  --color-envy-s-love-200: #73ebad;
  --color-envy-s-love-300: #00d98c;
  --color-envy-s-love-400: #00b675;
  --color-envy-s-love-500: #009861;
  --color-envy-s-love-600: #007b4e;
  --color-envy-s-love-700: #00633d;
  --color-envy-s-love-800: #004e30;
  --color-envy-s-love-900: #003e24;
  --color-envy-s-love-950: #002715;
}