Baby Blue to Exhilarating Green color palette

9ECBFFBaby Blue 6D302FKenyan Copper 5693CEWinter Lake 4D8110Avocado 472122Torrefacto Roast 82C386Exhilarating Green

Open in generator Export PNG, PDF, ASE…

About this palette

Baby Blue to Exhilarating Green is a 6-color cool, earthy palette: #9ECBFF (Baby Blue), #6D302F (Kenyan Copper), #5693CE (Winter Lake), #4D8110 (Avocado), #472122 (Torrefacto Roast), #82C386 (Exhilarating Green). It mixes blue, brown, green tones and feels cool overall. The strongest text pairing is #9ECBFF on #472122 with a contrast ratio of 8.25:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Baby Blue	rgb(158, 203, 255)	hsl(212, 100%, 81%)
Kenyan Copper	rgb(109, 48, 47)	hsl(1, 40%, 31%)
Winter Lake	rgb(86, 147, 206)	hsl(210, 55%, 57%)
Avocado	rgb(77, 129, 16)	hsl(88, 78%, 28%)
Torrefacto Roast	rgb(71, 33, 34)	hsl(358, 37%, 20%)
Exhilarating Green	rgb(130, 195, 134)	hsl(124, 35%, 64%)

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.

Aa8.25:1 Very good#9ECBFF on #472122
Aa8.25:1 Very good#472122 on #9ECBFF
Aa6.69:1 Good#472122 on #82C386
Aa6.69:1 Good#82C386 on #472122
Aa5.88:1 Good#9ECBFF on #6D302F
Aa5.88:1 Good#6D302F on #9ECBFF
Aa4.78:1 Good#6D302F on #82C386
Aa4.78:1 Good#82C386 on #6D302F

Color blindness preview

CSS variables

/* Baby Blue to Exhilarating Green — https://swatchly.xyz/palette/9ecbff-6d302f-5693ce-4d8110-472122-82c386 */
:root {
  --baby-blue: #9ecbff;
  --kenyan-copper: #6d302f;
  --winter-lake: #5693ce;
  --avocado: #4d8110;
  --torrefacto-roast: #472122;
  --exhilarating-green: #82c386;
}

Tailwind CSS v4

/* Baby Blue to Exhilarating Green — https://swatchly.xyz/palette/9ecbff-6d302f-5693ce-4d8110-472122-82c386 */
@theme {
  --color-baby-blue: #9ecbff;
  --color-baby-blue-50: #f4f9ff;
  --color-baby-blue-100: #e5f1ff;
  --color-baby-blue-200: #c5e0ff;
  --color-baby-blue-300: #9ecbff;
  --color-baby-blue-400: #81aada;
  --color-baby-blue-500: #638dbe;
  --color-baby-blue-600: #4871a0;
  --color-baby-blue-700: #345983;
  --color-baby-blue-800: #244569;
  --color-baby-blue-900: #183453;
  --color-baby-blue-950: #0c2036;
  --color-kenyan-copper: #6d302f;
  --color-kenyan-copper-50: #fff2f0;
  --color-kenyan-copper-100: #ffe4e2;
  --color-kenyan-copper-200: #ffc8c4;
  --color-kenyan-copper-300: #eeafab;
  --color-kenyan-copper-400: #d28e8a;
  --color-kenyan-copper-500: #b7736f;
  --color-kenyan-copper-600: #9a5956;
  --color-kenyan-copper-700: #804442;
  --color-kenyan-copper-800: #6d302f;
  --color-kenyan-copper-900: #522625;
  --color-kenyan-copper-950: #361615;
  --color-winter-lake: #5693ce;
  --color-winter-lake-50: #f0f8ff;
  --color-winter-lake-100: #e2f0ff;
  --color-winter-lake-200: #c1e0ff;
  --color-winter-lake-300: #99ccff;
  --color-winter-lake-400: #74aee7;
  --color-winter-lake-500: #5693ce;
  --color-winter-lake-600: #3a76af;
  --color-winter-lake-700: #245d91;
  --color-winter-lake-800: #144876;
  --color-winter-lake-900: #09375d;
  --color-winter-lake-950: #02213d;
  --color-avocado: #4d8110;
  --color-avocado-50: #e5ffd3;
  --color-avocado-100: #d5fabc;
  --color-avocado-200: #bee99f;
  --color-avocado-300: #a5d580;
  --color-avocado-400: #82b756;
  --color-avocado-500: #669c35;
  --color-avocado-600: #4d8110;
  --color-avocado-700: #3b6700;
  --color-avocado-800: #2d5100;
  --color-avocado-900: #213e00;
  --color-avocado-950: #132700;
  --color-torrefacto-roast: #472122;
  --color-torrefacto-roast-50: #fff1f1;
  --color-torrefacto-roast-100: #ffe4e3;
  --color-torrefacto-roast-200: #f3cdcc;
  --color-torrefacto-roast-300: #dfb5b4;
  --color-torrefacto-roast-400: #c19392;
  --color-torrefacto-roast-500: #a57776;
  --color-torrefacto-roast-600: #875c5c;
  --color-torrefacto-roast-700: #6c4646;
  --color-torrefacto-roast-800: #553434;
  --color-torrefacto-roast-900: #472122;
  --color-torrefacto-roast-950: #281616;
  --color-exhilarating-green: #82c386;
  --color-exhilarating-green-50: #f1fff1;
  --color-exhilarating-green-100: #daffdb;
  --color-exhilarating-green-200: #c3f0c5;
  --color-exhilarating-green-300: #aaddac;
  --color-exhilarating-green-400: #82c386;
  --color-exhilarating-green-500: #65a469;
  --color-exhilarating-green-600: #47864c;
  --color-exhilarating-green-700: #306b36;
  --color-exhilarating-green-800: #1e5325;
  --color-exhilarating-green-900: #123f18;
  --color-exhilarating-green-950: #07270b;
}