Salty Ice to Darkest Forest color palette

C5E4FFSalty Ice A3C76DFiddle-Leaf Fig C56183Lipstick 0073B5Brilliant Blue 723640Cuba Libre 272E00Darkest Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Salty Ice to Darkest Forest is a 6-color cool palette: #C5E4FF (Salty Ice), #A3C76D (Fiddle-Leaf Fig), #C56183 (Lipstick), #0073B5 (Brilliant Blue), #723640 (Cuba Libre), #272E00 (Darkest Forest). It mixes blue, green, pink, brown tones and feels cool overall. The strongest text pairing is #C5E4FF on #272E00 with a contrast ratio of 10.78:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Salty Ice	rgb(197, 228, 255)	hsl(208, 100%, 89%)
Fiddle-Leaf Fig	rgb(163, 199, 109)	hsl(84, 45%, 60%)
Lipstick	rgb(197, 97, 131)	hsl(340, 46%, 58%)
Brilliant Blue	rgb(0, 115, 181)	hsl(202, 100%, 35%)
Cuba Libre	rgb(114, 54, 64)	hsl(350, 36%, 33%)
Darkest Forest	rgb(39, 46, 0)	hsl(69, 100%, 9%)

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.

Aa10.78:1 Very good#C5E4FF on #272E00
Aa10.78:1 Very good#272E00 on #C5E4FF
Aa7.41:1 Very good#A3C76D on #272E00
Aa7.41:1 Very good#272E00 on #A3C76D
Aa6.87:1 Good#C5E4FF on #723640
Aa6.87:1 Good#723640 on #C5E4FF
Aa4.72:1 Good#A3C76D on #723640
Aa4.72:1 Good#723640 on #A3C76D

Color blindness preview

CSS variables

/* Salty Ice to Darkest Forest — https://swatchly.xyz/palette/c5e4ff-a3c76d-c56183-0073b5-723640-272e00 */
:root {
  --salty-ice: #c5e4ff;
  --fiddle-leaf-fig: #a3c76d;
  --lipstick: #c56183;
  --brilliant-blue: #0073b5;
  --cuba-libre: #723640;
  --darkest-forest: #272e00;
}

Tailwind CSS v4

/* Salty Ice to Darkest Forest — https://swatchly.xyz/palette/c5e4ff-a3c76d-c56183-0073b5-723640-272e00 */
@theme {
  --color-salty-ice: #c5e4ff;
  --color-salty-ice-50: #f7fbff;
  --color-salty-ice-100: #e7f4ff;
  --color-salty-ice-200: #c5e4ff;
  --color-salty-ice-300: #b2cbe1;
  --color-salty-ice-400: #8faac3;
  --color-salty-ice-500: #718ea6;
  --color-salty-ice-600: #567289;
  --color-salty-ice-700: #40596f;
  --color-salty-ice-800: #2f4557;
  --color-salty-ice-900: #233544;
  --color-salty-ice-950: #13212c;
  --color-fiddle-leaf-fig: #a3c76d;
  --color-fiddle-leaf-fig-50: #e4fac6;
  --color-fiddle-leaf-fig-100: #d7f0b5;
  --color-fiddle-leaf-fig-200: #bfdc97;
  --color-fiddle-leaf-fig-300: #a3c76d;
  --color-fiddle-leaf-fig-400: #86a852;
  --color-fiddle-leaf-fig-500: #6d8e34;
  --color-fiddle-leaf-fig-600: #557418;
  --color-fiddle-leaf-fig-700: #425d00;
  --color-fiddle-leaf-fig-800: #334a00;
  --color-fiddle-leaf-fig-900: #273a00;
  --color-fiddle-leaf-fig-950: #172400;
  --color-lipstick: #c56183;
  --color-lipstick-50: #fff1f5;
  --color-lipstick-100: #ffe3ea;
  --color-lipstick-200: #ffc6d6;
  --color-lipstick-300: #fda2be;
  --color-lipstick-400: #e17e9e;
  --color-lipstick-500: #c56183;
  --color-lipstick-600: #a64769;
  --color-lipstick-700: #893252;
  --color-lipstick-800: #6f2340;
  --color-lipstick-900: #581731;
  --color-lipstick-950: #3a0b1e;
  --color-brilliant-blue: #0073b5;
  --color-brilliant-blue-50: #edf7ff;
  --color-brilliant-blue-100: #dbeeff;
  --color-brilliant-blue-200: #b6ddff;
  --color-brilliant-blue-300: #89c9ff;
  --color-brilliant-blue-400: #55aaed;
  --color-brilliant-blue-500: #318ed2;
  --color-brilliant-blue-600: #0073b5;
  --color-brilliant-blue-700: #005b91;
  --color-brilliant-blue-800: #004773;
  --color-brilliant-blue-900: #00365a;
  --color-brilliant-blue-950: #00223a;
  --color-cuba-libre: #723640;
  --color-cuba-libre-50: #fff1f2;
  --color-cuba-libre-100: #ffe3e6;
  --color-cuba-libre-200: #fec7cd;
  --color-cuba-libre-300: #edb0b7;
  --color-cuba-libre-400: #d29098;
  --color-cuba-libre-500: #b8767f;
  --color-cuba-libre-600: #9d5d66;
  --color-cuba-libre-700: #844952;
  --color-cuba-libre-800: #723640;
  --color-cuba-libre-900: #582a31;
  --color-cuba-libre-950: #3a191e;
  --color-darkest-forest: #272e00;
  --color-darkest-forest-50: #f2f9de;
  --color-darkest-forest-100: #e8f0d1;
  --color-darkest-forest-200: #d4ddb8;
  --color-darkest-forest-300: #bdc79d;
  --color-darkest-forest-400: #9ba678;
  --color-darkest-forest-500: #7e885a;
  --color-darkest-forest-600: #636c40;
  --color-darkest-forest-700: #4b532c;
  --color-darkest-forest-800: #383e1d;
  --color-darkest-forest-900: #272e00;
  --color-darkest-forest-950: #171a08;
}