Sage Sensation to Memorial Black color palette

BDDA8FSage Sensation A4AA00Honey and Thyme 9658C6Legendary Lavender 523D72Meteorite 111503Memorial Black

Open in generator Export PNG, PDF, ASE…

About this palette

Sage Sensation to Memorial Black is a 5-color cool palette: #BDDA8F (Sage Sensation), #A4AA00 (Honey and Thyme), #9658C6 (Legendary Lavender), #523D72 (Meteorite), #111503 (Memorial Black). It mixes green, purple, black tones and feels cool overall. The strongest text pairing is #BDDA8F on #111503 with a contrast ratio of 12.00:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sage Sensation	rgb(189, 218, 143)	hsl(83, 50%, 71%)
Honey and Thyme	rgb(164, 170, 0)	hsl(62, 100%, 33%)
Legendary Lavender	rgb(150, 88, 198)	hsl(274, 49%, 56%)
Meteorite	rgb(82, 61, 114)	hsl(264, 30%, 34%)
Memorial Black	rgb(17, 21, 3)	hsl(73, 75%, 5%)

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.

Aa12.00:1 Very good#BDDA8F on #111503
Aa12.00:1 Very good#111503 on #BDDA8F
Aa7.35:1 Very good#A4AA00 on #111503
Aa7.35:1 Very good#111503 on #A4AA00
Aa5.99:1 Good#BDDA8F on #523D72
Aa5.99:1 Good#523D72 on #BDDA8F
Aa3.98:1 Poor#9658C6 on #111503
Aa3.98:1 Poor#111503 on #9658C6

Color blindness preview

CSS variables

/* Sage Sensation to Memorial Black — https://swatchly.xyz/palette/bdda8f-a4aa00-9658c6-523d72-111503 */
:root {
  --sage-sensation: #bdda8f;
  --honey-and-thyme: #a4aa00;
  --legendary-lavender: #9658c6;
  --meteorite: #523d72;
  --memorial-black: #111503;
}

Tailwind CSS v4

/* Sage Sensation to Memorial Black — https://swatchly.xyz/palette/bdda8f-a4aa00-9658c6-523d72-111503 */
@theme {
  --color-sage-sensation: #bdda8f;
  --color-sage-sensation-50: #e4f6ca;
  --color-sage-sensation-100: #d7ecba;
  --color-sage-sensation-200: #bdda8f;
  --color-sage-sensation-300: #aac483;
  --color-sage-sensation-400: #8ca660;
  --color-sage-sensation-500: #728c44;
  --color-sage-sensation-600: #5b732c;
  --color-sage-sensation-700: #475d1a;
  --color-sage-sensation-800: #374a0d;
  --color-sage-sensation-900: #293905;
  --color-sage-sensation-950: #182401;
  --color-honey-and-thyme: #a4aa00;
  --color-honey-and-thyme-50: #f6fcb8;
  --color-honey-and-thyme-100: #ecf2a6;
  --color-honey-and-thyme-200: #d8df83;
  --color-honey-and-thyme-300: #c2c95b;
  --color-honey-and-thyme-400: #a4aa00;
  --color-honey-and-thyme-500: #888d00;
  --color-honey-and-thyme-600: #6e7200;
  --color-honey-and-thyme-700: #575a00;
  --color-honey-and-thyme-800: #444600;
  --color-honey-and-thyme-900: #343600;
  --color-honey-and-thyme-950: #202100;
  --color-legendary-lavender: #9658c6;
  --color-legendary-lavender-50: #f7efff;
  --color-legendary-lavender-100: #efdfff;
  --color-legendary-lavender-200: #e1c1ff;
  --color-legendary-lavender-300: #d29eff;
  --color-legendary-lavender-400: #b477e5;
  --color-legendary-lavender-500: #9658c6;
  --color-legendary-lavender-600: #7c40a8;
  --color-legendary-lavender-700: #652e8c;
  --color-legendary-lavender-800: #512073;
  --color-legendary-lavender-900: #40165d;
  --color-legendary-lavender-950: #2a0b3f;
  --color-meteorite: #523d72;
  --color-meteorite-50: #f7f3ff;
  --color-meteorite-100: #efe6ff;
  --color-meteorite-200: #decefd;
  --color-meteorite-300: #cab8ec;
  --color-meteorite-400: #ad98d2;
  --color-meteorite-500: #937eb8;
  --color-meteorite-600: #7a659d;
  --color-meteorite-700: #645084;
  --color-meteorite-800: #523d72;
  --color-meteorite-900: #3f2f57;
  --color-meteorite-950: #281d3a;
  --color-memorial-black: #111503;
  --color-memorial-black-50: #f3f7e9;
  --color-memorial-black-100: #e9eedd;
  --color-memorial-black-200: #d5dac7;
  --color-memorial-black-300: #bec4ae;
  --color-memorial-black-400: #9fa58d;
  --color-memorial-black-500: #81876f;
  --color-memorial-black-600: #646a53;
  --color-memorial-black-700: #4c513d;
  --color-memorial-black-800: #373b2b;
  --color-memorial-black-900: #26291c;
  --color-memorial-black-950: #111503;
}