Pastel Purple to Snowy Summit Color Palette

About this palette

Pastel Purple to Snowy Summit is a 5-color muted, warm, earthy, vintage palette: #B39CAF (Pastel Purple), #2D4133 (Everglade), #997F65 (Gazelle), #746047 (Heavy Brown), #C4DAED (Snowy Summit). It mixes pink, green, orange, brown, blue tones and feels warm overall. The strongest text pairing is #2D4133 on #C4DAED with a contrast ratio of 7.62:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Purple	rgb(179, 156, 175)	hsl(310, 13%, 66%)
Everglade	rgb(45, 65, 51)	hsl(138, 18%, 22%)
Gazelle	rgb(153, 127, 101)	hsl(30, 20%, 50%)
Heavy Brown	rgb(116, 96, 71)	hsl(33, 24%, 37%)
Snowy Summit	rgb(196, 218, 237)	hsl(208, 53%, 85%)

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.62:1 Very good#2D4133 on #C4DAED
Aa7.62:1 Very good#C4DAED on #2D4133
Aa4.33:1 Poor#B39CAF on #2D4133
Aa4.33:1 Poor#2D4133 on #B39CAF
Aa4.16:1 Poor#746047 on #C4DAED
Aa4.16:1 Poor#C4DAED on #746047

Color blindness preview

CSS variables

/* Pastel Purple to Snowy Summit — https://swatchly.xyz/palette/b39caf-2d4133-997f65-746047-c4daed */
:root {
  --pastel-purple: #b39caf;
  --everglade: #2d4133;
  --gazelle: #997f65;
  --heavy-brown: #746047;
  --snowy-summit: #c4daed;
}

Tailwind CSS v4

/* Pastel Purple to Snowy Summit — https://swatchly.xyz/palette/b39caf-2d4133-997f65-746047-c4daed */
@theme {
  --color-pastel-purple: #b39caf;
  --color-pastel-purple-50: #fff1fc;
  --color-pastel-purple-100: #f6e7f4;
  --color-pastel-purple-200: #e5d3e2;
  --color-pastel-purple-300: #d0bccd;
  --color-pastel-purple-400: #b39caf;
  --color-pastel-purple-500: #978093;
  --color-pastel-purple-600: #7b6677;
  --color-pastel-purple-700: #63505f;
  --color-pastel-purple-800: #4e3d4b;
  --color-pastel-purple-900: #3c2e3a;
  --color-pastel-purple-950: #251c24;
  --color-everglade: #2d4133;
  --color-everglade-50: #ecf9ef;
  --color-everglade-100: #e1f0e5;
  --color-everglade-200: #cbddd0;
  --color-everglade-300: #b1c6b7;
  --color-everglade-400: #8fa595;
  --color-everglade-500: #738979;
  --color-everglade-600: #586d5e;
  --color-everglade-700: #425547;
  --color-everglade-800: #2d4133;
  --color-everglade-900: #243128;
  --color-everglade-950: #141e17;
  --color-gazelle: #997f65;
  --color-gazelle-50: #fff2e6;
  --color-gazelle-100: #f9e7d5;
  --color-gazelle-200: #e8d2be;
  --color-gazelle-300: #d3bba3;
  --color-gazelle-400: #b59b81;
  --color-gazelle-500: #997f65;
  --color-gazelle-600: #7e654c;
  --color-gazelle-700: #664f39;
  --color-gazelle-800: #513d2a;
  --color-gazelle-900: #3f2f1e;
  --color-gazelle-950: #281c10;
  --color-heavy-brown: #746047;
  --color-heavy-brown-50: #fff3e5;
  --color-heavy-brown-100: #f6e7d5;
  --color-heavy-brown-200: #e3d1bc;
  --color-heavy-brown-300: #cdb9a1;
  --color-heavy-brown-400: #ad987e;
  --color-heavy-brown-500: #907b62;
  --color-heavy-brown-600: #746047;
  --color-heavy-brown-700: #5d4c36;
  --color-heavy-brown-800: #493b28;
  --color-heavy-brown-900: #392d1d;
  --color-heavy-brown-950: #241b10;
  --color-snowy-summit: #c4daed;
  --color-snowy-summit-50: #ecf6ff;
  --color-snowy-summit-100: #dfedf9;
  --color-snowy-summit-200: #c4daed;
  --color-snowy-summit-300: #b1c3d3;
  --color-snowy-summit-400: #90a4b5;
  --color-snowy-summit-500: #74899a;
  --color-snowy-summit-600: #5b6e7f;
  --color-snowy-summit-700: #465766;
  --color-snowy-summit-800: #354451;
  --color-snowy-summit-900: #28343f;
  --color-snowy-summit-950: #172028;
}