Secret Path to Snowy Summit Color Palette

About this palette

Secret Path to Snowy Summit is a 5-color muted palette: #6F6E59 (Secret Path), #1C232B (Dark), #B49FB7 (Pastel Purple), #413E31 (Black Olive), #C9DAED (Snowy Summit). It mixes gray, pink tones and feels cool overall. The strongest text pairing is #1C232B on #C9DAED with a contrast ratio of 11.12:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Path	rgb(111, 110, 89)	hsl(57, 11%, 39%)
Dark	rgb(28, 35, 43)	hsl(212, 21%, 14%)
Pastel Purple	rgb(180, 159, 183)	hsl(292, 14%, 67%)
Black Olive	rgb(65, 62, 49)	hsl(49, 14%, 22%)
Snowy Summit	rgb(201, 218, 237)	hsl(212, 50%, 86%)

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.

Aa11.12:1 Very good#1C232B on #C9DAED
Aa11.12:1 Very good#C9DAED on #1C232B
Aa7.52:1 Very good#413E31 on #C9DAED
Aa7.52:1 Very good#C9DAED on #413E31
Aa6.48:1 Good#1C232B on #B49FB7
Aa6.48:1 Good#B49FB7 on #1C232B
Aa4.38:1 Poor#B49FB7 on #413E31
Aa4.38:1 Poor#413E31 on #B49FB7

Color blindness preview

CSS variables

/* Secret Path to Snowy Summit — https://swatchly.xyz/palette/6f6e59-1c232b-b49fb7-413e31-c9daed */
:root {
  --secret-path: #6f6e59;
  --dark: #1c232b;
  --pastel-purple: #b49fb7;
  --black-olive: #413e31;
  --snowy-summit: #c9daed;
}

Tailwind CSS v4

/* Secret Path to Snowy Summit — https://swatchly.xyz/palette/6f6e59-1c232b-b49fb7-413e31-c9daed */
@theme {
  --color-secret-path: #6f6e59;
  --color-secret-path-50: #f6f6e9;
  --color-secret-path-100: #edecde;
  --color-secret-path-200: #dad9c8;
  --color-secret-path-300: #c3c3af;
  --color-secret-path-400: #a4a48e;
  --color-secret-path-500: #898873;
  --color-secret-path-600: #6f6e59;
  --color-secret-path-700: #585744;
  --color-secret-path-800: #454434;
  --color-secret-path-900: #353426;
  --color-secret-path-950: #212016;
  --color-dark: #1c232b;
  --color-dark-50: #f0f6fc;
  --color-dark-100: #e6ecf3;
  --color-dark-200: #d1d8e0;
  --color-dark-300: #bac2cb;
  --color-dark-400: #9aa2ac;
  --color-dark-500: #7f8892;
  --color-dark-600: #666e77;
  --color-dark-700: #505861;
  --color-dark-800: #3f454d;
  --color-dark-900: #31363d;
  --color-dark-950: #1c232b;
  --color-pastel-purple: #b49fb7;
  --color-pastel-purple-50: #fef3ff;
  --color-pastel-purple-100: #f6e9f8;
  --color-pastel-purple-200: #e5d5e7;
  --color-pastel-purple-300: #d1bfd3;
  --color-pastel-purple-400: #b49fb7;
  --color-pastel-purple-500: #97839a;
  --color-pastel-purple-600: #7b687e;
  --color-pastel-purple-700: #625165;
  --color-pastel-purple-800: #4d3e4f;
  --color-pastel-purple-900: #3b2e3d;
  --color-pastel-purple-950: #251c26;
  --color-black-olive: #413e31;
  --color-black-olive-50: #f7f5ec;
  --color-black-olive-100: #eeebe1;
  --color-black-olive-200: #dad8cc;
  --color-black-olive-300: #c3c0b3;
  --color-black-olive-400: #a3a091;
  --color-black-olive-500: #878475;
  --color-black-olive-600: #6c695b;
  --color-black-olive-700: #545245;
  --color-black-olive-800: #413e31;
  --color-black-olive-900: #312f26;
  --color-black-olive-950: #1e1d16;
  --color-snowy-summit: #c9daed;
  --color-snowy-summit-50: #eff6ff;
  --color-snowy-summit-100: #e2edf9;
  --color-snowy-summit-200: #c9daed;
  --color-snowy-summit-300: #b5c3d3;
  --color-snowy-summit-400: #94a4b5;
  --color-snowy-summit-500: #79889a;
  --color-snowy-summit-600: #5f6e7e;
  --color-snowy-summit-700: #495766;
  --color-snowy-summit-800: #384451;
  --color-snowy-summit-900: #2a343f;
  --color-snowy-summit-950: #192028;
}