Foggy Love to Meteorite color palette

D7CAEBFoggy Love 94C294Irish Spring B57286Pinky Pickle 468F4ALush Grass 834355Liaison 443568Meteorite

Open in generator Export PNG, PDF, ASE…

About this palette

Foggy Love to Meteorite is a 6-color cool palette: #D7CAEB (Foggy Love), #94C294 (Irish Spring), #B57286 (Pinky Pickle), #468F4A (Lush Grass), #834355 (Liaison), #443568 (Meteorite). It mixes purple, green, pink, red tones and feels cool overall. The strongest text pairing is #D7CAEB on #443568 with a contrast ratio of 6.92:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foggy Love	rgb(215, 202, 235)	hsl(264, 45%, 86%)
Irish Spring	rgb(148, 194, 148)	hsl(120, 27%, 67%)
Pinky Pickle	rgb(181, 114, 134)	hsl(342, 31%, 58%)
Lush Grass	rgb(70, 143, 74)	hsl(123, 34%, 42%)
Liaison	rgb(131, 67, 85)	hsl(343, 32%, 39%)
Meteorite	rgb(68, 53, 104)	hsl(258, 32%, 31%)

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.

Aa6.92:1 Good#D7CAEB on #443568
Aa6.92:1 Good#443568 on #D7CAEB
Aa5.32:1 Good#94C294 on #443568
Aa5.32:1 Good#443568 on #94C294
Aa4.67:1 Good#D7CAEB on #834355
Aa4.67:1 Good#834355 on #D7CAEB
Aa3.59:1 Poor#94C294 on #834355
Aa3.59:1 Poor#834355 on #94C294

Color blindness preview

CSS variables

/* Foggy Love to Meteorite — https://swatchly.xyz/palette/d7caeb-94c294-b57286-468f4a-834355-443568 */
:root {
  --foggy-love: #d7caeb;
  --irish-spring: #94c294;
  --pinky-pickle: #b57286;
  --lush-grass: #468f4a;
  --liaison: #834355;
  --meteorite: #443568;
}

Tailwind CSS v4

/* Foggy Love to Meteorite — https://swatchly.xyz/palette/d7caeb-94c294-b57286-468f4a-834355-443568 */
@theme {
  --color-foggy-love: #d7caeb;
  --color-foggy-love-50: #f4edff;
  --color-foggy-love-100: #eae1f7;
  --color-foggy-love-200: #d7caeb;
  --color-foggy-love-300: #c1b6d2;
  --color-foggy-love-400: #a397b5;
  --color-foggy-love-500: #897d9b;
  --color-foggy-love-600: #6f6480;
  --color-foggy-love-700: #594f68;
  --color-foggy-love-800: #473d54;
  --color-foggy-love-900: #362f42;
  --color-foggy-love-950: #221c2a;
  --color-irish-spring: #94c294;
  --color-irish-spring-50: #dbf8db;
  --color-irish-spring-100: #cdeccc;
  --color-irish-spring-200: #b3d8b3;
  --color-irish-spring-300: #94c294;
  --color-irish-spring-400: #78a478;
  --color-irish-spring-500: #5f8b60;
  --color-irish-spring-600: #487249;
  --color-irish-spring-700: #365c37;
  --color-irish-spring-800: #284a29;
  --color-irish-spring-900: #1e3b1f;
  --color-irish-spring-950: #102511;
  --color-pinky-pickle: #b57286;
  --color-pinky-pickle-50: #fff2f5;
  --color-pinky-pickle-100: #ffe4eb;
  --color-pinky-pickle-200: #fec8d7;
  --color-pinky-pickle-300: #ecafc0;
  --color-pinky-pickle-400: #d08ea1;
  --color-pinky-pickle-500: #b57286;
  --color-pinky-pickle-600: #97586b;
  --color-pinky-pickle-700: #7c4254;
  --color-pinky-pickle-800: #633141;
  --color-pinky-pickle-900: #4e2432;
  --color-pinky-pickle-950: #33141e;
  --color-lush-grass: #468f4a;
  --color-lush-grass-50: #daffda;
  --color-lush-grass-100: #c7f6c6;
  --color-lush-grass-200: #aae3ab;
  --color-lush-grass-300: #8ccd8d;
  --color-lush-grass-400: #65ac67;
  --color-lush-grass-500: #468f4a;
  --color-lush-grass-600: #2e7534;
  --color-lush-grass-700: #1c5e23;
  --color-lush-grass-800: #0f4b16;
  --color-lush-grass-900: #073b0e;
  --color-lush-grass-950: #022606;
  --color-liaison: #834355;
  --color-liaison-50: #fff1f4;
  --color-liaison-100: #ffe3e9;
  --color-liaison-200: #ffc7d4;
  --color-liaison-300: #eeafbe;
  --color-liaison-400: #d28e9f;
  --color-liaison-500: #b77284;
  --color-liaison-600: #9b596b;
  --color-liaison-700: #834355;
  --color-liaison-800: #683342;
  --color-liaison-900: #522532;
  --color-liaison-950: #36151f;
  --color-meteorite: #443568;
  --color-meteorite-50: #f6f3ff;
  --color-meteorite-100: #ece7ff;
  --color-meteorite-200: #dad0fe;
  --color-meteorite-300: #c4b7ec;
  --color-meteorite-400: #a496cf;
  --color-meteorite-500: #897ab3;
  --color-meteorite-600: #6e6096;
  --color-meteorite-700: #574a7a;
  --color-meteorite-800: #443568;
  --color-meteorite-900: #342a4d;
  --color-meteorite-950: #201932;
}