Soft Butter to Indie Go Color Palette

About this palette

Soft Butter to Indie Go is a 5-color cool, earthy palette: #F4E1B5 (Soft Butter), #B4B1F8 (Purple Illusion), #9F7B00 (Bronze), #227A1F (Poblano), #2E1F67 (Indie Go). It mixes yellow, purple, green tones and feels cool overall. The strongest text pairing is #F4E1B5 on #2E1F67 with a contrast ratio of 10.80:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Soft Butter	rgb(244, 225, 181)	hsl(42, 74%, 83%)
Purple Illusion	rgb(180, 177, 248)	hsl(243, 84%, 83%)
Bronze	rgb(159, 123, 0)	hsl(46, 100%, 31%)
Poblano	rgb(34, 122, 31)	hsl(118, 59%, 30%)
Indie Go	rgb(46, 31, 103)	hsl(252, 54%, 26%)

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.80:1 Very good#F4E1B5 on #2E1F67
Aa10.80:1 Very good#2E1F67 on #F4E1B5
Aa7.02:1 Very good#B4B1F8 on #2E1F67
Aa7.02:1 Very good#2E1F67 on #B4B1F8
Aa4.21:1 Poor#F4E1B5 on #227A1F
Aa4.21:1 Poor#227A1F on #F4E1B5
Aa3.52:1 Poor#9F7B00 on #2E1F67
Aa3.52:1 Poor#2E1F67 on #9F7B00

Color blindness preview

CSS variables

/* Soft Butter to Indie Go — https://swatchly.xyz/palette/f4e1b5-b4b1f8-9f7b00-227a1f-2e1f67 */
:root {
  --soft-butter: #f4e1b5;
  --purple-illusion: #b4b1f8;
  --bronze: #9f7b00;
  --poblano: #227a1f;
  --indie-go: #2e1f67;
}

Tailwind CSS v4

/* Soft Butter to Indie Go — https://swatchly.xyz/palette/f4e1b5-b4b1f8-9f7b00-227a1f-2e1f67 */
@theme {
  --color-soft-butter: #f4e1b5;
  --color-soft-butter-50: #f8edd3;
  --color-soft-butter-100: #f4e1b5;
  --color-soft-butter-200: #decfae;
  --color-soft-butter-300: #caba95;
  --color-soft-butter-400: #ad9c73;
  --color-soft-butter-500: #938259;
  --color-soft-butter-600: #796941;
  --color-soft-butter-700: #63532f;
  --color-soft-butter-800: #4e4121;
  --color-soft-butter-900: #3d3116;
  --color-soft-butter-950: #261e0a;
  --color-purple-illusion: #b4b1f8;
  --color-purple-illusion-50: #f0f0ff;
  --color-purple-illusion-100: #e4e4ff;
  --color-purple-illusion-200: #cdccff;
  --color-purple-illusion-300: #b4b1f8;
  --color-purple-illusion-400: #9693d6;
  --color-purple-illusion-500: #7d79bb;
  --color-purple-illusion-600: #645f9e;
  --color-purple-illusion-700: #4f4b84;
  --color-purple-illusion-800: #3e3a6b;
  --color-purple-illusion-900: #302c57;
  --color-purple-illusion-950: #1d1a39;
  --color-bronze: #9f7b00;
  --color-bronze-50: #fff3d7;
  --color-bronze-100: #ffe7ae;
  --color-bronze-200: #eed18c;
  --color-bronze-300: #dab968;
  --color-bronze-400: #bb9838;
  --color-bronze-500: #9f7b00;
  --color-bronze-600: #806300;
  --color-bronze-700: #664e00;
  --color-bronze-800: #513d00;
  --color-bronze-900: #3f2f00;
  --color-bronze-950: #281d00;
  --color-poblano: #227a1f;
  --color-poblano-50: #e1ffde;
  --color-poblano-100: #c6fbc1;
  --color-poblano-200: #a9e9a4;
  --color-poblano-300: #8ad384;
  --color-poblano-400: #62b45d;
  --color-poblano-500: #42973e;
  --color-poblano-600: #227a1f;
  --color-poblano-700: #10620f;
  --color-poblano-800: #014e02;
  --color-poblano-900: #003c00;
  --color-poblano-950: #002600;
  --color-indie-go: #2e1f67;
  --color-indie-go-50: #f4f4ff;
  --color-indie-go-100: #e9e9ff;
  --color-indie-go-200: #d4d2ff;
  --color-indie-go-300: #bcb7ff;
  --color-indie-go-400: #9b95e5;
  --color-indie-go-500: #8078c9;
  --color-indie-go-600: #665da9;
  --color-indie-go-700: #4f478b;
  --color-indie-go-800: #3d3570;
  --color-indie-go-900: #2e1f67;
  --color-indie-go-950: #1b1639;
}