Start generating

Deep Pond to Kissed by Mist color palette

124218Deep PondCC8BB8La la Love89C295Neptune Green985890Bermuda Onion3B6044Herbes de ProvenceFFD2F4Kissed by Mist
Open in generator Export PNG, PDF, ASE…

About this palette

Deep Pond to Kissed by Mist is a 6-color vintage palette: #124218 (Deep Pond), #CC8BB8 (La la Love), #89C295 (Neptune Green), #985890 (Bermuda Onion), #3B6044 (Herbes de Provence), #FFD2F4 (Kissed by Mist). It mixes green, pink tones and feels balanced overall. The strongest text pairing is #124218 on #FFD2F4 with a contrast ratio of 8.68:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Deep Pondrgb(18, 66, 24)hsl(128, 57%, 16%)
La la Lovergb(204, 139, 184)hsl(318, 39%, 67%)
Neptune Greenrgb(137, 194, 149)hsl(133, 32%, 65%)
Bermuda Onionrgb(152, 88, 144)hsl(308, 27%, 47%)
Herbes de Provencergb(59, 96, 68)hsl(135, 24%, 30%)
Kissed by Mistrgb(255, 210, 244)hsl(315, 100%, 91%)

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.

  • Aa8.68:1 Very good#124218 on #FFD2F4
  • Aa8.68:1 Very good#FFD2F4 on #124218
  • Aa5.62:1 Good#124218 on #89C295
  • Aa5.62:1 Good#89C295 on #124218
  • Aa5.36:1 Good#3B6044 on #FFD2F4
  • Aa5.36:1 Good#FFD2F4 on #3B6044
  • Aa4.37:1 Poor#124218 on #CC8BB8
  • Aa4.37:1 Poor#CC8BB8 on #124218

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Deep Pond to Kissed by Mist — https://swatchly.xyz/palette/124218-cc8bb8-89c295-985890-3b6044-ffd2f4 */
:root {
  --deep-pond: #124218;
  --la-la-love: #cc8bb8;
  --neptune-green: #89c295;
  --bermuda-onion: #985890;
  --herbes-de-provence: #3b6044;
  --kissed-by-mist: #ffd2f4;
}

Tailwind CSS v4

/* Deep Pond to Kissed by Mist — https://swatchly.xyz/palette/124218-cc8bb8-89c295-985890-3b6044-ffd2f4 */
@theme {
  --color-deep-pond: #124218;
  --color-deep-pond-50: #e2fee2;
  --color-deep-pond-100: #d6f5d6;
  --color-deep-pond-200: #bee3be;
  --color-deep-pond-300: #a3cea4;
  --color-deep-pond-400: #81b183;
  --color-deep-pond-500: #659667;
  --color-deep-pond-600: #4c7b4f;
  --color-deep-pond-700: #39643b;
  --color-deep-pond-800: #2a502c;
  --color-deep-pond-900: #124218;
  --color-deep-pond-950: #102912;
  --color-la-la-love: #cc8bb8;
  --color-la-la-love-50: #fff1fa;
  --color-la-la-love-100: #ffe2f5;
  --color-la-la-love-200: #fac7e9;
  --color-la-la-love-300: #e7aed5;
  --color-la-la-love-400: #cc8bb8;
  --color-la-la-love-500: #ae709c;
  --color-la-la-love-600: #915680;
  --color-la-la-love-700: #764167;
  --color-la-la-love-800: #5f3052;
  --color-la-la-love-900: #4a233f;
  --color-la-la-love-950: #301328;
  --color-neptune-green: #89c295;
  --color-neptune-green-50: #d5f8db;
  --color-neptune-green-100: #c5edcc;
  --color-neptune-green-200: #aad8b3;
  --color-neptune-green-300: #89c295;
  --color-neptune-green-400: #6ea57a;
  --color-neptune-green-500: #548c61;
  --color-neptune-green-600: #3e734b;
  --color-neptune-green-700: #2d5d39;
  --color-neptune-green-800: #204b2b;
  --color-neptune-green-900: #163c21;
  --color-neptune-green-950: #0a2612;
  --color-bermuda-onion: #985890;
  --color-bermuda-onion-50: #fff0fc;
  --color-bermuda-onion-100: #ffe2fa;
  --color-bermuda-onion-200: #fbc7f3;
  --color-bermuda-onion-300: #e9aee0;
  --color-bermuda-onion-400: #ce8dc5;
  --color-bermuda-onion-500: #b372ab;
  --color-bermuda-onion-600: #985890;
  --color-bermuda-onion-700: #7c4275;
  --color-bermuda-onion-800: #64305e;
  --color-bermuda-onion-900: #4e2349;
  --color-bermuda-onion-950: #33132f;
  --color-herbes-de-provence: #3b6044;
  --color-herbes-de-provence-50: #e5fcea;
  --color-herbes-de-provence-100: #d9f3de;
  --color-herbes-de-provence-200: #c3e1c8;
  --color-herbes-de-provence-300: #a9ccb0;
  --color-herbes-de-provence-400: #87ad8f;
  --color-herbes-de-provence-500: #6b9274;
  --color-herbes-de-provence-600: #52775a;
  --color-herbes-de-provence-700: #3b6044;
  --color-herbes-de-provence-800: #2d4b34;
  --color-herbes-de-provence-900: #213a27;
  --color-herbes-de-provence-950: #122417;
  --color-kissed-by-mist: #ffd2f4;
  --color-kissed-by-mist-50: #ffe4f8;
  --color-kissed-by-mist-100: #ffd2f4;
  --color-kissed-by-mist-200: #e6c4de;
  --color-kissed-by-mist-300: #d4adca;
  --color-kissed-by-mist-400: #b78ead;
  --color-kissed-by-mist-500: #9d7494;
  --color-kissed-by-mist-600: #825c7a;
  --color-kissed-by-mist-700: #6b4863;
  --color-kissed-by-mist-800: #55374e;
  --color-kissed-by-mist-900: #42293d;
  --color-kissed-by-mist-950: #2a1826;
}

Similar palettes