Savannah Grass to Frost Fairy color palette

BCBE7BSavannah Grass A8739DDrama Queen 525D9DWizard’s Potion 35381FGraphite C3CCEFFrost Fairy

About this palette

Savannah Grass to Frost Fairy is a 5-color warm, vintage palette: #BCBE7B (Savannah Grass), #A8739D (Drama Queen), #525D9D (Wizard’s Potion), #35381F (Graphite), #C3CCEF (Frost Fairy). It mixes yellow, pink, blue, green tones and feels warm overall. The strongest text pairing is #35381F on #C3CCEF with a contrast ratio of 7.60:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Savannah Grass	rgb(188, 190, 123)	hsl(62, 34%, 61%)
Drama Queen	rgb(168, 115, 157)	hsl(312, 23%, 55%)
Wizard’s Potion	rgb(82, 93, 157)	hsl(231, 31%, 47%)
Graphite	rgb(53, 56, 31)	hsl(67, 29%, 17%)
Frost Fairy	rgb(195, 204, 239)	hsl(228, 58%, 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.60:1 Very good#35381F on #C3CCEF
Aa7.60:1 Very good#C3CCEF on #35381F
Aa6.21:1 Good#BCBE7B on #35381F
Aa6.21:1 Good#35381F on #BCBE7B
Aa3.87:1 Poor#525D9D on #C3CCEF
Aa3.87:1 Poor#C3CCEF on #525D9D
Aa3.23:1 Poor#A8739D on #35381F
Aa3.23:1 Poor#35381F on #A8739D

Color blindness preview

CSS variables

/* Savannah Grass to Frost Fairy — https://swatchly.xyz/palette/bcbe7b-a8739d-525d9d-35381f-c3ccef */
:root {
  --savannah-grass: #bcbe7b;
  --drama-queen: #a8739d;
  --wizard-s-potion: #525d9d;
  --graphite: #35381f;
  --frost-fairy: #c3ccef;
}

Tailwind CSS v4

/* Savannah Grass to Frost Fairy — https://swatchly.xyz/palette/bcbe7b-a8739d-525d9d-35381f-c3ccef */
@theme {
  --color-savannah-grass: #bcbe7b;
  --color-savannah-grass-50: #f2f4cd;
  --color-savannah-grass-100: #e7e9bd;
  --color-savannah-grass-200: #d3d5a1;
  --color-savannah-grass-300: #bcbe7b;
  --color-savannah-grass-400: #9ea060;
  --color-savannah-grass-500: #848644;
  --color-savannah-grass-600: #6b6c2c;
  --color-savannah-grass-700: #56561a;
  --color-savannah-grass-800: #44440d;
  --color-savannah-grass-900: #353505;
  --color-savannah-grass-950: #212101;
  --color-drama-queen: #a8739d;
  --color-drama-queen-50: #fff0fb;
  --color-drama-queen-100: #ffe1f8;
  --color-drama-queen-200: #f4c9ea;
  --color-drama-queen-300: #e0b0d6;
  --color-drama-queen-400: #c38fb8;
  --color-drama-queen-500: #a8739d;
  --color-drama-queen-600: #8b5981;
  --color-drama-queen-700: #714468;
  --color-drama-queen-800: #5a3353;
  --color-drama-queen-900: #472541;
  --color-drama-queen-950: #2e1529;
  --color-wizard-s-potion: #525d9d;
  --color-wizard-s-potion-50: #f2f5ff;
  --color-wizard-s-potion-100: #e3e8ff;
  --color-wizard-s-potion-200: #c7d2ff;
  --color-wizard-s-potion-300: #aab8f6;
  --color-wizard-s-potion-400: #8996d9;
  --color-wizard-s-potion-500: #6c79bb;
  --color-wizard-s-potion-600: #525d9d;
  --color-wizard-s-potion-700: #404980;
  --color-wizard-s-potion-800: #313868;
  --color-wizard-s-potion-900: #242b53;
  --color-wizard-s-potion-950: #151a37;
  --color-graphite: #35381f;
  --color-graphite-50: #f4f7e6;
  --color-graphite-100: #eaeddb;
  --color-graphite-200: #d7dac4;
  --color-graphite-300: #c0c4ab;
  --color-graphite-400: #a1a58a;
  --color-graphite-500: #868a6e;
  --color-graphite-600: #6d7056;
  --color-graphite-700: #575a41;
  --color-graphite-800: #444731;
  --color-graphite-900: #35381f;
  --color-graphite-950: #212315;
  --color-frost-fairy: #c3ccef;
  --color-frost-fairy-50: #e9eeff;
  --color-frost-fairy-100: #dbe2fa;
  --color-frost-fairy-200: #c3ccef;
  --color-frost-fairy-300: #b0b7d6;
  --color-frost-fairy-400: #919aba;
  --color-frost-fairy-500: #7880a0;
  --color-frost-fairy-600: #606785;
  --color-frost-fairy-700: #4c526e;
  --color-frost-fairy-800: #3b4159;
  --color-frost-fairy-900: #2d3246;
  --color-frost-fairy-950: #1b1e2d;
}