Mountain View to Seedling Color Palette

About this palette

Mountain View to Seedling is a 4-color muted, warm, earthy, vintage, gradient palette: #3C4C38 (Mountain View), #86765A (Mink), #AB9261 (Caramel Gold), #C7CBA4 (Seedling). It mixes green, yellow tones and feels warm overall. The strongest text pairing is #3C4C38 on #C7CBA4 with a contrast ratio of 5.48:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mountain View	rgb(60, 76, 56)	hsl(108, 15%, 26%)
Mink	rgb(134, 118, 90)	hsl(38, 20%, 44%)
Caramel Gold	rgb(171, 146, 97)	hsl(40, 31%, 53%)
Seedling	rgb(199, 203, 164)	hsl(66, 27%, 72%)

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.

Aa5.48:1 Good#3C4C38 on #C7CBA4
Aa5.48:1 Good#C7CBA4 on #3C4C38
Aa3.07:1 Poor#3C4C38 on #AB9261
Aa3.07:1 Poor#AB9261 on #3C4C38

Color blindness preview

CSS variables

/* Mountain View to Seedling — https://swatchly.xyz/palette/3c4c38-86765a-ab9261-c7cba4 */
:root {
  --mountain-view: #3c4c38;
  --mink: #86765a;
  --caramel-gold: #ab9261;
  --seedling: #c7cba4;
}

Tailwind CSS v4

/* Mountain View to Seedling — https://swatchly.xyz/palette/3c4c38-86765a-ab9261-c7cba4 */
@theme {
  --color-mountain-view: #3c4c38;
  --color-mountain-view-50: #eef9eb;
  --color-mountain-view-100: #e3efe0;
  --color-mountain-view-200: #cedccb;
  --color-mountain-view-300: #b7c7b3;
  --color-mountain-view-400: #98a993;
  --color-mountain-view-500: #7d8f78;
  --color-mountain-view-600: #64755f;
  --color-mountain-view-700: #4f5e4b;
  --color-mountain-view-800: #3c4c38;
  --color-mountain-view-900: #2e3a2c;
  --color-mountain-view-950: #1c251a;
  --color-mink: #86765a;
  --color-mink-50: #fef4e3;
  --color-mink-100: #f7ecda;
  --color-mink-200: #e7dbc5;
  --color-mink-300: #d4c6ad;
  --color-mink-400: #b8a88d;
  --color-mink-500: #9f8f72;
  --color-mink-600: #86765a;
  --color-mink-700: #6c5d43;
  --color-mink-800: #554831;
  --color-mink-900: #423723;
  --color-mink-950: #292113;
  --color-caramel-gold: #ab9261;
  --color-caramel-gold-50: #ffefd2;
  --color-caramel-gold-100: #f4e3c1;
  --color-caramel-gold-200: #e1cda5;
  --color-caramel-gold-300: #cbb487;
  --color-caramel-gold-400: #ab9261;
  --color-caramel-gold-500: #917949;
  --color-caramel-gold-600: #786132;
  --color-caramel-gold-700: #614d22;
  --color-caramel-gold-800: #4e3c16;
  --color-caramel-gold-900: #3e2f0d;
  --color-caramel-gold-950: #291d05;
  --color-seedling: #c7cba4;
  --color-seedling-50: #f8fbe6;
  --color-seedling-100: #eff2da;
  --color-seedling-200: #dde0c4;
  --color-seedling-300: #c7cba4;
  --color-seedling-400: #a6aa86;
  --color-seedling-500: #8a8e69;
  --color-seedling-600: #6f724f;
  --color-seedling-700: #575a3a;
  --color-seedling-800: #43462a;
  --color-seedling-900: #33351d;
  --color-seedling-950: #1f2110;
}