Pi to Icy Plains Color Palette

About this palette

Pi to Icy Plains is a 5-color cool, vintage palette: #35405D (Pi), #6E5C2C (Olivary), #6776A2 (Misty Harbour), #C89D5C (Camel), #CADAFD (Icy Plains). It mixes blue, brown, yellow tones and feels cool overall. The strongest text pairing is #35405D on #CADAFD with a contrast ratio of 7.32:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pi	rgb(53, 64, 93)	hsl(224, 27%, 29%)
Olivary	rgb(110, 92, 44)	hsl(44, 43%, 30%)
Misty Harbour	rgb(103, 118, 162)	hsl(225, 24%, 52%)
Camel	rgb(200, 157, 92)	hsl(36, 50%, 57%)
Icy Plains	rgb(202, 218, 253)	hsl(221, 93%, 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.32:1 Very good#35405D on #CADAFD
Aa7.32:1 Very good#CADAFD on #35405D
Aa4.63:1 Good#6E5C2C on #CADAFD
Aa4.63:1 Good#CADAFD on #6E5C2C
Aa4.13:1 Poor#35405D on #C89D5C
Aa4.13:1 Poor#C89D5C on #35405D
Aa3.19:1 Poor#6776A2 on #CADAFD
Aa3.19:1 Poor#CADAFD on #6776A2

Color blindness preview

CSS variables

/* Pi to Icy Plains — https://swatchly.xyz/palette/35405d-6e5c2c-6776a2-c89d5c-cadafd */
:root {
  --pi: #35405d;
  --olivary: #6e5c2c;
  --misty-harbour: #6776a2;
  --camel: #c89d5c;
  --icy-plains: #cadafd;
}

Tailwind CSS v4

/* Pi to Icy Plains — https://swatchly.xyz/palette/35405d-6e5c2c-6776a2-c89d5c-cadafd */
@theme {
  --color-pi: #35405d;
  --color-pi-50: #f1f5ff;
  --color-pi-100: #e3ebff;
  --color-pi-200: #ccd7f2;
  --color-pi-300: #b4c0de;
  --color-pi-400: #93a0c1;
  --color-pi-500: #7885a6;
  --color-pi-600: #5e6a89;
  --color-pi-700: #49536f;
  --color-pi-800: #35405d;
  --color-pi-900: #293145;
  --color-pi-950: #181e2d;
  --color-olivary: #6e5c2c;
  --color-olivary-50: #fff5da;
  --color-olivary-100: #f7eacb;
  --color-olivary-200: #e7d8b3;
  --color-olivary-300: #d4c399;
  --color-olivary-400: #b7a576;
  --color-olivary-500: #9e8b5a;
  --color-olivary-600: #847242;
  --color-olivary-700: #6e5c2c;
  --color-olivary-800: #57481f;
  --color-olivary-900: #443713;
  --color-olivary-950: #2b2208;
  --color-misty-harbour: #6776a2;
  --color-misty-harbour-50: #f1f5ff;
  --color-misty-harbour-100: #e7edff;
  --color-misty-harbour-200: #cedbfe;
  --color-misty-harbour-300: #b8c7ee;
  --color-misty-harbour-400: #99a9d5;
  --color-misty-harbour-500: #7f8fbc;
  --color-misty-harbour-600: #6776a2;
  --color-misty-harbour-700: #505d85;
  --color-misty-harbour-800: #3c486c;
  --color-misty-harbour-900: #2d3755;
  --color-misty-harbour-950: #1a2137;
  --color-camel: #c89d5c;
  --color-camel-50: #fff5e7;
  --color-camel-100: #ffeacc;
  --color-camel-200: #f5d5a6;
  --color-camel-300: #e3be88;
  --color-camel-400: #c89d5c;
  --color-camel-500: #aa8140;
  --color-camel-600: #8e6623;
  --color-camel-700: #734f0b;
  --color-camel-800: #5b3c00;
  --color-camel-900: #472e00;
  --color-camel-950: #2d1b00;
  --color-icy-plains: #cadafd;
  --color-icy-plains-50: #f3f7ff;
  --color-icy-plains-100: #e5edff;
  --color-icy-plains-200: #cadafd;
  --color-icy-plains-300: #b6c3e0;
  --color-icy-plains-400: #95a3c3;
  --color-icy-plains-500: #7987a7;
  --color-icy-plains-600: #5f6c8b;
  --color-icy-plains-700: #495571;
  --color-icy-plains-800: #37425a;
  --color-icy-plains-900: #2a3247;
  --color-icy-plains-950: #191f2d;
}