Start generating

Forestial Outpost to Violet Heaven color palette

576100Forestial OutpostE8EAFFFoundation White9889BBMagic Carpet48451BAlligator Gladiator847921Green CommandoC5B9FBViolet Heaven
Open in generator Export PNG, PDF, ASE…

About this palette

Forestial Outpost to Violet Heaven is a 6-color palette: #576100 (Forestial Outpost), #E8EAFF (Foundation White), #9889BB (Magic Carpet), #48451B (Alligator Gladiator), #847921 (Green Commando), #C5B9FB (Violet Heaven). It mixes green, white, purple, brown, yellow tones and feels cool overall. The strongest text pairing is #E8EAFF on #48451B with a contrast ratio of 8.23:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Forestial Outpostrgb(87, 97, 0)hsl(66, 100%, 19%)
Foundation Whitergb(232, 234, 255)hsl(235, 100%, 95%)
Magic Carpetrgb(152, 137, 187)hsl(258, 27%, 64%)
Alligator Gladiatorrgb(72, 69, 27)hsl(56, 45%, 19%)
Green Commandorgb(132, 121, 33)hsl(53, 60%, 32%)
Violet Heavenrgb(197, 185, 251)hsl(251, 89%, 85%)

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.23:1 Very good#E8EAFF on #48451B
  • Aa8.23:1 Very good#48451B on #E8EAFF
  • Aa5.66:1 Good#576100 on #E8EAFF
  • Aa5.66:1 Good#E8EAFF on #576100
  • Aa5.46:1 Good#48451B on #C5B9FB
  • Aa5.46:1 Good#C5B9FB on #48451B
  • Aa3.76:1 Poor#576100 on #C5B9FB
  • Aa3.76:1 Poor#C5B9FB on #576100

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Forestial Outpost to Violet Heaven — https://swatchly.xyz/palette/576100-e8eaff-9889bb-48451b-847921-c5b9fb */
:root {
  --forestial-outpost: #576100;
  --foundation-white: #e8eaff;
  --magic-carpet: #9889bb;
  --alligator-gladiator: #48451b;
  --green-commando: #847921;
  --violet-heaven: #c5b9fb;
}

Tailwind CSS v4

/* Forestial Outpost to Violet Heaven — https://swatchly.xyz/palette/576100-e8eaff-9889bb-48451b-847921-c5b9fb */
@theme {
  --color-forestial-outpost: #576100;
  --color-forestial-outpost-50: #f2fbce;
  --color-forestial-outpost-100: #e8f2bf;
  --color-forestial-outpost-200: #d5e0a4;
  --color-forestial-outpost-300: #bfcb86;
  --color-forestial-outpost-400: #a0ad60;
  --color-forestial-outpost-500: #869241;
  --color-forestial-outpost-600: #6d7725;
  --color-forestial-outpost-700: #576100;
  --color-forestial-outpost-800: #444c00;
  --color-forestial-outpost-900: #343a00;
  --color-forestial-outpost-950: #202400;
  --color-foundation-white: #e8eaff;
  --color-foundation-white-50: #f4f5ff;
  --color-foundation-white-100: #e8eaff;
  --color-foundation-white-200: #d5d7e6;
  --color-foundation-white-300: #bec0d1;
  --color-foundation-white-400: #9ea0b3;
  --color-foundation-white-500: #838598;
  --color-foundation-white-600: #696a7c;
  --color-foundation-white-700: #525464;
  --color-foundation-white-800: #40414f;
  --color-foundation-white-900: #31323e;
  --color-foundation-white-950: #1e1e27;
  --color-magic-carpet: #9889bb;
  --color-magic-carpet-50: #f8f6ff;
  --color-magic-carpet-100: #f1edff;
  --color-magic-carpet-200: #e2d7fd;
  --color-magic-carpet-300: #cec2ed;
  --color-magic-carpet-400: #b1a3d3;
  --color-magic-carpet-500: #9889bb;
  --color-magic-carpet-600: #7b6c9c;
  --color-magic-carpet-700: #625480;
  --color-magic-carpet-800: #4c4066;
  --color-magic-carpet-900: #3a3050;
  --color-magic-carpet-950: #231c33;
  --color-alligator-gladiator: #48451b;
  --color-alligator-gladiator-50: #f8f7dd;
  --color-alligator-gladiator-100: #eeedd0;
  --color-alligator-gladiator-200: #dbdab8;
  --color-alligator-gladiator-300: #c5c49d;
  --color-alligator-gladiator-400: #a7a47a;
  --color-alligator-gladiator-500: #8c895e;
  --color-alligator-gladiator-600: #716f45;
  --color-alligator-gladiator-700: #5a5832;
  --color-alligator-gladiator-800: #48451b;
  --color-alligator-gladiator-900: #373518;
  --color-alligator-gladiator-950: #22210c;
  --color-green-commando: #847921;
  --color-green-commando-50: #fcf7cb;
  --color-green-commando-100: #f5f0be;
  --color-green-commando-200: #e5dea4;
  --color-green-commando-300: #d2ca87;
  --color-green-commando-400: #b6ac5f;
  --color-green-commando-500: #9d923f;
  --color-green-commando-600: #847921;
  --color-green-commando-700: #6a6000;
  --color-green-commando-800: #534a00;
  --color-green-commando-900: #3f3900;
  --color-green-commando-950: #282300;
  --color-violet-heaven: #c5b9fb;
  --color-violet-heaven-50: #f6f5ff;
  --color-violet-heaven-100: #edeaff;
  --color-violet-heaven-200: #dad3ff;
  --color-violet-heaven-300: #c5b9fb;
  --color-violet-heaven-400: #a59ad7;
  --color-violet-heaven-500: #897dbb;
  --color-violet-heaven-600: #6f639d;
  --color-violet-heaven-700: #584c82;
  --color-violet-heaven-800: #443a68;
  --color-violet-heaven-900: #342b52;
  --color-violet-heaven-950: #201a36;
}

Similar palettes