Forestial Outpost to Elite Teal color palette

6C6700Forestial Outpost 7597F4Polar Glow C36B84Prehistoric Pink 6BD9C8Jazzy Jade 4C3C00Pineapple 003132Elite Teal

Open in generator Export PNG, PDF, ASE…

About this palette

Forestial Outpost to Elite Teal is a 6-color vintage palette: #6C6700 (Forestial Outpost), #7597F4 (Polar Glow), #C36B84 (Prehistoric Pink), #6BD9C8 (Jazzy Jade), #4C3C00 (Pineapple), #003132 (Elite Teal). It mixes brown, blue, pink, turquoise tones and feels balanced overall. The strongest text pairing is #6BD9C8 on #003132 with a contrast ratio of 8.34:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Forestial Outpost	rgb(108, 103, 0)	hsl(57, 100%, 21%)
Polar Glow	rgb(117, 151, 244)	hsl(224, 85%, 71%)
Prehistoric Pink	rgb(195, 107, 132)	hsl(343, 42%, 59%)
Jazzy Jade	rgb(107, 217, 200)	hsl(171, 59%, 64%)
Pineapple	rgb(76, 60, 0)	hsl(47, 100%, 15%)
Elite Teal	rgb(0, 49, 50)	hsl(181, 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.

Aa8.34:1 Very good#6BD9C8 on #003132
Aa8.34:1 Very good#003132 on #6BD9C8
Aa6.34:1 Good#6BD9C8 on #4C3C00
Aa6.34:1 Good#4C3C00 on #6BD9C8
Aa5.04:1 Good#7597F4 on #003132
Aa5.04:1 Good#003132 on #7597F4
Aa3.88:1 Poor#C36B84 on #003132
Aa3.88:1 Poor#003132 on #C36B84

Color blindness preview

CSS variables

/* Forestial Outpost to Elite Teal — https://swatchly.xyz/palette/6c6700-7597f4-c36b84-6bd9c8-4c3c00-003132 */
:root {
  --forestial-outpost: #6c6700;
  --polar-glow: #7597f4;
  --prehistoric-pink: #c36b84;
  --jazzy-jade: #6bd9c8;
  --pineapple: #4c3c00;
  --elite-teal: #003132;
}

Tailwind CSS v4

/* Forestial Outpost to Elite Teal — https://swatchly.xyz/palette/6c6700-7597f4-c36b84-6bd9c8-4c3c00-003132 */
@theme {
  --color-forestial-outpost: #6c6700;
  --color-forestial-outpost-50: #faf8cb;
  --color-forestial-outpost-100: #efedb9;
  --color-forestial-outpost-200: #dbd99a;
  --color-forestial-outpost-300: #c4c178;
  --color-forestial-outpost-400: #a4a04e;
  --color-forestial-outpost-500: #88832c;
  --color-forestial-outpost-600: #6c6700;
  --color-forestial-outpost-700: #565100;
  --color-forestial-outpost-800: #434000;
  --color-forestial-outpost-900: #343100;
  --color-forestial-outpost-950: #201e00;
  --color-polar-glow: #7597f4;
  --color-polar-glow-50: #eef3ff;
  --color-polar-glow-100: #dee8ff;
  --color-polar-glow-200: #c1d3ff;
  --color-polar-glow-300: #9fbaff;
  --color-polar-glow-400: #7597f4;
  --color-polar-glow-500: #5c7cd6;
  --color-polar-glow-600: #4562b8;
  --color-polar-glow-700: #334c9a;
  --color-polar-glow-800: #253a7f;
  --color-polar-glow-900: #1b2c66;
  --color-polar-glow-950: #0e1b45;
  --color-prehistoric-pink: #c36b84;
  --color-prehistoric-pink-50: #fff2f5;
  --color-prehistoric-pink-100: #ffe5eb;
  --color-prehistoric-pink-200: #ffc9d6;
  --color-prehistoric-pink-300: #f9aabe;
  --color-prehistoric-pink-400: #de879f;
  --color-prehistoric-pink-500: #c36b84;
  --color-prehistoric-pink-600: #a45069;
  --color-prehistoric-pink-700: #873b52;
  --color-prehistoric-pink-800: #6d2a3f;
  --color-prehistoric-pink-900: #561d30;
  --color-prehistoric-pink-950: #380f1d;
  --color-jazzy-jade: #6bd9c8;
  --color-jazzy-jade-50: #dbfff8;
  --color-jazzy-jade-100: #bdfbf0;
  --color-jazzy-jade-200: #9feadd;
  --color-jazzy-jade-300: #6bd9c8;
  --color-jazzy-jade-400: #4eb7a8;
  --color-jazzy-jade-500: #209c8c;
  --color-jazzy-jade-600: #007e71;
  --color-jazzy-jade-700: #006459;
  --color-jazzy-jade-800: #004e45;
  --color-jazzy-jade-900: #003c35;
  --color-jazzy-jade-950: #002621;
  --color-pineapple: #4c3c00;
  --color-pineapple-50: #fff5d7;
  --color-pineapple-100: #f6ebc9;
  --color-pineapple-200: #e4d7af;
  --color-pineapple-300: #cfbf91;
  --color-pineapple-400: #b09f6c;
  --color-pineapple-500: #94824e;
  --color-pineapple-600: #786734;
  --color-pineapple-700: #5f5021;
  --color-pineapple-800: #4c3c00;
  --color-pineapple-900: #392e0b;
  --color-pineapple-950: #231c04;
  --color-elite-teal: #003132;
  --color-elite-teal-50: #e2fbfb;
  --color-elite-teal-100: #d5f2f2;
  --color-elite-teal-200: #bddfdf;
  --color-elite-teal-300: #a3caca;
  --color-elite-teal-400: #7ea9aa;
  --color-elite-teal-500: #608c8c;
  --color-elite-teal-600: #456f70;
  --color-elite-teal-700: #305657;
  --color-elite-teal-800: #204141;
  --color-elite-teal-900: #003132;
  --color-elite-teal-950: #0a1c1c;
}