Dark Olive to Icy Plains Color Palette

About this palette

Dark Olive to Icy Plains is a 5-color cool, neon palette: #3A3C00 (Dark Olive), #6B6600 (Forestial Outpost), #685EFB (Candy Grape Fizz), #B3A1FB (Diva), #DDD8FF (Icy Plains). It mixes brown, purple tones and feels cool overall. The strongest text pairing is #3A3C00 on #DDD8FF with a contrast ratio of 8.40:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Olive	rgb(58, 60, 0)	hsl(62, 100%, 12%)
Forestial Outpost	rgb(107, 102, 0)	hsl(57, 100%, 21%)
Candy Grape Fizz	rgb(104, 94, 251)	hsl(244, 95%, 68%)
Diva	rgb(179, 161, 251)	hsl(252, 92%, 81%)
Icy Plains	rgb(221, 216, 255)	hsl(248, 100%, 92%)

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.40:1 Very good#3A3C00 on #DDD8FF
Aa8.40:1 Very good#DDD8FF on #3A3C00
Aa5.15:1 Good#3A3C00 on #B3A1FB
Aa5.15:1 Good#B3A1FB on #3A3C00
Aa4.35:1 Poor#6B6600 on #DDD8FF
Aa4.35:1 Poor#DDD8FF on #6B6600
Aa3.35:1 Poor#685EFB on #DDD8FF
Aa3.35:1 Poor#DDD8FF on #685EFB

Color blindness preview

CSS variables

/* Dark Olive to Icy Plains — https://swatchly.xyz/palette/3a3c00-6b6600-685efb-b3a1fb-ddd8ff */
:root {
  --dark-olive: #3a3c00;
  --forestial-outpost: #6b6600;
  --candy-grape-fizz: #685efb;
  --diva: #b3a1fb;
  --icy-plains: #ddd8ff;
}

Tailwind CSS v4

/* Dark Olive to Icy Plains — https://swatchly.xyz/palette/3a3c00-6b6600-685efb-b3a1fb-ddd8ff */
@theme {
  --color-dark-olive: #3a3c00;
  --color-dark-olive-50: #f5f9d9;
  --color-dark-olive-100: #ebefcb;
  --color-dark-olive-200: #d8dcb2;
  --color-dark-olive-300: #c1c695;
  --color-dark-olive-400: #a3a872;
  --color-dark-olive-500: #898d57;
  --color-dark-olive-600: #70733e;
  --color-dark-olive-700: #5a5d2c;
  --color-dark-olive-800: #484b1e;
  --color-dark-olive-900: #3a3c00;
  --color-dark-olive-950: #242608;
  --color-forestial-outpost: #6b6600;
  --color-forestial-outpost-50: #f9f8cb;
  --color-forestial-outpost-100: #efedb9;
  --color-forestial-outpost-200: #dad89a;
  --color-forestial-outpost-300: #c3c078;
  --color-forestial-outpost-400: #a39f4e;
  --color-forestial-outpost-500: #87822c;
  --color-forestial-outpost-600: #6b6600;
  --color-forestial-outpost-700: #555100;
  --color-forestial-outpost-800: #423f00;
  --color-forestial-outpost-900: #333100;
  --color-forestial-outpost-950: #201e00;
  --color-candy-grape-fizz: #685efb;
  --color-candy-grape-fizz-50: #f0f2ff;
  --color-candy-grape-fizz-100: #e2e5ff;
  --color-candy-grape-fizz-200: #c8cdff;
  --color-candy-grape-fizz-300: #abb1ff;
  --color-candy-grape-fizz-400: #8588ff;
  --color-candy-grape-fizz-500: #685efb;
  --color-candy-grape-fizz-600: #5344d9;
  --color-candy-grape-fizz-700: #422fb8;
  --color-candy-grape-fizz-800: #331f99;
  --color-candy-grape-fizz-900: #28147d;
  --color-candy-grape-fizz-950: #180956;
  --color-diva: #b3a1fb;
  --color-diva-50: #fafaff;
  --color-diva-100: #f3f1ff;
  --color-diva-200: #e2ddff;
  --color-diva-300: #cfc5ff;
  --color-diva-400: #b3a1fb;
  --color-diva-500: #9583d9;
  --color-diva-600: #7865b9;
  --color-diva-700: #5f4c9a;
  --color-diva-800: #4a387c;
  --color-diva-900: #372961;
  --color-diva-950: #21163e;
  --color-icy-plains: #ddd8ff;
  --color-icy-plains-50: #f9f8ff;
  --color-icy-plains-100: #f0eeff;
  --color-icy-plains-200: #ddd8ff;
  --color-icy-plains-300: #c5c1e1;
  --color-icy-plains-400: #a5a0c3;
  --color-icy-plains-500: #8984a7;
  --color-icy-plains-600: #6d688a;
  --color-icy-plains-700: #565170;
  --color-icy-plains-800: #423e59;
  --color-icy-plains-900: #332f46;
  --color-icy-plains-950: #1f1d2d;
}