Powder Blush to Wasteland color palette

About this palette

Powder Blush to Wasteland is a 5-color cool, vintage palette: #DA9181 (Powder Blush), #2A6F7E (Ocean’s Embrace), #353D58 (Pi), #AAE3E9 (Blizzard Blue), #9E8857 (Wasteland). It mixes red, turquoise, blue, yellow tones and feels cool overall. The strongest text pairing is #353D58 on #AAE3E9 with a contrast ratio of 7.59:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Powder Blushrgb(218, 145, 129)hsl(11, 55%, 68%)
Ocean’s Embracergb(42, 111, 126)hsl(191, 50%, 33%)
Pirgb(53, 61, 88)hsl(226, 25%, 28%)
Blizzard Bluergb(170, 227, 233)hsl(186, 59%, 79%)
Wastelandrgb(158, 136, 87)hsl(41, 29%, 48%)

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.

  • Aa7.59:1 Very good#353D58 on #AAE3E9
  • Aa7.59:1 Very good#AAE3E9 on #353D58
  • Aa4.26:1 Poor#DA9181 on #353D58
  • Aa4.26:1 Poor#353D58 on #DA9181
  • Aa4.05:1 Poor#2A6F7E on #AAE3E9
  • Aa4.05:1 Poor#AAE3E9 on #2A6F7E
  • Aa3.12:1 Poor#353D58 on #9E8857
  • Aa3.12:1 Poor#9E8857 on #353D58

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Powder Blush to Wasteland — https://swatchly.xyz/palette/da9181-2a6f7e-353d58-aae3e9-9e8857 */
:root {
  --powder-blush: #da9181;
  --ocean-s-embrace: #2a6f7e;
  --pi: #353d58;
  --blizzard-blue: #aae3e9;
  --wasteland: #9e8857;
}

Tailwind CSS v4

/* Powder Blush to Wasteland — https://swatchly.xyz/palette/da9181-2a6f7e-353d58-aae3e9-9e8857 */
@theme {
  --color-powder-blush: #da9181;
  --color-powder-blush-50: #fff4f2;
  --color-powder-blush-100: #ffe8e3;
  --color-powder-blush-200: #ffcec3;
  --color-powder-blush-300: #f3b3a5;
  --color-powder-blush-400: #da9181;
  --color-powder-blush-500: #bb7566;
  --color-powder-blush-600: #9d5a4c;
  --color-powder-blush-700: #804437;
  --color-powder-blush-800: #673227;
  --color-powder-blush-900: #51251c;
  --color-powder-blush-950: #34150e;
  --color-ocean-s-embrace: #2a6f7e;
  --color-ocean-s-embrace-50: #e4faff;
  --color-ocean-s-embrace-100: #c9f2fd;
  --color-ocean-s-embrace-200: #addfeb;
  --color-ocean-s-embrace-300: #8ec8d6;
  --color-ocean-s-embrace-400: #67a8b7;
  --color-ocean-s-embrace-500: #488b9b;
  --color-ocean-s-embrace-600: #2a6f7e;
  --color-ocean-s-embrace-700: #1a5866;
  --color-ocean-s-embrace-800: #0c4651;
  --color-ocean-s-embrace-900: #043640;
  --color-ocean-s-embrace-950: #012229;
  --color-pi: #353d58;
  --color-pi-50: #f1f5ff;
  --color-pi-100: #e4ebff;
  --color-pi-200: #cfd7f0;
  --color-pi-300: #b6bfdc;
  --color-pi-400: #959fbe;
  --color-pi-500: #7983a1;
  --color-pi-600: #5f6885;
  --color-pi-700: #49516a;
  --color-pi-800: #353d58;
  --color-pi-900: #292f41;
  --color-pi-950: #181c29;
  --color-blizzard-blue: #aae3e9;
  --color-blizzard-blue-50: #ddfcff;
  --color-blizzard-blue-100: #d0f3f6;
  --color-blizzard-blue-200: #aae3e9;
  --color-blizzard-blue-300: #9bcbd0;
  --color-blizzard-blue-400: #77acb2;
  --color-blizzard-blue-500: #5a9196;
  --color-blizzard-blue-600: #40767b;
  --color-blizzard-blue-700: #2c5e63;
  --color-blizzard-blue-800: #1d4a4e;
  --color-blizzard-blue-900: #13393d;
  --color-blizzard-blue-950: #082427;
  --color-wasteland: #9e8857;
  --color-wasteland-50: #fff5e0;
  --color-wasteland-100: #faeccd;
  --color-wasteland-200: #e9d8b3;
  --color-wasteland-300: #d5c298;
  --color-wasteland-400: #b8a374;
  --color-wasteland-500: #9e8857;
  --color-wasteland-600: #826d3d;
  --color-wasteland-700: #695529;
  --color-wasteland-800: #53421a;
  --color-wasteland-900: #40320f;
  --color-wasteland-950: #291e06;
}

Similar palettes