Milk Foam to Indie Go Color Palette

About this palette

Milk Foam to Indie Go is a 5-color cool palette: #EEFFE3 (Milk Foam), #FFAD54 (Five Star), #C27B0B (Caramel Coating), #3F5197 (Nightly Activities), #2A2866 (Indie Go). It mixes white, orange, blue, purple tones and feels cool overall. The strongest text pairing is #EEFFE3 on #2A2866 with a contrast ratio of 12.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Milk Foam	rgb(238, 255, 227)	hsl(96, 100%, 95%)
Five Star	rgb(255, 173, 84)	hsl(31, 100%, 66%)
Caramel Coating	rgb(194, 123, 11)	hsl(37, 89%, 40%)
Nightly Activities	rgb(63, 81, 151)	hsl(228, 41%, 42%)
Indie Go	rgb(42, 40, 102)	hsl(242, 44%, 28%)

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.58:1 Super#EEFFE3 on #2A2866
Aa12.58:1 Super#2A2866 on #EEFFE3
Aa7.13:1 Very good#FFAD54 on #2A2866
Aa7.13:1 Very good#2A2866 on #FFAD54
Aa7.07:1 Very good#EEFFE3 on #3F5197
Aa7.07:1 Very good#3F5197 on #EEFFE3
Aa4.01:1 Poor#FFAD54 on #3F5197
Aa4.01:1 Poor#3F5197 on #FFAD54

Color blindness preview

CSS variables

/* Milk Foam to Indie Go — https://swatchly.xyz/palette/eeffe3-ffad54-c27b0b-3f5197-2a2866 */
:root {
  --milk-foam: #eeffe3;
  --five-star: #ffad54;
  --caramel-coating: #c27b0b;
  --nightly-activities: #3f5197;
  --indie-go: #2a2866;
}

Tailwind CSS v4

/* Milk Foam to Indie Go — https://swatchly.xyz/palette/eeffe3-ffad54-c27b0b-3f5197-2a2866 */
@theme {
  --color-milk-foam: #eeffe3;
  --color-milk-foam-50: #eeffe3;
  --color-milk-foam-100: #e8f2e1;
  --color-milk-foam-200: #d2deca;
  --color-milk-foam-300: #bac8b1;
  --color-milk-foam-400: #99a88f;
  --color-milk-foam-500: #7d8c73;
  --color-milk-foam-600: #637159;
  --color-milk-foam-700: #4d5a44;
  --color-milk-foam-800: #3b4634;
  --color-milk-foam-900: #2d3626;
  --color-milk-foam-950: #1b2216;
  --color-five-star: #ffad54;
  --color-five-star-50: #fff3e8;
  --color-five-star-100: #ffe7d0;
  --color-five-star-200: #ffcd9d;
  --color-five-star-300: #ffad54;
  --color-five-star-400: #db8e37;
  --color-five-star-500: #be7200;
  --color-five-star-600: #995b00;
  --color-five-star-700: #7a4800;
  --color-five-star-800: #603700;
  --color-five-star-900: #4b2a00;
  --color-five-star-950: #301900;
  --color-caramel-coating: #c27b0b;
  --color-caramel-coating-50: #fff4e9;
  --color-caramel-coating-100: #ffead3;
  --color-caramel-coating-200: #ffd2a1;
  --color-caramel-coating-300: #f6b870;
  --color-caramel-coating-400: #dc9741;
  --color-caramel-coating-500: #c27b0b;
  --color-caramel-coating-600: #9e6200;
  --color-caramel-coating-700: #7d4d00;
  --color-caramel-coating-800: #623b00;
  --color-caramel-coating-900: #4c2d00;
  --color-caramel-coating-950: #301b00;
  --color-nightly-activities: #3f5197;
  --color-nightly-activities-50: #f1f5ff;
  --color-nightly-activities-100: #e4ebff;
  --color-nightly-activities-200: #c9d7ff;
  --color-nightly-activities-300: #aabfff;
  --color-nightly-activities-400: #889fe8;
  --color-nightly-activities-500: #6d83cd;
  --color-nightly-activities-600: #5468af;
  --color-nightly-activities-700: #3f5197;
  --color-nightly-activities-800: #303f78;
  --color-nightly-activities-900: #232f60;
  --color-nightly-activities-950: #141d40;
  --color-indie-go: #2a2866;
  --color-indie-go-50: #f3f4ff;
  --color-indie-go-100: #e7eaff;
  --color-indie-go-200: #cfd4ff;
  --color-indie-go-300: #b5bbfb;
  --color-indie-go-400: #959ae0;
  --color-indie-go-500: #7a7ec4;
  --color-indie-go-600: #6064a6;
  --color-indie-go-700: #4b4d8a;
  --color-indie-go-800: #393b70;
  --color-indie-go-900: #2a2866;
  --color-indie-go-950: #1a1a3a;
}