Crystal Lake to Wild West Color Palette

About this palette

Crystal Lake to Wild West is a 4-color muted palette: #92B4C6 (Crystal Lake), #3E3725 (Graphite), #D3E5F4 (New Heights), #795956 (Wild West). It mixes blue, gray, red tones and feels balanced overall. The strongest text pairing is #3E3725 on #D3E5F4 with a contrast ratio of 9.16:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Crystal Lake	rgb(146, 180, 198)	hsl(201, 31%, 67%)
Graphite	rgb(62, 55, 37)	hsl(43, 25%, 19%)
New Heights	rgb(211, 229, 244)	hsl(207, 60%, 89%)
Wild West	rgb(121, 89, 86)	hsl(5, 17%, 41%)

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.

Aa9.16:1 Very good#3E3725 on #D3E5F4
Aa9.16:1 Very good#D3E5F4 on #3E3725
Aa5.38:1 Good#92B4C6 on #3E3725
Aa5.38:1 Good#3E3725 on #92B4C6
Aa4.82:1 Good#D3E5F4 on #795956
Aa4.82:1 Good#795956 on #D3E5F4

Color blindness preview

CSS variables

/* Crystal Lake to Wild West — https://swatchly.xyz/palette/92b4c6-3e3725-d3e5f4-795956 */
:root {
  --crystal-lake: #92b4c6;
  --graphite: #3e3725;
  --new-heights: #d3e5f4;
  --wild-west: #795956;
}

Tailwind CSS v4

/* Crystal Lake to Wild West — https://swatchly.xyz/palette/92b4c6-3e3725-d3e5f4-795956 */
@theme {
  --color-crystal-lake: #92b4c6;
  --color-crystal-lake-50: #f4fbff;
  --color-crystal-lake-100: #e3f5ff;
  --color-crystal-lake-200: #cde5f2;
  --color-crystal-lake-300: #b5d1e0;
  --color-crystal-lake-400: #92b4c6;
  --color-crystal-lake-500: #7596a7;
  --color-crystal-lake-600: #597989;
  --color-crystal-lake-700: #42606f;
  --color-crystal-lake-800: #304a57;
  --color-crystal-lake-900: #223843;
  --color-crystal-lake-950: #122229;
  --color-graphite: #3e3725;
  --color-graphite-50: #faf5e9;
  --color-graphite-100: #f0ebdd;
  --color-graphite-200: #ddd7c7;
  --color-graphite-300: #c8c0ae;
  --color-graphite-400: #aaa28e;
  --color-graphite-500: #8f8773;
  --color-graphite-600: #766e5a;
  --color-graphite-700: #5f5846;
  --color-graphite-800: #4c4636;
  --color-graphite-900: #3e3725;
  --color-graphite-950: #272319;
  --color-new-heights: #d3e5f4;
  --color-new-heights-50: #e4eff8;
  --color-new-heights-100: #d3e5f4;
  --color-new-heights-200: #c4d2de;
  --color-new-heights-300: #aebdca;
  --color-new-heights-400: #8fa0ad;
  --color-new-heights-500: #758693;
  --color-new-heights-600: #5d6d7a;
  --color-new-heights-700: #495763;
  --color-new-heights-800: #38444e;
  --color-new-heights-900: #2a343d;
  --color-new-heights-950: #192026;
  --color-wild-west: #795956;
  --color-wild-west-50: #fff2f0;
  --color-wild-west-100: #fbe3e0;
  --color-wild-west-200: #e9ccc9;
  --color-wild-west-300: #d3b3b0;
  --color-wild-west-400: #b3918e;
  --color-wild-west-500: #967471;
  --color-wild-west-600: #795956;
  --color-wild-west-700: #614643;
  --color-wild-west-800: #4d3633;
  --color-wild-west-900: #3d2927;
  --color-wild-west-950: #271817;
}