Start generating

Plein Air to Infinity color palette

BDC7DBPlein AirB7A4B2Foggy Plum87798AMuted Berry65714CHerbal Whispers4C4B33Olive Leaf202936Infinity
Open in generator Export PNG, PDF, ASE…

About this palette

Plein Air to Infinity is a 6-color muted, gradient palette: #BDC7DB (Plein Air), #B7A4B2 (Foggy Plum), #87798A (Muted Berry), #65714C (Herbal Whispers), #4C4B33 (Olive Leaf), #202936 (Infinity). It mixes gray, green, brown tones and feels balanced overall. The strongest text pairing is #BDC7DB on #202936 with a contrast ratio of 8.63:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Plein Airrgb(189, 199, 219)hsl(220, 29%, 80%)
Foggy Plumrgb(183, 164, 178)hsl(316, 12%, 68%)
Muted Berryrgb(135, 121, 138)hsl(289, 7%, 51%)
Herbal Whispersrgb(101, 113, 76)hsl(79, 20%, 37%)
Olive Leafrgb(76, 75, 51)hsl(58, 20%, 25%)
Infinityrgb(32, 41, 54)hsl(215, 26%, 17%)

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.63:1 Very good#BDC7DB on #202936
  • Aa8.63:1 Very good#202936 on #BDC7DB
  • Aa6.26:1 Good#B7A4B2 on #202936
  • Aa6.26:1 Good#202936 on #B7A4B2
  • Aa5.23:1 Good#BDC7DB on #4C4B33
  • Aa5.23:1 Good#4C4B33 on #BDC7DB
  • Aa3.80:1 Poor#B7A4B2 on #4C4B33
  • Aa3.80:1 Poor#4C4B33 on #B7A4B2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Plein Air to Infinity — https://swatchly.xyz/palette/bdc7db-b7a4b2-87798a-65714c-4c4b33-202936 */
:root {
  --plein-air: #bdc7db;
  --foggy-plum: #b7a4b2;
  --muted-berry: #87798a;
  --herbal-whispers: #65714c;
  --olive-leaf: #4c4b33;
  --infinity: #202936;
}

Tailwind CSS v4

/* Plein Air to Infinity — https://swatchly.xyz/palette/bdc7db-b7a4b2-87798a-65714c-4c4b33-202936 */
@theme {
  --color-plein-air: #bdc7db;
  --color-plein-air-50: #f5f8ff;
  --color-plein-air-100: #e9effc;
  --color-plein-air-200: #d5ddeb;
  --color-plein-air-300: #bdc7db;
  --color-plein-air-400: #9da6b9;
  --color-plein-air-500: #818a9d;
  --color-plein-air-600: #666f80;
  --color-plein-air-700: #4f5767;
  --color-plein-air-800: #3c4351;
  --color-plein-air-900: #2d333f;
  --color-plein-air-950: #1b1f28;
  --color-foggy-plum: #b7a4b2;
  --color-foggy-plum-50: #fff5fc;
  --color-foggy-plum-100: #f8ecf5;
  --color-foggy-plum-200: #e7d9e3;
  --color-foggy-plum-300: #d3c3cf;
  --color-foggy-plum-400: #b7a4b2;
  --color-foggy-plum-500: #998795;
  --color-foggy-plum-600: #7d6b78;
  --color-foggy-plum-700: #64545f;
  --color-foggy-plum-800: #4e404a;
  --color-foggy-plum-900: #3b3039;
  --color-foggy-plum-950: #241c22;
  --color-muted-berry: #87798a;
  --color-muted-berry-50: #f9f0fb;
  --color-muted-berry-100: #eee4f1;
  --color-muted-berry-200: #dacfdd;
  --color-muted-berry-300: #c3b6c6;
  --color-muted-berry-400: #a395a7;
  --color-muted-berry-500: #87798a;
  --color-muted-berry-600: #6e6070;
  --color-muted-berry-700: #584c5a;
  --color-muted-berry-800: #453b47;
  --color-muted-berry-900: #362d38;
  --color-muted-berry-950: #221c23;
  --color-herbal-whispers: #65714c;
  --color-herbal-whispers-50: #f1f9e2;
  --color-herbal-whispers-100: #e6efd6;
  --color-herbal-whispers-200: #d2dcbe;
  --color-herbal-whispers-300: #bac6a4;
  --color-herbal-whispers-400: #9ba782;
  --color-herbal-whispers-500: #7f8c66;
  --color-herbal-whispers-600: #65714c;
  --color-herbal-whispers-700: #4f5a39;
  --color-herbal-whispers-800: #3d4629;
  --color-herbal-whispers-900: #2f361e;
  --color-herbal-whispers-950: #1c2210;
  --color-olive-leaf: #4c4b33;
  --color-olive-leaf-50: #f7f6e7;
  --color-olive-leaf-100: #edecdb;
  --color-olive-leaf-200: #d9d9c4;
  --color-olive-leaf-300: #c5c4ad;
  --color-olive-leaf-400: #a7a68c;
  --color-olive-leaf-500: #8d8c72;
  --color-olive-leaf-600: #737359;
  --color-olive-leaf-700: #5e5d46;
  --color-olive-leaf-800: #4c4b33;
  --color-olive-leaf-900: #3a3a28;
  --color-olive-leaf-950: #252417;
  --color-infinity: #202936;
  --color-infinity-50: #eff6ff;
  --color-infinity-100: #e4ecf7;
  --color-infinity-200: #cfd8e5;
  --color-infinity-300: #b8c2d0;
  --color-infinity-400: #97a2b2;
  --color-infinity-500: #7e8999;
  --color-infinity-600: #667080;
  --color-infinity-700: #525b69;
  --color-infinity-800: #414a56;
  --color-infinity-900: #343c47;
  --color-infinity-950: #202936;
}

Similar palettes