Icy Plains to Bamboo Forest Color Palette

About this palette

Icy Plains to Bamboo Forest is a 4-color vintage palette: #D9DFFF (Icy Plains), #885232 (Gingerbread), #0E3548 (Sea of Stars), #B3AA6F (Bamboo Forest). It mixes purple, brown, blue, yellow tones and feels balanced overall. The strongest text pairing is #D9DFFF on #0E3548 with a contrast ratio of 9.84:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(217, 223, 255)	hsl(231, 100%, 93%)
Gingerbread	rgb(136, 82, 50)	hsl(22, 46%, 36%)
Sea of Stars	rgb(14, 53, 72)	hsl(200, 67%, 17%)
Bamboo Forest	rgb(179, 170, 111)	hsl(52, 31%, 57%)

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.

Aa9.84:1 Very good#D9DFFF on #0E3548
Aa9.84:1 Very good#0E3548 on #D9DFFF
Aa5.49:1 Good#0E3548 on #B3AA6F
Aa5.49:1 Good#B3AA6F on #0E3548
Aa4.83:1 Good#D9DFFF on #885232
Aa4.83:1 Good#885232 on #D9DFFF

Color blindness preview

CSS variables

/* Icy Plains to Bamboo Forest — https://swatchly.xyz/palette/d9dfff-885232-0e3548-b3aa6f */
:root {
  --icy-plains: #d9dfff;
  --gingerbread: #885232;
  --sea-of-stars: #0e3548;
  --bamboo-forest: #b3aa6f;
}

Tailwind CSS v4

/* Icy Plains to Bamboo Forest — https://swatchly.xyz/palette/d9dfff-885232-0e3548-b3aa6f */
@theme {
  --color-icy-plains: #d9dfff;
  --color-icy-plains-50: #fbfbff;
  --color-icy-plains-100: #f0f2ff;
  --color-icy-plains-200: #d9dfff;
  --color-icy-plains-300: #c2c7e1;
  --color-icy-plains-400: #a0a6c2;
  --color-icy-plains-500: #8389a6;
  --color-icy-plains-600: #686d88;
  --color-icy-plains-700: #51556e;
  --color-icy-plains-800: #3d4156;
  --color-icy-plains-900: #2e3144;
  --color-icy-plains-950: #1c1e2b;
  --color-gingerbread: #885232;
  --color-gingerbread-50: #fff2eb;
  --color-gingerbread-100: #ffe3d3;
  --color-gingerbread-200: #f8c8ad;
  --color-gingerbread-300: #e3ae90;
  --color-gingerbread-400: #c48b6b;
  --color-gingerbread-500: #a66e4d;
  --color-gingerbread-600: #885232;
  --color-gingerbread-700: #6e4024;
  --color-gingerbread-800: #583018;
  --color-gingerbread-900: #46240f;
  --color-gingerbread-950: #2d1507;
  --color-sea-of-stars: #0e3548;
  --color-sea-of-stars-50: #ebf7ff;
  --color-sea-of-stars-100: #d6f0ff;
  --color-sea-of-stars-200: #beddee;
  --color-sea-of-stars-300: #a4c7db;
  --color-sea-of-stars-400: #81a7bd;
  --color-sea-of-stars-500: #648ba1;
  --color-sea-of-stars-600: #4b7085;
  --color-sea-of-stars-700: #37596b;
  --color-sea-of-stars-800: #274555;
  --color-sea-of-stars-900: #0e3548;
  --color-sea-of-stars-950: #0e202a;
  --color-bamboo-forest: #b3aa6f;
  --color-bamboo-forest-50: #fdf9d9;
  --color-bamboo-forest-100: #f5f0cd;
  --color-bamboo-forest-200: #e4deb3;
  --color-bamboo-forest-300: #d0c897;
  --color-bamboo-forest-400: #b3aa6f;
  --color-bamboo-forest-500: #968d53;
  --color-bamboo-forest-600: #7a7138;
  --color-bamboo-forest-700: #615924;
  --color-bamboo-forest-800: #4c4515;
  --color-bamboo-forest-900: #3b340a;
  --color-bamboo-forest-950: #242003;
}