Oasis to Darkest Forest color palette

269097Oasis 3E6A39Jurassic Park CFA2E2Somewhere in a Fairytale FED5D4We Peep 28311ADarkest Forest

About this palette

Oasis to Darkest Forest is a 5-color cool palette: #269097 (Oasis), #3E6A39 (Jurassic Park), #CFA2E2 (Somewhere in a Fairytale), #FED5D4 (We Peep), #28311A (Darkest Forest). It mixes turquoise, green, purple, pink tones and feels cool overall. The strongest text pairing is #FED5D4 on #28311A with a contrast ratio of 10.15:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oasis	rgb(38, 144, 151)	hsl(184, 60%, 37%)
Jurassic Park	rgb(62, 106, 57)	hsl(114, 30%, 32%)
Somewhere in a Fairytale	rgb(207, 162, 226)	hsl(282, 52%, 76%)
We Peep	rgb(254, 213, 212)	hsl(1, 95%, 91%)
Darkest Forest	rgb(40, 49, 26)	hsl(83, 31%, 15%)

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.15:1 Very good#FED5D4 on #28311A
Aa10.15:1 Very good#28311A on #FED5D4
Aa6.42:1 Good#CFA2E2 on #28311A
Aa6.42:1 Good#28311A on #CFA2E2
Aa4.72:1 Good#3E6A39 on #FED5D4
Aa4.72:1 Good#FED5D4 on #3E6A39
Aa3.57:1 Poor#269097 on #28311A
Aa3.57:1 Poor#28311A on #269097

Color blindness preview

CSS variables

/* Oasis to Darkest Forest — https://swatchly.xyz/palette/269097-3e6a39-cfa2e2-fed5d4-28311a */
:root {
  --oasis: #269097;
  --jurassic-park: #3e6a39;
  --somewhere-in-a-fairytale: #cfa2e2;
  --we-peep: #fed5d4;
  --darkest-forest: #28311a;
}

Tailwind CSS v4

/* Oasis to Darkest Forest — https://swatchly.xyz/palette/269097-3e6a39-cfa2e2-fed5d4-28311a */
@theme {
  --color-oasis: #269097;
  --color-oasis-50: #d7fcff;
  --color-oasis-100: #bcf5f9;
  --color-oasis-200: #9ce2e7;
  --color-oasis-300: #7bccd2;
  --color-oasis-400: #4eadb3;
  --color-oasis-500: #269097;
  --color-oasis-600: #00757c;
  --color-oasis-700: #005d63;
  --color-oasis-800: #00494e;
  --color-oasis-900: #00393c;
  --color-oasis-950: #002426;
  --color-jurassic-park: #3e6a39;
  --color-jurassic-park-50: #e3fedf;
  --color-jurassic-park-100: #d7f5d3;
  --color-jurassic-park-200: #c1e5bc;
  --color-jurassic-park-300: #a9d1a3;
  --color-jurassic-park-400: #87b482;
  --color-jurassic-park-500: #6c9a67;
  --color-jurassic-park-600: #54804e;
  --color-jurassic-park-700: #3e6a39;
  --color-jurassic-park-800: #2e532a;
  --color-jurassic-park-900: #21411d;
  --color-jurassic-park-950: #12290f;
  --color-somewhere-in-a-fairytale: #cfa2e2;
  --color-somewhere-in-a-fairytale-50: #f8e9ff;
  --color-somewhere-in-a-fairytale-100: #f3d8ff;
  --color-somewhere-in-a-fairytale-200: #e3bff2;
  --color-somewhere-in-a-fairytale-300: #cfa2e2;
  --color-somewhere-in-a-fairytale-400: #b085c2;
  --color-somewhere-in-a-fairytale-500: #976ca8;
  --color-somewhere-in-a-fairytale-600: #7d548d;
  --color-somewhere-in-a-fairytale-700: #664174;
  --color-somewhere-in-a-fairytale-800: #52315f;
  --color-somewhere-in-a-fairytale-900: #41254c;
  --color-somewhere-in-a-fairytale-950: #2a1632;
  --color-we-peep: #fed5d4;
  --color-we-peep-50: #fffafa;
  --color-we-peep-100: #ffeeee;
  --color-we-peep-200: #fed5d4;
  --color-we-peep-300: #e0bfbe;
  --color-we-peep-400: #c19d9c;
  --color-we-peep-500: #a5807f;
  --color-we-peep-600: #876464;
  --color-we-peep-700: #6d4d4d;
  --color-we-peep-800: #553a3a;
  --color-we-peep-900: #432c2c;
  --color-we-peep-950: #2b1a1a;
  --color-darkest-forest: #28311a;
  --color-darkest-forest-50: #f1f8e8;
  --color-darkest-forest-100: #e7efdd;
  --color-darkest-forest-200: #d2dbc6;
  --color-darkest-forest-300: #bbc5ad;
  --color-darkest-forest-400: #9aa58b;
  --color-darkest-forest-500: #7e896e;
  --color-darkest-forest-600: #636d54;
  --color-darkest-forest-700: #4c553f;
  --color-darkest-forest-800: #39412e;
  --color-darkest-forest-900: #28311a;
  --color-darkest-forest-950: #181d12;
}