Basil Smash to Medium Roast Color Palette

About this palette

Basil Smash to Medium Roast is a 5-color cool, earthy, vintage palette: #B5E3A8 (Basil Smash), #C3905E (Butterum), #6E659E (Scampi), #423575 (Galactic Compass), #342300 (Medium Roast). It mixes green, orange, purple, brown tones and feels cool overall. The strongest text pairing is #B5E3A8 on #342300 with a contrast ratio of 10.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Basil Smash	rgb(181, 227, 168)	hsl(107, 51%, 77%)
Butterum	rgb(195, 144, 94)	hsl(30, 46%, 57%)
Scampi	rgb(110, 101, 158)	hsl(249, 23%, 51%)
Galactic Compass	rgb(66, 53, 117)	hsl(252, 38%, 33%)
Medium Roast	rgb(52, 35, 0)	hsl(40, 100%, 10%)

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.

Aa10.47:1 Very good#B5E3A8 on #342300
Aa10.47:1 Very good#342300 on #B5E3A8
Aa7.27:1 Very good#B5E3A8 on #423575
Aa7.27:1 Very good#423575 on #B5E3A8
Aa5.39:1 Good#C3905E on #342300
Aa5.39:1 Good#342300 on #C3905E
Aa3.74:1 Poor#C3905E on #423575
Aa3.74:1 Poor#423575 on #C3905E

Color blindness preview

CSS variables

/* Basil Smash to Medium Roast — https://swatchly.xyz/palette/b5e3a8-c3905e-6e659e-423575-342300 */
:root {
  --basil-smash: #b5e3a8;
  --butterum: #c3905e;
  --scampi: #6e659e;
  --galactic-compass: #423575;
  --medium-roast: #342300;
}

Tailwind CSS v4

/* Basil Smash to Medium Roast — https://swatchly.xyz/palette/b5e3a8-c3905e-6e659e-423575-342300 */
@theme {
  --color-basil-smash: #b5e3a8;
  --color-basil-smash-50: #e1fcda;
  --color-basil-smash-100: #d5f2cc;
  --color-basil-smash-200: #b5e3a8;
  --color-basil-smash-300: #a4cb99;
  --color-basil-smash-400: #83ad76;
  --color-basil-smash-500: #67925b;
  --color-basil-smash-600: #4f7743;
  --color-basil-smash-700: #3b6030;
  --color-basil-smash-800: #2b4c22;
  --color-basil-smash-900: #1f3b17;
  --color-basil-smash-950: #11250b;
  --color-butterum: #c3905e;
  --color-butterum-50: #fff0e3;
  --color-butterum-100: #ffe2c8;
  --color-butterum-200: #f4cba4;
  --color-butterum-300: #e0b286;
  --color-butterum-400: #c3905e;
  --color-butterum-500: #a77644;
  --color-butterum-600: #8b5d2c;
  --color-butterum-700: #72481a;
  --color-butterum-800: #5c370d;
  --color-butterum-900: #492a05;
  --color-butterum-950: #301901;
  --color-scampi: #6e659e;
  --color-scampi-50: #f5f4ff;
  --color-scampi-100: #ebe9ff;
  --color-scampi-200: #d7d2ff;
  --color-scampi-300: #c1bbf0;
  --color-scampi-400: #a29bd5;
  --color-scampi-500: #887fba;
  --color-scampi-600: #6e659e;
  --color-scampi-700: #574f82;
  --color-scampi-800: #443c69;
  --color-scampi-900: #342d53;
  --color-scampi-950: #201b36;
  --color-galactic-compass: #423575;
  --color-galactic-compass-50: #f5f4ff;
  --color-galactic-compass-100: #eae8ff;
  --color-galactic-compass-200: #d6d1ff;
  --color-galactic-compass-300: #bfb7f8;
  --color-galactic-compass-400: #a096dc;
  --color-galactic-compass-500: #857ac1;
  --color-galactic-compass-600: #6b60a3;
  --color-galactic-compass-700: #544a87;
  --color-galactic-compass-800: #423575;
  --color-galactic-compass-900: #322a57;
  --color-galactic-compass-950: #1f1939;
  --color-medium-roast: #342300;
  --color-medium-roast-50: #fff4e0;
  --color-medium-roast-100: #f7e9d2;
  --color-medium-roast-200: #e5d5b9;
  --color-medium-roast-300: #d1be9f;
  --color-medium-roast-400: #b39f7c;
  --color-medium-roast-500: #998561;
  --color-medium-roast-600: #7f6c49;
  --color-medium-roast-700: #685737;
  --color-medium-roast-800: #554528;
  --color-medium-roast-900: #45371e;
  --color-medium-roast-950: #342300;
}