Botanical Night to Blackberry Yoghurt color palette

203B2EBotanical Night 3F5A76Dark Blue 9B846DTahini Brown 8EC3ADSeaborn E3BCDBBlackberry Yoghurt

About this palette

Botanical Night to Blackberry Yoghurt is a 5-color muted, cool, vintage palette: #203B2E (Botanical Night), #3F5A76 (Dark Blue), #9B846D (Tahini Brown), #8EC3AD (Seaborn), #E3BCDB (Blackberry Yoghurt). It mixes green, blue, orange, turquoise, pink tones and feels cool overall. The strongest text pairing is #203B2E on #E3BCDB with a contrast ratio of 7.23:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Night	rgb(32, 59, 46)	hsl(151, 30%, 18%)
Dark Blue	rgb(63, 90, 118)	hsl(211, 30%, 35%)
Tahini Brown	rgb(155, 132, 109)	hsl(30, 19%, 52%)
Seaborn	rgb(142, 195, 173)	hsl(155, 31%, 66%)
Blackberry Yoghurt	rgb(227, 188, 219)	hsl(312, 41%, 81%)

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.

Aa7.23:1 Very good#203B2E on #E3BCDB
Aa7.23:1 Very good#E3BCDB on #203B2E
Aa6.12:1 Good#203B2E on #8EC3AD
Aa6.12:1 Good#8EC3AD on #203B2E
Aa4.25:1 Poor#3F5A76 on #E3BCDB
Aa4.25:1 Poor#E3BCDB on #3F5A76
Aa3.60:1 Poor#3F5A76 on #8EC3AD
Aa3.60:1 Poor#8EC3AD on #3F5A76

Color blindness preview

CSS variables

/* Botanical Night to Blackberry Yoghurt — https://swatchly.xyz/palette/203b2e-3f5a76-9b846d-8ec3ad-e3bcdb */
:root {
  --botanical-night: #203b2e;
  --dark-blue: #3f5a76;
  --tahini-brown: #9b846d;
  --seaborn: #8ec3ad;
  --blackberry-yoghurt: #e3bcdb;
}

Tailwind CSS v4

/* Botanical Night to Blackberry Yoghurt — https://swatchly.xyz/palette/203b2e-3f5a76-9b846d-8ec3ad-e3bcdb */
@theme {
  --color-botanical-night: #203b2e;
  --color-botanical-night-50: #e9faf1;
  --color-botanical-night-100: #ddf1e6;
  --color-botanical-night-200: #c7ded1;
  --color-botanical-night-300: #aec8ba;
  --color-botanical-night-400: #8daa9a;
  --color-botanical-night-500: #718f7f;
  --color-botanical-night-600: #587466;
  --color-botanical-night-700: #435d50;
  --color-botanical-night-800: #334a3e;
  --color-botanical-night-900: #203b2e;
  --color-botanical-night-950: #16241d;
  --color-dark-blue: #3f5a76;
  --color-dark-blue-50: #eef6ff;
  --color-dark-blue-100: #ddedff;
  --color-dark-blue-200: #c4dbf3;
  --color-dark-blue-300: #abc5e0;
  --color-dark-blue-400: #8aa6c4;
  --color-dark-blue-500: #6e8ba9;
  --color-dark-blue-600: #55708d;
  --color-dark-blue-700: #3f5a76;
  --color-dark-blue-800: #30465d;
  --color-dark-blue-900: #233649;
  --color-dark-blue-950: #14212f;
  --color-tahini-brown: #9b846d;
  --color-tahini-brown-50: #fff3e8;
  --color-tahini-brown-100: #f9e9da;
  --color-tahini-brown-200: #e8d5c3;
  --color-tahini-brown-300: #d3bfaa;
  --color-tahini-brown-400: #b69f89;
  --color-tahini-brown-500: #9b846d;
  --color-tahini-brown-600: #7f6953;
  --color-tahini-brown-700: #66533f;
  --color-tahini-brown-800: #51402e;
  --color-tahini-brown-900: #3f3022;
  --color-tahini-brown-950: #281d13;
  --color-seaborn: #8ec3ad;
  --color-seaborn-50: #d8f8ea;
  --color-seaborn-100: #c9eddd;
  --color-seaborn-200: #afd9c7;
  --color-seaborn-300: #8ec3ad;
  --color-seaborn-400: #72a590;
  --color-seaborn-500: #588b77;
  --color-seaborn-600: #41725f;
  --color-seaborn-700: #2f5c4b;
  --color-seaborn-800: #214a3b;
  --color-seaborn-900: #173b2e;
  --color-seaborn-950: #0b251c;
  --color-blackberry-yoghurt: #e3bcdb;
  --color-blackberry-yoghurt-50: #fff7fd;
  --color-blackberry-yoghurt-100: #ffeafa;
  --color-blackberry-yoghurt-200: #f1d5eb;
  --color-blackberry-yoghurt-300: #e3bcdb;
  --color-blackberry-yoghurt-400: #bf9cb8;
  --color-blackberry-yoghurt-500: #a37f9c;
  --color-blackberry-yoghurt-600: #85637f;
  --color-blackberry-yoghurt-700: #6b4c65;
  --color-blackberry-yoghurt-800: #54394f;
  --color-blackberry-yoghurt-900: #412a3d;
  --color-blackberry-yoghurt-950: #291926;
}