Indie Go to Spicy Sweetcorn color palette

292361Indie Go 63489FUltrapurple Merge 9B7A00Fernweh E0FCCFHerbal Vapours F7AF00Spicy Sweetcorn

About this palette

Indie Go to Spicy Sweetcorn is a 5-color cool, earthy palette: #292361 (Indie Go), #63489F (Ultrapurple Merge), #9B7A00 (Fernweh), #E0FCCF (Herbal Vapours), #F7AF00 (Spicy Sweetcorn). It mixes purple, yellow, green tones and feels cool overall. The strongest text pairing is #292361 on #E0FCCF with a contrast ratio of 12.60:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Indie Go	rgb(41, 35, 97)	hsl(246, 47%, 26%)
Ultrapurple Merge	rgb(99, 72, 159)	hsl(259, 38%, 45%)
Fernweh	rgb(155, 122, 0)	hsl(47, 100%, 30%)
Herbal Vapours	rgb(224, 252, 207)	hsl(97, 88%, 90%)
Spicy Sweetcorn	rgb(247, 175, 0)	hsl(43, 100%, 48%)

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.60:1 Super#292361 on #E0FCCF
Aa12.60:1 Super#E0FCCF on #292361
Aa7.36:1 Very good#292361 on #F7AF00
Aa7.36:1 Very good#F7AF00 on #292361
Aa6.42:1 Good#63489F on #E0FCCF
Aa6.42:1 Good#E0FCCF on #63489F
Aa3.75:1 Poor#63489F on #F7AF00
Aa3.75:1 Poor#F7AF00 on #63489F

Color blindness preview

CSS variables

/* Indie Go to Spicy Sweetcorn — https://swatchly.xyz/palette/292361-63489f-9b7a00-e0fccf-f7af00 */
:root {
  --indie-go: #292361;
  --ultrapurple-merge: #63489f;
  --fernweh: #9b7a00;
  --herbal-vapours: #e0fccf;
  --spicy-sweetcorn: #f7af00;
}

Tailwind CSS v4

/* Indie Go to Spicy Sweetcorn — https://swatchly.xyz/palette/292361-63489f-9b7a00-e0fccf-f7af00 */
@theme {
  --color-indie-go: #292361;
  --color-indie-go-50: #f3f4ff;
  --color-indie-go-100: #e8e9ff;
  --color-indie-go-200: #d1d3ff;
  --color-indie-go-300: #b8bafa;
  --color-indie-go-400: #9799df;
  --color-indie-go-500: #7b7cc2;
  --color-indie-go-600: #6161a3;
  --color-indie-go-700: #4b4a86;
  --color-indie-go-800: #39376b;
  --color-indie-go-900: #292361;
  --color-indie-go-950: #181735;
  --color-ultrapurple-merge: #63489f;
  --color-ultrapurple-merge-50: #f6f3ff;
  --color-ultrapurple-merge-100: #ece7ff;
  --color-ultrapurple-merge-200: #dbd1ff;
  --color-ultrapurple-merge-300: #c8b7ff;
  --color-ultrapurple-merge-400: #ab94ed;
  --color-ultrapurple-merge-500: #9278d4;
  --color-ultrapurple-merge-600: #785fb7;
  --color-ultrapurple-merge-700: #63489f;
  --color-ultrapurple-merge-800: #4e377f;
  --color-ultrapurple-merge-900: #3c2866;
  --color-ultrapurple-merge-950: #261744;
  --color-fernweh: #9b7a00;
  --color-fernweh-50: #fff3d4;
  --color-fernweh-100: #fde7ad;
  --color-fernweh-200: #ebd18c;
  --color-fernweh-300: #d6b867;
  --color-fernweh-400: #b89738;
  --color-fernweh-500: #9b7a00;
  --color-fernweh-600: #7d6200;
  --color-fernweh-700: #644d00;
  --color-fernweh-800: #4f3c00;
  --color-fernweh-900: #3d2f00;
  --color-fernweh-950: #271d00;
  --color-herbal-vapours: #e0fccf;
  --color-herbal-vapours-50: #e0fccf;
  --color-herbal-vapours-100: #ddefd3;
  --color-herbal-vapours-200: #c8ddbc;
  --color-herbal-vapours-300: #b1c8a3;
  --color-herbal-vapours-400: #91aa81;
  --color-herbal-vapours-500: #768f66;
  --color-herbal-vapours-600: #5d744d;
  --color-herbal-vapours-700: #475d39;
  --color-herbal-vapours-800: #36492a;
  --color-herbal-vapours-900: #29381e;
  --color-herbal-vapours-950: #182310;
  --color-spicy-sweetcorn: #f7af00;
  --color-spicy-sweetcorn-50: #fff2de;
  --color-spicy-sweetcorn-100: #ffe6be;
  --color-spicy-sweetcorn-200: #ffcc78;
  --color-spicy-sweetcorn-300: #f7af00;
  --color-spicy-sweetcorn-400: #d09200;
  --color-spicy-sweetcorn-500: #ad7a00;
  --color-spicy-sweetcorn-600: #8c6200;
  --color-spicy-sweetcorn-700: #704d00;
  --color-spicy-sweetcorn-800: #583c00;
  --color-spicy-sweetcorn-900: #452e00;
  --color-spicy-sweetcorn-950: #2c1c00;
}