Girl Crush to Basil Color Palette

About this palette

Girl Crush to Basil is a 4-color muted palette: #D5BFDC (Girl Crush), #776242 (Autumn Gold), #2D3744 (Total Eclipse), #8AA08D (Basil). It mixes purple, brown, gray, green tones and feels cool overall. The strongest text pairing is #D5BFDC on #2D3744 with a contrast ratio of 7.07:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Girl Crush	rgb(213, 191, 220)	hsl(286, 29%, 81%)
Autumn Gold	rgb(119, 98, 66)	hsl(36, 29%, 36%)
Total Eclipse	rgb(45, 55, 68)	hsl(214, 20%, 22%)
Basil	rgb(138, 160, 141)	hsl(128, 10%, 58%)

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.07:1 Very good#D5BFDC on #2D3744
Aa7.07:1 Very good#2D3744 on #D5BFDC
Aa4.30:1 Poor#2D3744 on #8AA08D
Aa4.30:1 Poor#8AA08D on #2D3744
Aa3.41:1 Poor#D5BFDC on #776242
Aa3.41:1 Poor#776242 on #D5BFDC

Color blindness preview

CSS variables

/* Girl Crush to Basil — https://swatchly.xyz/palette/d5bfdc-776242-2d3744-8aa08d */
:root {
  --girl-crush: #d5bfdc;
  --autumn-gold: #776242;
  --total-eclipse: #2d3744;
  --basil: #8aa08d;
}

Tailwind CSS v4

/* Girl Crush to Basil — https://swatchly.xyz/palette/d5bfdc-776242-2d3744-8aa08d */
@theme {
  --color-girl-crush: #d5bfdc;
  --color-girl-crush-50: #fdf6ff;
  --color-girl-crush-100: #f8ebfc;
  --color-girl-crush-200: #e7d7ec;
  --color-girl-crush-300: #d5bfdc;
  --color-girl-crush-400: #b39fb9;
  --color-girl-crush-500: #97829d;
  --color-girl-crush-600: #7a6781;
  --color-girl-crush-700: #625067;
  --color-girl-crush-800: #4c3d51;
  --color-girl-crush-900: #3a2d3e;
  --color-girl-crush-950: #251b28;
  --color-autumn-gold: #776242;
  --color-autumn-gold-50: #fff3e2;
  --color-autumn-gold-100: #f7e8d2;
  --color-autumn-gold-200: #e4d2b8;
  --color-autumn-gold-300: #cfba9c;
  --color-autumn-gold-400: #af9a79;
  --color-autumn-gold-500: #937d5c;
  --color-autumn-gold-600: #776242;
  --color-autumn-gold-700: #5f4d31;
  --color-autumn-gold-800: #4c3c23;
  --color-autumn-gold-900: #3b2e19;
  --color-autumn-gold-950: #251c0d;
  --color-total-eclipse: #2d3744;
  --color-total-eclipse-50: #eff6ff;
  --color-total-eclipse-100: #e4ecf6;
  --color-total-eclipse-200: #cfd8e5;
  --color-total-eclipse-300: #b7c2d0;
  --color-total-eclipse-400: #98a3b2;
  --color-total-eclipse-500: #7d8998;
  --color-total-eclipse-600: #646f7d;
  --color-total-eclipse-700: #4f5966;
  --color-total-eclipse-800: #3d4652;
  --color-total-eclipse-900: #2d3744;
  --color-total-eclipse-950: #1d222a;
  --color-basil: #8aa08d;
  --color-basil-50: #e9f6eb;
  --color-basil-100: #dcecde;
  --color-basil-200: #c5d7c8;
  --color-basil-300: #acc0af;
  --color-basil-400: #8aa08d;
  --color-basil-500: #718674;
  --color-basil-600: #596d5c;
  --color-basil-700: #455748;
  --color-basil-800: #354537;
  --color-basil-900: #28362a;
  --color-basil-950: #18221a;
}