Midnight Pines to In Good Taste color palette

21210BMidnight Pines 11526CNight Kite 486982Stellar AD6178Cinnapink DA8DA5Kiss BCCF97In Good Taste

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Pines to In Good Taste is a 6-color vintage palette: #21210B (Midnight Pines), #11526C (Night Kite), #486982 (Stellar), #AD6178 (Cinnapink), #DA8DA5 (Kiss), #BCCF97 (In Good Taste). It mixes brown, blue, red, pink, green tones and feels balanced overall. The strongest text pairing is #21210B on #BCCF97 with a contrast ratio of 9.72:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Pines	rgb(33, 33, 11)	hsl(60, 50%, 9%)
Night Kite	rgb(17, 82, 108)	hsl(197, 73%, 25%)
Stellar	rgb(72, 105, 130)	hsl(206, 29%, 40%)
Cinnapink	rgb(173, 97, 120)	hsl(342, 32%, 53%)
Kiss	rgb(218, 141, 165)	hsl(341, 51%, 70%)
In Good Taste	rgb(188, 207, 151)	hsl(80, 37%, 70%)

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.

Aa9.72:1 Very good#21210B on #BCCF97
Aa9.72:1 Very good#BCCF97 on #21210B
Aa6.48:1 Good#21210B on #DA8DA5
Aa6.48:1 Good#DA8DA5 on #21210B
Aa5.11:1 Good#11526C on #BCCF97
Aa5.11:1 Good#BCCF97 on #11526C
Aa3.70:1 Poor#21210B on #AD6178
Aa3.70:1 Poor#AD6178 on #21210B

Color blindness preview

CSS variables

/* Midnight Pines to In Good Taste — https://swatchly.xyz/palette/21210b-11526c-486982-ad6178-da8da5-bccf97 */
:root {
  --midnight-pines: #21210b;
  --night-kite: #11526c;
  --stellar: #486982;
  --cinnapink: #ad6178;
  --kiss: #da8da5;
  --in-good-taste: #bccf97;
}

Tailwind CSS v4

/* Midnight Pines to In Good Taste — https://swatchly.xyz/palette/21210b-11526c-486982-ad6178-da8da5-bccf97 */
@theme {
  --color-midnight-pines: #21210b;
  --color-midnight-pines-50: #f6f7e7;
  --color-midnight-pines-100: #eceddc;
  --color-midnight-pines-200: #d8d9c5;
  --color-midnight-pines-300: #c2c3ac;
  --color-midnight-pines-400: #a3a48b;
  --color-midnight-pines-500: #88886f;
  --color-midnight-pines-600: #6d6e56;
  --color-midnight-pines-700: #575741;
  --color-midnight-pines-800: #444431;
  --color-midnight-pines-900: #343424;
  --color-midnight-pines-950: #21210b;
  --color-night-kite: #11526c;
  --color-night-kite-50: #eaf8ff;
  --color-night-kite-100: #d4f0ff;
  --color-night-kite-200: #b3dff6;
  --color-night-kite-300: #99cbe4;
  --color-night-kite-400: #75aeca;
  --color-night-kite-500: #5994b0;
  --color-night-kite-600: #3f7a96;
  --color-night-kite-700: #2c647d;
  --color-night-kite-800: #11526c;
  --color-night-kite-900: #113f53;
  --color-night-kite-950: #062837;
  --color-stellar: #486982;
  --color-stellar-50: #ecf7ff;
  --color-stellar-100: #d7edff;
  --color-stellar-200: #bed9ee;
  --color-stellar-300: #a3c2da;
  --color-stellar-400: #7fa1bb;
  --color-stellar-500: #63859f;
  --color-stellar-600: #486982;
  --color-stellar-700: #365369;
  --color-stellar-800: #284154;
  --color-stellar-900: #1d3242;
  --color-stellar-950: #101f2b;
  --color-cinnapink: #ad6178;
  --color-cinnapink-50: #ffeef2;
  --color-cinnapink-100: #ffdde6;
  --color-cinnapink-200: #ffbdce;
  --color-cinnapink-300: #eba2b6;
  --color-cinnapink-400: #cc7e95;
  --color-cinnapink-500: #ad6178;
  --color-cinnapink-600: #914a60;
  --color-cinnapink-700: #77374c;
  --color-cinnapink-800: #60293b;
  --color-cinnapink-900: #4d1e2d;
  --color-cinnapink-950: #33111c;
  --color-kiss: #da8da5;
  --color-kiss-50: #fff4f7;
  --color-kiss-100: #ffe7ed;
  --color-kiss-200: #ffcbda;
  --color-kiss-300: #f3b0c4;
  --color-kiss-400: #da8da5;
  --color-kiss-500: #bb7189;
  --color-kiss-600: #9c566d;
  --color-kiss-700: #804056;
  --color-kiss-800: #672f42;
  --color-kiss-900: #512232;
  --color-kiss-950: #34121e;
  --color-in-good-taste: #bccf97;
  --color-in-good-taste-50: #f2fddf;
  --color-in-good-taste-100: #e8f4d3;
  --color-in-good-taste-200: #d4e3ba;
  --color-in-good-taste-300: #bccf97;
  --color-in-good-taste-400: #9cae7a;
  --color-in-good-taste-500: #80915c;
  --color-in-good-taste-600: #657642;
  --color-in-good-taste-700: #4f5d2e;
  --color-in-good-taste-800: #3c491f;
  --color-in-good-taste-900: #2d3814;
  --color-in-good-taste-950: #1b2309;
}