Sage the Day to Volcanic Island Color Palette

About this palette

Sage the Day to Volcanic Island is a 4-color muted palette: #A99E8C (Sage the Day), #E3E4FE (Holographic Lavender), #15262B (Sunken Ship), #5F523F (Volcanic Island). It mixes gray, purple tones and feels cool overall. The strongest text pairing is #E3E4FE on #15262B with a contrast ratio of 12.50:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sage the Day	rgb(169, 158, 140)	hsl(37, 14%, 61%)
Holographic Lavender	rgb(227, 228, 254)	hsl(238, 93%, 94%)
Sunken Ship	rgb(21, 38, 43)	hsl(194, 34%, 13%)
Volcanic Island	rgb(95, 82, 63)	hsl(36, 20%, 31%)

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.50:1 Super#E3E4FE on #15262B
Aa12.50:1 Super#15262B on #E3E4FE
Aa6.07:1 Good#E3E4FE on #5F523F
Aa6.07:1 Good#5F523F on #E3E4FE
Aa5.92:1 Good#A99E8C on #15262B
Aa5.92:1 Good#15262B on #A99E8C

Color blindness preview

CSS variables

/* Sage the Day to Volcanic Island — https://swatchly.xyz/palette/a99e8c-e3e4fe-15262b-5f523f */
:root {
  --sage-the-day: #a99e8c;
  --holographic-lavender: #e3e4fe;
  --sunken-ship: #15262b;
  --volcanic-island: #5f523f;
}

Tailwind CSS v4

/* Sage the Day to Volcanic Island — https://swatchly.xyz/palette/a99e8c-e3e4fe-15262b-5f523f */
@theme {
  --color-sage-the-day: #a99e8c;
  --color-sage-the-day-50: #faf4e9;
  --color-sage-the-day-100: #f0e9dd;
  --color-sage-the-day-200: #ded5c7;
  --color-sage-the-day-300: #c8beae;
  --color-sage-the-day-400: #a99e8c;
  --color-sage-the-day-500: #8e8372;
  --color-sage-the-day-600: #736959;
  --color-sage-the-day-700: #5c5344;
  --color-sage-the-day-800: #494134;
  --color-sage-the-day-900: #383226;
  --color-sage-the-day-950: #231f17;
  --color-holographic-lavender: #e3e4fe;
  --color-holographic-lavender-50: #eff0ff;
  --color-holographic-lavender-100: #e3e4fe;
  --color-holographic-lavender-200: #d1d2e5;
  --color-holographic-lavender-300: #bbbcd1;
  --color-holographic-lavender-400: #9c9db4;
  --color-holographic-lavender-500: #82829a;
  --color-holographic-lavender-600: #68697f;
  --color-holographic-lavender-700: #535367;
  --color-holographic-lavender-800: #404052;
  --color-holographic-lavender-900: #313140;
  --color-holographic-lavender-950: #1e1e29;
  --color-sunken-ship: #15262b;
  --color-sunken-ship-50: #ecf8fb;
  --color-sunken-ship-100: #e1eef2;
  --color-sunken-ship-200: #cbdbe0;
  --color-sunken-ship-300: #b3c4ca;
  --color-sunken-ship-400: #92a5ab;
  --color-sunken-ship-500: #778b91;
  --color-sunken-ship-600: #5e7177;
  --color-sunken-ship-700: #4a5b60;
  --color-sunken-ship-800: #39484d;
  --color-sunken-ship-900: #2c393d;
  --color-sunken-ship-950: #15262b;
  --color-volcanic-island: #5f523f;
  --color-volcanic-island-50: #fcf4e8;
  --color-volcanic-island-100: #f3eadc;
  --color-volcanic-island-200: #e1d6c5;
  --color-volcanic-island-300: #cbbfac;
  --color-volcanic-island-400: #ad9f8b;
  --color-volcanic-island-500: #91836f;
  --color-volcanic-island-600: #766955;
  --color-volcanic-island-700: #5f523f;
  --color-volcanic-island-800: #4a4031;
  --color-volcanic-island-900: #393124;
  --color-volcanic-island-950: #241e14;
}