Forestial Outpost to Extraviolet color palette

5A6300Forestial Outpost 46C5E3Caribbean Blue FFD7D2We Peep CF4738Bloody Salmon 9F7FEEPeriwinkle 600C8DExtraviolet

Open in generator Export PNG, PDF, ASE…

About this palette

Forestial Outpost to Extraviolet is a 6-color cool palette: #5A6300 (Forestial Outpost), #46C5E3 (Caribbean Blue), #FFD7D2 (We Peep), #CF4738 (Bloody Salmon), #9F7FEE (Periwinkle), #600C8D (Extraviolet). It mixes green, blue, pink, red, purple tones and feels cool overall. The strongest text pairing is #FFD7D2 on #600C8D with a contrast ratio of 8.22:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Forestial Outpost	rgb(90, 99, 0)	hsl(65, 100%, 19%)
Caribbean Blue	rgb(70, 197, 227)	hsl(191, 74%, 58%)
We Peep	rgb(255, 215, 210)	hsl(7, 100%, 91%)
Bloody Salmon	rgb(207, 71, 56)	hsl(6, 61%, 52%)
Periwinkle	rgb(159, 127, 238)	hsl(257, 77%, 72%)
Extraviolet	rgb(96, 12, 141)	hsl(279, 84%, 30%)

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.22:1 Very good#FFD7D2 on #600C8D
Aa8.22:1 Very good#600C8D on #FFD7D2
Aa5.35:1 Good#46C5E3 on #600C8D
Aa5.35:1 Good#600C8D on #46C5E3
Aa4.94:1 Good#5A6300 on #FFD7D2
Aa4.94:1 Good#FFD7D2 on #5A6300
Aa3.49:1 Poor#9F7FEE on #600C8D
Aa3.49:1 Poor#600C8D on #9F7FEE

Color blindness preview

CSS variables

/* Forestial Outpost to Extraviolet — https://swatchly.xyz/palette/5a6300-46c5e3-ffd7d2-cf4738-9f7fee-600c8d */
:root {
  --forestial-outpost: #5a6300;
  --caribbean-blue: #46c5e3;
  --we-peep: #ffd7d2;
  --bloody-salmon: #cf4738;
  --periwinkle: #9f7fee;
  --extraviolet: #600c8d;
}

Tailwind CSS v4

/* Forestial Outpost to Extraviolet — https://swatchly.xyz/palette/5a6300-46c5e3-ffd7d2-cf4738-9f7fee-600c8d */
@theme {
  --color-forestial-outpost: #5a6300;
  --color-forestial-outpost-50: #f3fbce;
  --color-forestial-outpost-100: #e8f1be;
  --color-forestial-outpost-200: #d6e0a4;
  --color-forestial-outpost-300: #c0cb86;
  --color-forestial-outpost-400: #a2ae60;
  --color-forestial-outpost-500: #889341;
  --color-forestial-outpost-600: #6f7925;
  --color-forestial-outpost-700: #5a6300;
  --color-forestial-outpost-800: #464d00;
  --color-forestial-outpost-900: #363b00;
  --color-forestial-outpost-950: #212500;
  --color-caribbean-blue: #46c5e3;
  --color-caribbean-blue-50: #d2f5ff;
  --color-caribbean-blue-100: #aeedff;
  --color-caribbean-blue-200: #80dbf3;
  --color-caribbean-blue-300: #46c5e3;
  --color-caribbean-blue-400: #1ea7c4;
  --color-caribbean-blue-500: #008ca6;
  --color-caribbean-blue-600: #007287;
  --color-caribbean-blue-700: #005b6d;
  --color-caribbean-blue-800: #004957;
  --color-caribbean-blue-900: #003a46;
  --color-caribbean-blue-950: #00242c;
  --color-we-peep: #ffd7d2;
  --color-we-peep-50: #ffe7e4;
  --color-we-peep-100: #ffd7d2;
  --color-we-peep-200: #e6c7c4;
  --color-we-peep-300: #d4b2ad;
  --color-we-peep-400: #b7938f;
  --color-we-peep-500: #9d7975;
  --color-we-peep-600: #83615d;
  --color-we-peep-700: #6b4c49;
  --color-we-peep-800: #553b38;
  --color-we-peep-900: #432c2a;
  --color-we-peep-950: #2b1a19;
  --color-bloody-salmon: #cf4738;
  --color-bloody-salmon-50: #ffefec;
  --color-bloody-salmon-100: #ffdfd9;
  --color-bloody-salmon-200: #ffc0b6;
  --color-bloody-salmon-300: #ff9a8a;
  --color-bloody-salmon-400: #ef6857;
  --color-bloody-salmon-500: #cf4738;
  --color-bloody-salmon-600: #af2d21;
  --color-bloody-salmon-700: #921910;
  --color-bloody-salmon-800: #770904;
  --color-bloody-salmon-900: #600100;
  --color-bloody-salmon-950: #400000;
  --color-periwinkle: #9f7fee;
  --color-periwinkle-50: #f2efff;
  --color-periwinkle-100: #e7e0ff;
  --color-periwinkle-200: #d3c6ff;
  --color-periwinkle-300: #bda7ff;
  --color-periwinkle-400: #9f7fee;
  --color-periwinkle-500: #8665d1;
  --color-periwinkle-600: #6e4db3;
  --color-periwinkle-700: #583996;
  --color-periwinkle-800: #462a7c;
  --color-periwinkle-900: #381f65;
  --color-periwinkle-950: #241145;
  --color-extraviolet: #600c8d;
  --color-extraviolet-50: #f9f2ff;
  --color-extraviolet-100: #f2e5ff;
  --color-extraviolet-200: #e6caff;
  --color-extraviolet-300: #d8abff;
  --color-extraviolet-400: #c27ef6;
  --color-extraviolet-500: #a760db;
  --color-extraviolet-600: #8b45bc;
  --color-extraviolet-700: #72309e;
  --color-extraviolet-800: #600c8d;
  --color-extraviolet-900: #481369;
  --color-extraviolet-950: #2f0846;
}