Vintage to Everglade color palette

897693Vintage FADBE0Marshmallow Heart 6DA28EEmerald Oasis 7E555CRoyal Fig C8B2D5Moonraker 1F483AEverglade

Open in generator Export PNG, PDF, ASE…

About this palette

Vintage to Everglade is a 6-color muted, cool palette: #897693 (Vintage), #FADBE0 (Marshmallow Heart), #6DA28E (Emerald Oasis), #7E555C (Royal Fig), #C8B2D5 (Moonraker), #1F483A (Everglade). It mixes purple, gray, turquoise, red tones and feels cool overall. The strongest text pairing is #FADBE0 on #1F483A with a contrast ratio of 7.95:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vintage	rgb(137, 118, 147)	hsl(279, 12%, 52%)
Marshmallow Heart	rgb(250, 219, 224)	hsl(350, 76%, 92%)
Emerald Oasis	rgb(109, 162, 142)	hsl(157, 22%, 53%)
Royal Fig	rgb(126, 85, 92)	hsl(350, 19%, 41%)
Moonraker	rgb(200, 178, 213)	hsl(278, 29%, 77%)
Everglade	rgb(31, 72, 58)	hsl(160, 40%, 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.

Aa7.95:1 Very good#FADBE0 on #1F483A
Aa7.95:1 Very good#1F483A on #FADBE0
Aa5.27:1 Good#C8B2D5 on #1F483A
Aa5.27:1 Good#1F483A on #C8B2D5
Aa4.87:1 Good#FADBE0 on #7E555C
Aa4.87:1 Good#7E555C on #FADBE0
Aa3.52:1 Poor#6DA28E on #1F483A
Aa3.52:1 Poor#1F483A on #6DA28E

Color blindness preview

CSS variables

/* Vintage to Everglade — https://swatchly.xyz/palette/897693-fadbe0-6da28e-7e555c-c8b2d5-1f483a */
:root {
  --vintage: #897693;
  --marshmallow-heart: #fadbe0;
  --emerald-oasis: #6da28e;
  --royal-fig: #7e555c;
  --moonraker: #c8b2d5;
  --everglade: #1f483a;
}

Tailwind CSS v4

/* Vintage to Everglade — https://swatchly.xyz/palette/897693-fadbe0-6da28e-7e555c-c8b2d5-1f483a */
@theme {
  --color-vintage: #897693;
  --color-vintage-50: #f9efff;
  --color-vintage-100: #f0e3f7;
  --color-vintage-200: #dccce5;
  --color-vintage-300: #c5b4cf;
  --color-vintage-400: #a692b0;
  --color-vintage-500: #897693;
  --color-vintage-600: #6f5e79;
  --color-vintage-700: #594962;
  --color-vintage-800: #47394e;
  --color-vintage-900: #372b3d;
  --color-vintage-950: #231a27;
  --color-marshmallow-heart: #fadbe0;
  --color-marshmallow-heart-50: #fceaed;
  --color-marshmallow-heart-100: #fadbe0;
  --color-marshmallow-heart-200: #e2cbce;
  --color-marshmallow-heart-300: #cfb5b9;
  --color-marshmallow-heart-400: #b2969b;
  --color-marshmallow-heart-500: #977c80;
  --color-marshmallow-heart-600: #7d6367;
  --color-marshmallow-heart-700: #664e52;
  --color-marshmallow-heart-800: #513c40;
  --color-marshmallow-heart-900: #3f2d31;
  --color-marshmallow-heart-950: #281b1e;
  --color-emerald-oasis: #6da28e;
  --color-emerald-oasis-50: #daf9ec;
  --color-emerald-oasis-100: #caeedf;
  --color-emerald-oasis-200: #afdac9;
  --color-emerald-oasis-300: #92c2b0;
  --color-emerald-oasis-400: #6da28e;
  --color-emerald-oasis-500: #548975;
  --color-emerald-oasis-600: #3e705e;
  --color-emerald-oasis-700: #2c5a4a;
  --color-emerald-oasis-800: #1f483a;
  --color-emerald-oasis-900: #15392d;
  --color-emerald-oasis-950: #0b251c;
  --color-royal-fig: #7e555c;
  --color-royal-fig-50: #fff1f3;
  --color-royal-fig-100: #ffe0e5;
  --color-royal-fig-200: #eec9ce;
  --color-royal-fig-300: #d8afb5;
  --color-royal-fig-400: #b98d94;
  --color-royal-fig-500: #9b7077;
  --color-royal-fig-600: #7e555c;
  --color-royal-fig-700: #654248;
  --color-royal-fig-800: #513338;
  --color-royal-fig-900: #40262b;
  --color-royal-fig-950: #29171a;
  --color-moonraker: #c8b2d5;
  --color-moonraker-50: #f8eeff;
  --color-moonraker-100: #f0e1f9;
  --color-moonraker-200: #ddcce7;
  --color-moonraker-300: #c8b2d5;
  --color-moonraker-400: #a994b5;
  --color-moonraker-500: #8e7a9a;
  --color-moonraker-600: #746180;
  --color-moonraker-700: #5d4c68;
  --color-moonraker-800: #4a3b53;
  --color-moonraker-900: #3a2d42;
  --color-moonraker-950: #241b2a;
  --color-everglade: #1f483a;
  --color-everglade-50: #e3fcf2;
  --color-everglade-100: #d7f3e7;
  --color-everglade-200: #c0e0d3;
  --color-everglade-300: #a5cabb;
  --color-everglade-400: #82ab9b;
  --color-everglade-500: #658f7f;
  --color-everglade-600: #4b7364;
  --color-everglade-700: #365b4e;
  --color-everglade-800: #1f483a;
  --color-everglade-900: #1b362d;
  --color-everglade-950: #0e221b;
}