Salty Ice to Treetop Cathedral Color Palette

About this palette

Salty Ice to Treetop Cathedral is a 5-color cool palette: #CAE3FF (Salty Ice), #FF859C (Strawberry Dreams), #6D9448 (Bitter Leaf), #A40059 (Plum Perfect), #274815 (Treetop Cathedral). It mixes blue, red, green tones and feels cool overall. The strongest text pairing is #CAE3FF on #274815 with a contrast ratio of 7.88:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Salty Ice	rgb(202, 227, 255)	hsl(212, 100%, 90%)
Strawberry Dreams	rgb(255, 133, 156)	hsl(349, 100%, 76%)
Bitter Leaf	rgb(109, 148, 72)	hsl(91, 35%, 43%)
Plum Perfect	rgb(164, 0, 89)	hsl(327, 100%, 32%)
Treetop Cathedral	rgb(39, 72, 21)	hsl(99, 55%, 18%)

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.88:1 Very good#CAE3FF on #274815
Aa7.88:1 Very good#274815 on #CAE3FF
Aa5.86:1 Good#CAE3FF on #A40059
Aa5.86:1 Good#A40059 on #CAE3FF
Aa4.49:1 Poor#FF859C on #274815
Aa4.49:1 Poor#274815 on #FF859C
Aa3.34:1 Poor#FF859C on #A40059
Aa3.34:1 Poor#A40059 on #FF859C

Color blindness preview

CSS variables

/* Salty Ice to Treetop Cathedral — https://swatchly.xyz/palette/cae3ff-ff859c-6d9448-a40059-274815 */
:root {
  --salty-ice: #cae3ff;
  --strawberry-dreams: #ff859c;
  --bitter-leaf: #6d9448;
  --plum-perfect: #a40059;
  --treetop-cathedral: #274815;
}

Tailwind CSS v4

/* Salty Ice to Treetop Cathedral — https://swatchly.xyz/palette/cae3ff-ff859c-6d9448-a40059-274815 */
@theme {
  --color-salty-ice: #cae3ff;
  --color-salty-ice-50: #f8fbff;
  --color-salty-ice-100: #eaf4ff;
  --color-salty-ice-200: #cae3ff;
  --color-salty-ice-300: #b6cae1;
  --color-salty-ice-400: #93a9c3;
  --color-salty-ice-500: #768da6;
  --color-salty-ice-600: #5b7189;
  --color-salty-ice-700: #45586e;
  --color-salty-ice-800: #334457;
  --color-salty-ice-900: #263444;
  --color-salty-ice-950: #16202c;
  --color-strawberry-dreams: #ff859c;
  --color-strawberry-dreams-50: #fff9f9;
  --color-strawberry-dreams-100: #ffeef0;
  --color-strawberry-dreams-200: #ffd6db;
  --color-strawberry-dreams-300: #ffb7c2;
  --color-strawberry-dreams-400: #ff859c;
  --color-strawberry-dreams-500: #dc677f;
  --color-strawberry-dreams-600: #ba4862;
  --color-strawberry-dreams-700: #9a304b;
  --color-strawberry-dreams-800: #7c1e37;
  --color-strawberry-dreams-900: #611128;
  --color-strawberry-dreams-950: #3e0616;
  --color-bitter-leaf: #6d9448;
  --color-bitter-leaf-50: #e6ffd3;
  --color-bitter-leaf-100: #dbf6c5;
  --color-bitter-leaf-200: #c4e4aa;
  --color-bitter-leaf-300: #aace8c;
  --color-bitter-leaf-400: #89b066;
  --color-bitter-leaf-500: #6d9448;
  --color-bitter-leaf-600: #54792e;
  --color-bitter-leaf-700: #3f611a;
  --color-bitter-leaf-800: #2f4c0c;
  --color-bitter-leaf-900: #223b04;
  --color-bitter-leaf-950: #132501;
  --color-plum-perfect: #a40059;
  --color-plum-perfect-50: #fff1f5;
  --color-plum-perfect-100: #ffe3eb;
  --color-plum-perfect-200: #ffc6d8;
  --color-plum-perfect-300: #ffa3c2;
  --color-plum-perfect-400: #fa6ca3;
  --color-plum-perfect-500: #de4b89;
  --color-plum-perfect-600: #be2d6f;
  --color-plum-perfect-700: #a40059;
  --color-plum-perfect-800: #820045;
  --color-plum-perfect-900: #660035;
  --color-plum-perfect-950: #430021;
  --color-treetop-cathedral: #274815;
  --color-treetop-cathedral-50: #e7fdde;
  --color-treetop-cathedral-100: #dbf4d1;
  --color-treetop-cathedral-200: #c5e2b8;
  --color-treetop-cathedral-300: #aacc9c;
  --color-treetop-cathedral-400: #88ac78;
  --color-treetop-cathedral-500: #6b905b;
  --color-treetop-cathedral-600: #527441;
  --color-treetop-cathedral-700: #3d5b2e;
  --color-treetop-cathedral-800: #274815;
  --color-treetop-cathedral-900: #203615;
  --color-treetop-cathedral-950: #12220a;
}