Icy Plains to Graphite Color Palette

About this palette

Icy Plains to Graphite is a 5-color warm, earthy, vintage palette: #CCDBFF (Icy Plains), #C2A97D (Gold Rush), #6381A8 (Bay View), #6D5400 (Ayahuasca Vine), #3F3315 (Graphite). It mixes blue, yellow, brown tones and feels warm overall. The strongest text pairing is #CCDBFF on #3F3315 with a contrast ratio of 8.93:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(204, 219, 255)	hsl(222, 100%, 90%)
Gold Rush	rgb(194, 169, 125)	hsl(38, 36%, 63%)
Bay View	rgb(99, 129, 168)	hsl(214, 28%, 52%)
Ayahuasca Vine	rgb(109, 84, 0)	hsl(46, 100%, 21%)
Graphite	rgb(63, 51, 21)	hsl(43, 50%, 16%)

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.93:1 Very good#CCDBFF on #3F3315
Aa8.93:1 Very good#3F3315 on #CCDBFF
Aa5.46:1 Good#C2A97D on #3F3315
Aa5.46:1 Good#3F3315 on #C2A97D
Aa5.19:1 Good#CCDBFF on #6D5400
Aa5.19:1 Good#6D5400 on #CCDBFF
Aa3.17:1 Poor#C2A97D on #6D5400
Aa3.17:1 Poor#6D5400 on #C2A97D

Color blindness preview

CSS variables

/* Icy Plains to Graphite — https://swatchly.xyz/palette/ccdbff-c2a97d-6381a8-6d5400-3f3315 */
:root {
  --icy-plains: #ccdbff;
  --gold-rush: #c2a97d;
  --bay-view: #6381a8;
  --ayahuasca-vine: #6d5400;
  --graphite: #3f3315;
}

Tailwind CSS v4

/* Icy Plains to Graphite — https://swatchly.xyz/palette/ccdbff-c2a97d-6381a8-6d5400-3f3315 */
@theme {
  --color-icy-plains: #ccdbff;
  --color-icy-plains-50: #f4f8ff;
  --color-icy-plains-100: #e7eeff;
  --color-icy-plains-200: #ccdbff;
  --color-icy-plains-300: #b7c4e1;
  --color-icy-plains-400: #96a4c4;
  --color-icy-plains-500: #7a87a8;
  --color-icy-plains-600: #606c8b;
  --color-icy-plains-700: #4a5571;
  --color-icy-plains-800: #38425a;
  --color-icy-plains-900: #2a3247;
  --color-icy-plains-950: #191f2e;
  --color-gold-rush: #c2a97d;
  --color-gold-rush-50: #fff8ed;
  --color-gold-rush-100: #feefd5;
  --color-gold-rush-200: #efddbe;
  --color-gold-rush-300: #dcc8a4;
  --color-gold-rush-400: #c2a97d;
  --color-gold-rush-500: #a48b61;
  --color-gold-rush-600: #866f45;
  --color-gold-rush-700: #6c5730;
  --color-gold-rush-800: #554220;
  --color-gold-rush-900: #413214;
  --color-gold-rush-950: #281d08;
  --color-bay-view: #6381a8;
  --color-bay-view-50: #edf5ff;
  --color-bay-view-100: #daeaff;
  --color-bay-view-200: #bdd6f7;
  --color-bay-view-300: #a2bee3;
  --color-bay-view-400: #7f9ec5;
  --color-bay-view-500: #6381a8;
  --color-bay-view-600: #4c688c;
  --color-bay-view-700: #395273;
  --color-bay-view-800: #2a405d;
  --color-bay-view-900: #1f324a;
  --color-bay-view-950: #111f30;
  --color-ayahuasca-vine: #6d5400;
  --color-ayahuasca-vine-50: #fff4da;
  --color-ayahuasca-vine-100: #fbeac0;
  --color-ayahuasca-vine-200: #ebd6a4;
  --color-ayahuasca-vine-300: #d7c086;
  --color-ayahuasca-vine-400: #baa05f;
  --color-ayahuasca-vine-500: #9f8540;
  --color-ayahuasca-vine-600: #846b25;
  --color-ayahuasca-vine-700: #6d5400;
  --color-ayahuasca-vine-800: #564100;
  --color-ayahuasca-vine-900: #423200;
  --color-ayahuasca-vine-950: #2a1f00;
  --color-graphite: #3f3315;
  --color-graphite-50: #fdf5e1;
  --color-graphite-100: #f4ead5;
  --color-graphite-200: #e1d7bd;
  --color-graphite-300: #ccc0a3;
  --color-graphite-400: #aea181;
  --color-graphite-500: #938666;
  --color-graphite-600: #786b4d;
  --color-graphite-700: #615539;
  --color-graphite-800: #4d432a;
  --color-graphite-900: #3f3315;
  --color-graphite-950: #262010;
}