Quiche Lorraine to Grizzly Color Palette

About this palette

Quiche Lorraine to Grizzly is a 5-color warm, earthy palette: #FFD66E (Quiche Lorraine), #97B5FF (Wondrous Wisteria), #22337D (Deep Space Royal), #A57800 (Bronze), #805B00 (Grizzly). It mixes yellow, blue, brown tones and feels warm overall. The strongest text pairing is #FFD66E on #22337D with a contrast ratio of 8.21:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quiche Lorraine	rgb(255, 214, 110)	hsl(43, 100%, 72%)
Wondrous Wisteria	rgb(151, 181, 255)	hsl(223, 100%, 80%)
Deep Space Royal	rgb(34, 51, 125)	hsl(229, 57%, 31%)
Bronze	rgb(165, 120, 0)	hsl(44, 100%, 32%)
Grizzly	rgb(128, 91, 0)	hsl(43, 100%, 25%)

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.21:1 Very good#FFD66E on #22337D
Aa8.21:1 Very good#22337D on #FFD66E
Aa5.64:1 Good#97B5FF on #22337D
Aa5.64:1 Good#22337D on #97B5FF
Aa4.42:1 Poor#FFD66E on #805B00
Aa4.42:1 Poor#805B00 on #FFD66E
Aa3.04:1 Poor#97B5FF on #805B00
Aa3.04:1 Poor#805B00 on #97B5FF

Color blindness preview

CSS variables

/* Quiche Lorraine to Grizzly — https://swatchly.xyz/palette/ffd66e-97b5ff-22337d-a57800-805b00 */
:root {
  --quiche-lorraine: #ffd66e;
  --wondrous-wisteria: #97b5ff;
  --deep-space-royal: #22337d;
  --bronze: #a57800;
  --grizzly: #805b00;
}

Tailwind CSS v4

/* Quiche Lorraine to Grizzly — https://swatchly.xyz/palette/ffd66e-97b5ff-22337d-a57800-805b00 */
@theme {
  --color-quiche-lorraine: #ffd66e;
  --color-quiche-lorraine-50: #fff7e4;
  --color-quiche-lorraine-100: #ffedc1;
  --color-quiche-lorraine-200: #ffd66e;
  --color-quiche-lorraine-300: #e1c06c;
  --color-quiche-lorraine-400: #c49f39;
  --color-quiche-lorraine-500: #a88200;
  --color-quiche-lorraine-600: #876800;
  --color-quiche-lorraine-700: #6b5200;
  --color-quiche-lorraine-800: #543f00;
  --color-quiche-lorraine-900: #413000;
  --color-quiche-lorraine-950: #291d00;
  --color-wondrous-wisteria: #97b5ff;
  --color-wondrous-wisteria-50: #e9f0ff;
  --color-wondrous-wisteria-100: #d9e4ff;
  --color-wondrous-wisteria-200: #bacfff;
  --color-wondrous-wisteria-300: #97b5ff;
  --color-wondrous-wisteria-400: #7b97dd;
  --color-wondrous-wisteria-500: #627dc3;
  --color-wondrous-wisteria-600: #4b64a6;
  --color-wondrous-wisteria-700: #394f8a;
  --color-wondrous-wisteria-800: #2b3e72;
  --color-wondrous-wisteria-900: #20305d;
  --color-wondrous-wisteria-950: #121d3d;
  --color-deep-space-royal: #22337d;
  --color-deep-space-royal-50: #f1f5ff;
  --color-deep-space-royal-100: #e3ebff;
  --color-deep-space-royal-200: #c8d7ff;
  --color-deep-space-royal-300: #a6bdff;
  --color-deep-space-royal-400: #809beb;
  --color-deep-space-royal-500: #647dce;
  --color-deep-space-royal-600: #4a61ae;
  --color-deep-space-royal-700: #364a8e;
  --color-deep-space-royal-800: #22337d;
  --color-deep-space-royal-900: #1c295a;
  --color-deep-space-royal-950: #0f183a;
  --color-bronze: #a57800;
  --color-bronze-50: #fff3dc;
  --color-bronze-100: #ffe6b8;
  --color-bronze-200: #f3cf8c;
  --color-bronze-300: #dfb668;
  --color-bronze-400: #c29538;
  --color-bronze-500: #a57800;
  --color-bronze-600: #856000;
  --color-bronze-700: #6a4c00;
  --color-bronze-800: #543b00;
  --color-bronze-900: #412d00;
  --color-bronze-950: #2a1c00;
  --color-grizzly: #805b00;
  --color-grizzly-50: #fff4e1;
  --color-grizzly-100: #ffe6bb;
  --color-grizzly-200: #efcf99;
  --color-grizzly-300: #d9b678;
  --color-grizzly-400: #ba944e;
  --color-grizzly-500: #9d772c;
  --color-grizzly-600: #805b00;
  --color-grizzly-700: #664800;
  --color-grizzly-800: #503800;
  --color-grizzly-900: #3f2b00;
  --color-grizzly-950: #281a00;
}