Aster to Forestial Outpost Color Palette

About this palette

Aster to Forestial Outpost is a 4-color cool palette: #8680A8 (Aster), #361811 (Close but No Cigar), #8CE3EF (Aqua Fiesta), #5B6302 (Forestial Outpost). It mixes purple, brown, turquoise, green tones and feels cool overall. The strongest text pairing is #361811 on #8CE3EF with a contrast ratio of 11.08:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aster	rgb(134, 128, 168)	hsl(249, 19%, 58%)
Close but No Cigar	rgb(54, 24, 17)	hsl(11, 52%, 14%)
Aqua Fiesta	rgb(140, 227, 239)	hsl(187, 76%, 74%)
Forestial Outpost	rgb(91, 99, 2)	hsl(65, 96%, 20%)

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.

Aa11.08:1 Very good#361811 on #8CE3EF
Aa11.08:1 Very good#8CE3EF on #361811
Aa4.44:1 Poor#8CE3EF on #5B6302
Aa4.44:1 Poor#5B6302 on #8CE3EF
Aa4.37:1 Poor#8680A8 on #361811
Aa4.37:1 Poor#361811 on #8680A8

Color blindness preview

CSS variables

/* Aster to Forestial Outpost — https://swatchly.xyz/palette/8680a8-361811-8ce3ef-5b6302 */
:root {
  --aster: #8680a8;
  --close-but-no-cigar: #361811;
  --aqua-fiesta: #8ce3ef;
  --forestial-outpost: #5b6302;
}

Tailwind CSS v4

/* Aster to Forestial Outpost — https://swatchly.xyz/palette/8680a8-361811-8ce3ef-5b6302 */
@theme {
  --color-aster: #8680a8;
  --color-aster-50: #f5f3ff;
  --color-aster-100: #ebe8ff;
  --color-aster-200: #d7d3f3;
  --color-aster-300: #c1bce0;
  --color-aster-400: #a19cc3;
  --color-aster-500: #8680a8;
  --color-aster-600: #6c668c;
  --color-aster-700: #555072;
  --color-aster-800: #423e5b;
  --color-aster-900: #332f48;
  --color-aster-950: #1f1c2e;
  --color-close-but-no-cigar: #361811;
  --color-close-but-no-cigar-50: #fff2ef;
  --color-close-but-no-cigar-100: #ffe4de;
  --color-close-but-no-cigar-200: #efcfc8;
  --color-close-but-no-cigar-300: #dbb8af;
  --color-close-but-no-cigar-400: #bd978e;
  --color-close-but-no-cigar-500: #a27c73;
  --color-close-but-no-cigar-600: #87635a;
  --color-close-but-no-cigar-700: #6e4e46;
  --color-close-but-no-cigar-800: #593c35;
  --color-close-but-no-cigar-900: #472e28;
  --color-close-but-no-cigar-950: #361811;
  --color-aqua-fiesta: #8ce3ef;
  --color-aqua-fiesta-50: #d5faff;
  --color-aqua-fiesta-100: #bdf2fa;
  --color-aqua-fiesta-200: #8ce3ef;
  --color-aqua-fiesta-300: #82cbd5;
  --color-aqua-fiesta-400: #5aadb8;
  --color-aqua-fiesta-500: #38929e;
  --color-aqua-fiesta-600: #187883;
  --color-aqua-fiesta-700: #00606a;
  --color-aqua-fiesta-800: #004c54;
  --color-aqua-fiesta-900: #003a41;
  --color-aqua-fiesta-950: #002529;
  --color-forestial-outpost: #5b6302;
  --color-forestial-outpost-50: #f3fbce;
  --color-forestial-outpost-100: #e9f1bf;
  --color-forestial-outpost-200: #d7e0a4;
  --color-forestial-outpost-300: #c1cb87;
  --color-forestial-outpost-400: #a3ad60;
  --color-forestial-outpost-500: #899341;
  --color-forestial-outpost-600: #707926;
  --color-forestial-outpost-700: #5b6302;
  --color-forestial-outpost-800: #474d00;
  --color-forestial-outpost-900: #363b00;
  --color-forestial-outpost-950: #222500;
}