Scented Spring to Vibrant Vine Color Palette

About this palette

Scented Spring to Vibrant Vine is a 5-color muted, cool, gradient palette: #EBD5E5 (Scented Spring), #A0B890 (Norway), #7F8F77 (Toad), #265B59 (Lacrosse), #46373F (Vibrant Vine). It mixes gray, green, turquoise tones and feels cool overall. The strongest text pairing is #EBD5E5 on #46373F with a contrast ratio of 8.08:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Scented Spring	rgb(235, 213, 229)	hsl(316, 35%, 88%)
Norway	rgb(160, 184, 144)	hsl(96, 22%, 64%)
Toad	rgb(127, 143, 119)	hsl(100, 10%, 51%)
Lacrosse	rgb(38, 91, 89)	hsl(178, 41%, 25%)
Vibrant Vine	rgb(70, 55, 63)	hsl(328, 12%, 25%)

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.

Aa8.08:1 Very good#EBD5E5 on #46373F
Aa8.08:1 Very good#46373F on #EBD5E5
Aa5.58:1 Good#EBD5E5 on #265B59
Aa5.58:1 Good#265B59 on #EBD5E5
Aa5.19:1 Good#A0B890 on #46373F
Aa5.19:1 Good#46373F on #A0B890
Aa3.58:1 Poor#A0B890 on #265B59
Aa3.58:1 Poor#265B59 on #A0B890

Color blindness preview

CSS variables

/* Scented Spring to Vibrant Vine — https://swatchly.xyz/palette/ebd5e5-a0b890-7f8f77-265b59-46373f */
:root {
  --scented-spring: #ebd5e5;
  --norway: #a0b890;
  --toad: #7f8f77;
  --lacrosse: #265b59;
  --vibrant-vine: #46373f;
}

Tailwind CSS v4

/* Scented Spring to Vibrant Vine — https://swatchly.xyz/palette/ebd5e5-a0b890-7f8f77-265b59-46373f */
@theme {
  --color-scented-spring: #ebd5e5;
  --color-scented-spring-50: #fff5fc;
  --color-scented-spring-100: #f8ebf4;
  --color-scented-spring-200: #ebd5e5;
  --color-scented-spring-300: #d1bfcc;
  --color-scented-spring-400: #b29eac;
  --color-scented-spring-500: #958190;
  --color-scented-spring-600: #7a6775;
  --color-scented-spring-700: #61505d;
  --color-scented-spring-800: #4c3d48;
  --color-scented-spring-900: #3b2e38;
  --color-scented-spring-950: #251c23;
  --color-norway: #a0b890;
  --color-norway-50: #f2ffea;
  --color-norway-100: #e9f8e0;
  --color-norway-200: #d6e8cb;
  --color-norway-300: #c0d4b3;
  --color-norway-400: #a0b890;
  --color-norway-500: #839a73;
  --color-norway-600: #667c57;
  --color-norway-700: #4e6340;
  --color-norway-800: #3b4c2f;
  --color-norway-900: #2b3a21;
  --color-norway-950: #192311;
  --color-toad: #7f8f77;
  --color-toad-50: #f0f9eb;
  --color-toad-100: #e5f0e0;
  --color-toad-200: #d1decb;
  --color-toad-300: #bac8b3;
  --color-toad-400: #9aaa92;
  --color-toad-500: #7f8f77;
  --color-toad-600: #65745d;
  --color-toad-700: #4e5c47;
  --color-toad-800: #3c4836;
  --color-toad-900: #2d3728;
  --color-toad-950: #1b2217;
  --color-lacrosse: #265b59;
  --color-lacrosse-50: #dffcfa;
  --color-lacrosse-100: #d2f3f1;
  --color-lacrosse-200: #b8e0de;
  --color-lacrosse-300: #9ccac7;
  --color-lacrosse-400: #77aaa8;
  --color-lacrosse-500: #5a8e8c;
  --color-lacrosse-600: #407270;
  --color-lacrosse-700: #265b59;
  --color-lacrosse-800: #1e4745;
  --color-lacrosse-900: #133736;
  --color-lacrosse-950: #092221;
  --color-vibrant-vine: #46373f;
  --color-vibrant-vine-50: #fcf2f7;
  --color-vibrant-vine-100: #f3e7ed;
  --color-vibrant-vine-200: #e1d3da;
  --color-vibrant-vine-300: #cabac3;
  --color-vibrant-vine-400: #ab99a2;
  --color-vibrant-vine-500: #8e7d86;
  --color-vibrant-vine-600: #72626a;
  --color-vibrant-vine-700: #594b53;
  --color-vibrant-vine-800: #46373f;
  --color-vibrant-vine-900: #352a30;
  --color-vibrant-vine-950: #20191d;
}