Fresh Air to Darkest Forest color palette

A8E9FFFresh Air DF958BStrawberry Memory 009AAABaltic 5C7900Topiary Green 4A386AMeteorite 273500Darkest Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Fresh Air to Darkest Forest is a 6-color cool palette: #A8E9FF (Fresh Air), #DF958B (Strawberry Memory), #009AAA (Baltic), #5C7900 (Topiary Green), #4A386A (Meteorite), #273500 (Darkest Forest). It mixes blue, red, turquoise, green, purple tones and feels cool overall. The strongest text pairing is #A8E9FF on #273500 with a contrast ratio of 9.88:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fresh Air	rgb(168, 233, 255)	hsl(195, 100%, 83%)
Strawberry Memory	rgb(223, 149, 139)	hsl(7, 57%, 71%)
Baltic	rgb(0, 154, 170)	hsl(186, 100%, 33%)
Topiary Green	rgb(92, 121, 0)	hsl(74, 100%, 24%)
Meteorite	rgb(74, 56, 106)	hsl(262, 31%, 32%)
Darkest Forest	rgb(39, 53, 0)	hsl(76, 100%, 10%)

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.88:1 Very good#A8E9FF on #273500
Aa9.88:1 Very good#273500 on #A8E9FF
Aa7.63:1 Very good#A8E9FF on #4A386A
Aa7.63:1 Very good#4A386A on #A8E9FF
Aa5.52:1 Good#DF958B on #273500
Aa5.52:1 Good#273500 on #DF958B
Aa4.27:1 Poor#DF958B on #4A386A
Aa4.27:1 Poor#4A386A on #DF958B

Color blindness preview

CSS variables

/* Fresh Air to Darkest Forest — https://swatchly.xyz/palette/a8e9ff-df958b-009aaa-5c7900-4a386a-273500 */
:root {
  --fresh-air: #a8e9ff;
  --strawberry-memory: #df958b;
  --baltic: #009aaa;
  --topiary-green: #5c7900;
  --meteorite: #4a386a;
  --darkest-forest: #273500;
}

Tailwind CSS v4

/* Fresh Air to Darkest Forest — https://swatchly.xyz/palette/a8e9ff-df958b-009aaa-5c7900-4a386a-273500 */
@theme {
  --color-fresh-air: #a8e9ff;
  --color-fresh-air-50: #f1fbff;
  --color-fresh-air-100: #daf5ff;
  --color-fresh-air-200: #a8e9ff;
  --color-fresh-air-300: #9bcfe1;
  --color-fresh-air-400: #74afc3;
  --color-fresh-air-500: #5493a7;
  --color-fresh-air-600: #38778a;
  --color-fresh-air-700: #235e70;
  --color-fresh-air-800: #144959;
  --color-fresh-air-900: #093946;
  --color-fresh-air-950: #03232d;
  --color-strawberry-memory: #df958b;
  --color-strawberry-memory-50: #fff6f5;
  --color-strawberry-memory-100: #ffebe8;
  --color-strawberry-memory-200: #ffd2cb;
  --color-strawberry-memory-300: #f6b7ae;
  --color-strawberry-memory-400: #df958b;
  --color-strawberry-memory-500: #bf786f;
  --color-strawberry-memory-600: #a05c54;
  --color-strawberry-memory-700: #83453e;
  --color-strawberry-memory-800: #69332d;
  --color-strawberry-memory-900: #522520;
  --color-strawberry-memory-950: #341411;
  --color-baltic: #009aaa;
  --color-baltic-50: #e2fbff;
  --color-baltic-100: #c2f7ff;
  --color-baltic-200: #99e8f4;
  --color-baltic-300: #75d3e1;
  --color-baltic-400: #43b5c5;
  --color-baltic-500: #009aaa;
  --color-baltic-600: #007c89;
  --color-baltic-700: #00626d;
  --color-baltic-800: #004d56;
  --color-baltic-900: #003b42;
  --color-baltic-950: #00252a;
  --color-topiary-green: #5c7900;
  --color-topiary-green-50: #eafec9;
  --color-topiary-green-100: #dff6b9;
  --color-topiary-green-200: #c9e49b;
  --color-topiary-green-300: #b1ce7b;
  --color-topiary-green-400: #91b051;
  --color-topiary-green-500: #75942d;
  --color-topiary-green-600: #5c7900;
  --color-topiary-green-700: #486000;
  --color-topiary-green-800: #384b00;
  --color-topiary-green-900: #2a3a00;
  --color-topiary-green-950: #192400;
  --color-meteorite: #4a386a;
  --color-meteorite-50: #f6f3ff;
  --color-meteorite-100: #eee7ff;
  --color-meteorite-200: #ddcffc;
  --color-meteorite-300: #c7b7ea;
  --color-meteorite-400: #a997ce;
  --color-meteorite-500: #8e7bb3;
  --color-meteorite-600: #736196;
  --color-meteorite-700: #5c4c7c;
  --color-meteorite-800: #4a386a;
  --color-meteorite-900: #382c4f;
  --color-meteorite-950: #231a34;
  --color-darkest-forest: #273500;
  --color-darkest-forest-50: #effbdc;
  --color-darkest-forest-100: #e4f1cf;
  --color-darkest-forest-200: #cfdeb6;
  --color-darkest-forest-300: #b8c99b;
  --color-darkest-forest-400: #97a976;
  --color-darkest-forest-500: #7b8d59;
  --color-darkest-forest-600: #607140;
  --color-darkest-forest-700: #4a592c;
  --color-darkest-forest-800: #38451e;
  --color-darkest-forest-900: #273500;
  --color-darkest-forest-950: #182008;
}