Forestial Outpost to Freezy Breezy color palette

575E02Forestial Outpost D23F59Flesh and Blood B5B300Lush Bamboo 342561Dark Dreams 9DF3EEFreezy Breezy

Open in generator Export PNG, PDF, ASE…

About this palette

Forestial Outpost to Freezy Breezy is a 5-color warm palette: #575E02 (Forestial Outpost), #D23F59 (Flesh and Blood), #B5B300 (Lush Bamboo), #342561 (Dark Dreams), #9DF3EE (Freezy Breezy). It mixes green, red, yellow, purple, turquoise tones and feels warm overall. The strongest text pairing is #342561 on #9DF3EE with a contrast ratio of 10.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Forestial Outpost	rgb(87, 94, 2)	hsl(65, 96%, 19%)
Flesh and Blood	rgb(210, 63, 89)	hsl(349, 62%, 54%)
Lush Bamboo	rgb(181, 179, 0)	hsl(59, 100%, 35%)
Dark Dreams	rgb(52, 37, 97)	hsl(255, 45%, 26%)
Freezy Breezy	rgb(157, 243, 238)	hsl(177, 78%, 78%)

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.41:1 Very good#342561 on #9DF3EE
Aa10.41:1 Very good#9DF3EE on #342561
Aa5.95:1 Good#B5B300 on #342561
Aa5.95:1 Good#342561 on #B5B300
Aa5.48:1 Good#575E02 on #9DF3EE
Aa5.48:1 Good#9DF3EE on #575E02
Aa3.59:1 Poor#D23F59 on #9DF3EE
Aa3.59:1 Poor#9DF3EE on #D23F59

Color blindness preview

CSS variables

/* Forestial Outpost to Freezy Breezy — https://swatchly.xyz/palette/575e02-d23f59-b5b300-342561-9df3ee */
:root {
  --forestial-outpost: #575e02;
  --flesh-and-blood: #d23f59;
  --lush-bamboo: #b5b300;
  --dark-dreams: #342561;
  --freezy-breezy: #9df3ee;
}

Tailwind CSS v4

/* Forestial Outpost to Freezy Breezy — https://swatchly.xyz/palette/575e02-d23f59-b5b300-342561-9df3ee */
@theme {
  --color-forestial-outpost: #575e02;
  --color-forestial-outpost-50: #f4facf;
  --color-forestial-outpost-100: #e9f1c0;
  --color-forestial-outpost-200: #d6dfa5;
  --color-forestial-outpost-300: #c0c987;
  --color-forestial-outpost-400: #a1aa60;
  --color-forestial-outpost-500: #878f41;
  --color-forestial-outpost-600: #6d7526;
  --color-forestial-outpost-700: #575e02;
  --color-forestial-outpost-800: #444900;
  --color-forestial-outpost-900: #343800;
  --color-forestial-outpost-950: #202300;
  --color-flesh-and-blood: #d23f59;
  --color-flesh-and-blood-50: #ffefef;
  --color-flesh-and-blood-100: #ffdee0;
  --color-flesh-and-blood-200: #ffbfc3;
  --color-flesh-and-blood-300: #ff98a1;
  --color-flesh-and-blood-400: #f26175;
  --color-flesh-and-blood-500: #d23f59;
  --color-flesh-and-blood-600: #b22343;
  --color-flesh-and-blood-700: #940b31;
  --color-flesh-and-blood-800: #780024;
  --color-flesh-and-blood-900: #5f001b;
  --color-flesh-and-blood-950: #40000f;
  --color-lush-bamboo: #b5b300;
  --color-lush-bamboo-50: #fdfebc;
  --color-lush-bamboo-100: #f5f7ad;
  --color-lush-bamboo-200: #e4e58b;
  --color-lush-bamboo-300: #d1d165;
  --color-lush-bamboo-400: #b5b300;
  --color-lush-bamboo-500: #969400;
  --color-lush-bamboo-600: #787700;
  --color-lush-bamboo-700: #5f5e00;
  --color-lush-bamboo-800: #494800;
  --color-lush-bamboo-900: #373700;
  --color-lush-bamboo-950: #212100;
  --color-dark-dreams: #342561;
  --color-dark-dreams-50: #f5f4ff;
  --color-dark-dreams-100: #ebe8ff;
  --color-dark-dreams-200: #d7d1ff;
  --color-dark-dreams-300: #c1b8f5;
  --color-dark-dreams-400: #a197da;
  --color-dark-dreams-500: #867abf;
  --color-dark-dreams-600: #6c60a1;
  --color-dark-dreams-700: #554a85;
  --color-dark-dreams-800: #43386b;
  --color-dark-dreams-900: #342561;
  --color-dark-dreams-950: #1f1938;
  --color-freezy-breezy: #9df3ee;
  --color-freezy-breezy-50: #f0fffe;
  --color-freezy-breezy-100: #d0fefb;
  --color-freezy-breezy-200: #9df3ee;
  --color-freezy-breezy-300: #93d7d3;
  --color-freezy-breezy-400: #68b7b3;
  --color-freezy-breezy-500: #449b96;
  --color-freezy-breezy-600: #237e7a;
  --color-freezy-breezy-700: #026461;
  --color-freezy-breezy-800: #004d4b;
  --color-freezy-breezy-900: #003c3a;
  --color-freezy-breezy-950: #002524;
}