Seedling to Midnight Pines Color Palette

About this palette

Seedling to Midnight Pines is a 4-color cool palette: #C6C99D (Seedling), #AF6BAF (Lavendless), #364D96 (Nightly Activities), #222610 (Midnight Pines). It mixes yellow, pink, blue, green tones and feels cool overall. The strongest text pairing is #C6C99D on #222610 with a contrast ratio of 9.05:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seedling	rgb(198, 201, 157)	hsl(64, 29%, 70%)
Lavendless	rgb(175, 107, 175)	hsl(300, 30%, 55%)
Nightly Activities	rgb(54, 77, 150)	hsl(226, 47%, 40%)
Midnight Pines	rgb(34, 38, 16)	hsl(71, 41%, 11%)

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.05:1 Very good#C6C99D on #222610
Aa9.05:1 Very good#222610 on #C6C99D
Aa4.60:1 Good#C6C99D on #364D96
Aa4.60:1 Good#364D96 on #C6C99D
Aa4.10:1 Poor#AF6BAF on #222610
Aa4.10:1 Poor#222610 on #AF6BAF

Color blindness preview

CSS variables

/* Seedling to Midnight Pines — https://swatchly.xyz/palette/c6c99d-af6baf-364d96-222610 */
:root {
  --seedling: #c6c99d;
  --lavendless: #af6baf;
  --nightly-activities: #364d96;
  --midnight-pines: #222610;
}

Tailwind CSS v4

/* Seedling to Midnight Pines — https://swatchly.xyz/palette/c6c99d-af6baf-364d96-222610 */
@theme {
  --color-seedling: #c6c99d;
  --color-seedling-50: #f8fae2;
  --color-seedling-100: #eef1d6;
  --color-seedling-200: #dcdebe;
  --color-seedling-300: #c6c99d;
  --color-seedling-400: #a6a880;
  --color-seedling-500: #8a8c63;
  --color-seedling-600: #6f7149;
  --color-seedling-700: #585935;
  --color-seedling-800: #444525;
  --color-seedling-900: #34351a;
  --color-seedling-950: #20210d;
  --color-lavendless: #af6baf;
  --color-lavendless-50: #fff0fe;
  --color-lavendless-100: #ffe0fe;
  --color-lavendless-200: #fac3f8;
  --color-lavendless-300: #e7aae6;
  --color-lavendless-400: #ca87ca;
  --color-lavendless-500: #af6baf;
  --color-lavendless-600: #925192;
  --color-lavendless-700: #773c78;
  --color-lavendless-800: #5f2b60;
  --color-lavendless-900: #4b1f4c;
  --color-lavendless-950: #301131;
  --color-nightly-activities: #364d96;
  --color-nightly-activities-50: #f1f5ff;
  --color-nightly-activities-100: #e3ebff;
  --color-nightly-activities-200: #c6d6ff;
  --color-nightly-activities-300: #a5beff;
  --color-nightly-activities-400: #819dea;
  --color-nightly-activities-500: #6580ce;
  --color-nightly-activities-600: #4c65af;
  --color-nightly-activities-700: #364d96;
  --color-nightly-activities-800: #293c76;
  --color-nightly-activities-900: #1e2d5e;
  --color-nightly-activities-950: #101b3e;
  --color-midnight-pines: #222610;
  --color-midnight-pines-50: #f4f7e8;
  --color-midnight-pines-100: #e9eedc;
  --color-midnight-pines-200: #d6dac6;
  --color-midnight-pines-300: #bfc4ad;
  --color-midnight-pines-400: #9fa58c;
  --color-midnight-pines-500: #858a71;
  --color-midnight-pines-600: #6b7158;
  --color-midnight-pines-700: #565b44;
  --color-midnight-pines-800: #444834;
  --color-midnight-pines-900: #353928;
  --color-midnight-pines-950: #222610;
}