English Breakfast to Girlie Color Palette

About this palette

English Breakfast to Girlie is a 5-color warm, vintage palette: #401610 (English Breakfast), #22AEC8 (Aquarius), #007682 (Prismarine), #85000A (Red Devil), #FFD4CA (Girlie). It mixes brown, turquoise, red, pink tones and feels warm overall. The strongest text pairing is #401610 on #FFD4CA with a contrast ratio of 11.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
English Breakfast	rgb(64, 22, 16)	hsl(8, 60%, 16%)
Aquarius	rgb(34, 174, 200)	hsl(189, 71%, 46%)
Prismarine	rgb(0, 118, 130)	hsl(186, 100%, 25%)
Red Devil	rgb(133, 0, 10)	hsl(355, 100%, 26%)
Girlie	rgb(255, 212, 202)	hsl(11, 100%, 90%)

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.

Aa11.58:1 Very good#401610 on #FFD4CA
Aa11.58:1 Very good#FFD4CA on #401610
Aa7.75:1 Very good#85000A on #FFD4CA
Aa7.75:1 Very good#FFD4CA on #85000A
Aa5.94:1 Good#401610 on #22AEC8
Aa5.94:1 Good#22AEC8 on #401610
Aa3.97:1 Poor#22AEC8 on #85000A
Aa3.97:1 Poor#85000A on #22AEC8

Color blindness preview

CSS variables

/* English Breakfast to Girlie — https://swatchly.xyz/palette/401610-22aec8-007682-85000a-ffd4ca */
:root {
  --english-breakfast: #401610;
  --aquarius: #22aec8;
  --prismarine: #007682;
  --red-devil: #85000a;
  --girlie: #ffd4ca;
}

Tailwind CSS v4

/* English Breakfast to Girlie — https://swatchly.xyz/palette/401610-22aec8-007682-85000a-ffd4ca */
@theme {
  --color-english-breakfast: #401610;
  --color-english-breakfast-50: #fff2ef;
  --color-english-breakfast-100: #ffe4df;
  --color-english-breakfast-200: #f7ccc4;
  --color-english-breakfast-300: #e4b4ab;
  --color-english-breakfast-400: #c7938a;
  --color-english-breakfast-500: #ac786f;
  --color-english-breakfast-600: #916057;
  --color-english-breakfast-700: #784b43;
  --color-english-breakfast-800: #623b34;
  --color-english-breakfast-900: #502d28;
  --color-english-breakfast-950: #401610;
  --color-aquarius: #22aec8;
  --color-aquarius-50: #dff9ff;
  --color-aquarius-100: #bff3ff;
  --color-aquarius-200: #8de3f7;
  --color-aquarius-300: #66cde4;
  --color-aquarius-400: #22aec8;
  --color-aquarius-500: #0092a9;
  --color-aquarius-600: #007589;
  --color-aquarius-700: #005d6d;
  --color-aquarius-800: #004956;
  --color-aquarius-900: #003944;
  --color-aquarius-950: #00242c;
  --color-prismarine: #007682;
  --color-prismarine-50: #e0fbff;
  --color-prismarine-100: #c0f6fd;
  --color-prismarine-200: #a2e3ec;
  --color-prismarine-300: #81cdd8;
  --color-prismarine-400: #56aeba;
  --color-prismarine-500: #32929e;
  --color-prismarine-600: #007682;
  --color-prismarine-700: #005e67;
  --color-prismarine-800: #004951;
  --color-prismarine-900: #00393f;
  --color-prismarine-950: #002328;
  --color-red-devil: #85000a;
  --color-red-devil-50: #fff2f0;
  --color-red-devil-100: #ffe4e0;
  --color-red-devil-200: #ffc8c1;
  --color-red-devil-300: #ffa69c;
  --color-red-devil-400: #f2796d;
  --color-red-devil-500: #d65a51;
  --color-red-devil-600: #b63f38;
  --color-red-devil-700: #982a25;
  --color-red-devil-800: #85000a;
  --color-red-devil-900: #640e0e;
  --color-red-devil-950: #430405;
  --color-girlie: #ffd4ca;
  --color-girlie-50: #fff9f7;
  --color-girlie-100: #ffede9;
  --color-girlie-200: #ffd4ca;
  --color-girlie-300: #e1beb6;
  --color-girlie-400: #c39c93;
  --color-girlie-500: #a67f76;
  --color-girlie-600: #89645b;
  --color-girlie-700: #6e4d45;
  --color-girlie-800: #573a34;
  --color-girlie-900: #442c26;
  --color-girlie-950: #2b1a16;
}