Black Turmeric to Icy Plains color palette

313E62Black Turmeric 895A00Grizzly A86FA4Drama Queen 9FCB94Garden Goddess C8D8FFIcy Plains

About this palette

Black Turmeric to Icy Plains is a 5-color cool palette: #313E62 (Black Turmeric), #895A00 (Grizzly), #A86FA4 (Drama Queen), #9FCB94 (Garden Goddess), #C8D8FF (Icy Plains). It mixes blue, brown, pink, green tones and feels cool overall. The strongest text pairing is #313E62 on #C8D8FF with a contrast ratio of 7.38:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Turmeric	rgb(49, 62, 98)	hsl(224, 33%, 29%)
Grizzly	rgb(137, 90, 0)	hsl(39, 100%, 27%)
Drama Queen	rgb(168, 111, 164)	hsl(304, 25%, 55%)
Garden Goddess	rgb(159, 203, 148)	hsl(108, 35%, 69%)
Icy Plains	rgb(200, 216, 255)	hsl(223, 100%, 89%)

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.38:1 Very good#313E62 on #C8D8FF
Aa7.38:1 Very good#C8D8FF on #313E62
Aa5.73:1 Good#313E62 on #9FCB94
Aa5.73:1 Good#9FCB94 on #313E62
Aa4.18:1 Poor#895A00 on #C8D8FF
Aa4.18:1 Poor#C8D8FF on #895A00
Aa3.25:1 Poor#895A00 on #9FCB94
Aa3.25:1 Poor#9FCB94 on #895A00

Color blindness preview

CSS variables

/* Black Turmeric to Icy Plains — https://swatchly.xyz/palette/313e62-895a00-a86fa4-9fcb94-c8d8ff */
:root {
  --black-turmeric: #313e62;
  --grizzly: #895a00;
  --drama-queen: #a86fa4;
  --garden-goddess: #9fcb94;
  --icy-plains: #c8d8ff;
}

Tailwind CSS v4

/* Black Turmeric to Icy Plains — https://swatchly.xyz/palette/313e62-895a00-a86fa4-9fcb94-c8d8ff */
@theme {
  --color-black-turmeric: #313e62;
  --color-black-turmeric-50: #f1f5ff;
  --color-black-turmeric-100: #e3ebff;
  --color-black-turmeric-200: #cad7f8;
  --color-black-turmeric-300: #b1c0e5;
  --color-black-turmeric-400: #90a0c8;
  --color-black-turmeric-500: #7484ac;
  --color-black-turmeric-600: #5a698f;
  --color-black-turmeric-700: #455274;
  --color-black-turmeric-800: #313e62;
  --color-black-turmeric-900: #263049;
  --color-black-turmeric-950: #161d2f;
  --color-grizzly: #895a00;
  --color-grizzly-50: #fff3e4;
  --color-grizzly-100: #ffe6c5;
  --color-grizzly-200: #f5ce99;
  --color-grizzly-300: #e1b478;
  --color-grizzly-400: #c3924e;
  --color-grizzly-500: #a6762c;
  --color-grizzly-600: #895a00;
  --color-grizzly-700: #6d4700;
  --color-grizzly-800: #563700;
  --color-grizzly-900: #432a00;
  --color-grizzly-950: #2b1900;
  --color-drama-queen: #a86fa4;
  --color-drama-queen-50: #fff0fd;
  --color-drama-queen-100: #ffe0fc;
  --color-drama-queen-200: #f4c6f0;
  --color-drama-queen-300: #e1addd;
  --color-drama-queen-400: #c48bbf;
  --color-drama-queen-500: #a86fa4;
  --color-drama-queen-600: #8b5588;
  --color-drama-queen-700: #71406f;
  --color-drama-queen-800: #5b3058;
  --color-drama-queen-900: #472345;
  --color-drama-queen-950: #2e142d;
  --color-garden-goddess: #9fcb94;
  --color-garden-goddess-50: #e2fcdc;
  --color-garden-goddess-100: #d5f2ce;
  --color-garden-goddess-200: #bddfb5;
  --color-garden-goddess-300: #9fcb94;
  --color-garden-goddess-400: #82ab78;
  --color-garden-goddess-500: #67915d;
  --color-garden-goddess-600: #4e7644;
  --color-garden-goddess-700: #3b5f32;
  --color-garden-goddess-800: #2c4b23;
  --color-garden-goddess-900: #203b19;
  --color-garden-goddess-950: #11250c;
  --color-icy-plains: #c8d8ff;
  --color-icy-plains-50: #f2f6ff;
  --color-icy-plains-100: #e4ecff;
  --color-icy-plains-200: #c8d8ff;
  --color-icy-plains-300: #b4c1e2;
  --color-icy-plains-400: #93a2c5;
  --color-icy-plains-500: #7886aa;
  --color-icy-plains-600: #5e6b8d;
  --color-icy-plains-700: #495573;
  --color-icy-plains-800: #37425c;
  --color-icy-plains-900: #293249;
  --color-icy-plains-950: #181f2f;
}