English Breakfast to Sky color palette

381411English Breakfast 5D3F00Pineapple 4584B0Underwater Moonlight D48A87Peaches of Immortality 7BD7FFSky

Open in generator Export PNG, PDF, ASE…

About this palette

English Breakfast to Sky is a 5-color warm, vintage palette: #381411 (English Breakfast), #5D3F00 (Pineapple), #4584B0 (Underwater Moonlight), #D48A87 (Peaches of Immortality), #7BD7FF (Sky). It mixes brown, blue, red tones and feels warm overall. The strongest text pairing is #381411 on #7BD7FF with a contrast ratio of 10.19:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
English Breakfast	rgb(56, 20, 17)	hsl(5, 53%, 14%)
Pineapple	rgb(93, 63, 0)	hsl(41, 100%, 18%)
Underwater Moonlight	rgb(69, 132, 176)	hsl(205, 44%, 48%)
Peaches of Immortality	rgb(212, 138, 135)	hsl(2, 47%, 68%)
Sky	rgb(123, 215, 255)	hsl(198, 100%, 74%)

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.19:1 Very good#381411 on #7BD7FF
Aa10.19:1 Very good#7BD7FF on #381411
Aa6.10:1 Good#381411 on #D48A87
Aa6.10:1 Good#D48A87 on #381411
Aa5.98:1 Good#5D3F00 on #7BD7FF
Aa5.98:1 Good#7BD7FF on #5D3F00
Aa4.06:1 Poor#381411 on #4584B0
Aa4.06:1 Poor#4584B0 on #381411

Color blindness preview

CSS variables

/* English Breakfast to Sky — https://swatchly.xyz/palette/381411-5d3f00-4584b0-d48a87-7bd7ff */
:root {
  --english-breakfast: #381411;
  --pineapple: #5d3f00;
  --underwater-moonlight: #4584b0;
  --peaches-of-immortality: #d48a87;
  --sky: #7bd7ff;
}

Tailwind CSS v4

/* English Breakfast to Sky — https://swatchly.xyz/palette/381411-5d3f00-4584b0-d48a87-7bd7ff */
@theme {
  --color-english-breakfast: #381411;
  --color-english-breakfast-50: #fff2f0;
  --color-english-breakfast-100: #ffe4e0;
  --color-english-breakfast-200: #f3cdc8;
  --color-english-breakfast-300: #e0b5b0;
  --color-english-breakfast-400: #c2958f;
  --color-english-breakfast-500: #a77974;
  --color-english-breakfast-600: #8b605a;
  --color-english-breakfast-700: #714b46;
  --color-english-breakfast-800: #5b3935;
  --color-english-breakfast-900: #482b28;
  --color-english-breakfast-950: #381411;
  --color-pineapple: #5d3f00;
  --color-pineapple-50: #fff3e2;
  --color-pineapple-100: #fee8c6;
  --color-pineapple-200: #eed3ab;
  --color-pineapple-300: #dabd8f;
  --color-pineapple-400: #be9d6a;
  --color-pineapple-500: #a3824d;
  --color-pineapple-600: #886834;
  --color-pineapple-700: #6f5221;
  --color-pineapple-800: #5d3f00;
  --color-pineapple-900: #473108;
  --color-pineapple-950: #2e1e02;
  --color-underwater-moonlight: #4584b0;
  --color-underwater-moonlight-50: #e9f5ff;
  --color-underwater-moonlight-100: #d3ecff;
  --color-underwater-moonlight-200: #a9d9fe;
  --color-underwater-moonlight-300: #8ac2eb;
  --color-underwater-moonlight-400: #64a1cd;
  --color-underwater-moonlight-500: #4584b0;
  --color-underwater-moonlight-600: #2d6b94;
  --color-underwater-moonlight-700: #1b557a;
  --color-underwater-moonlight-800: #0e4363;
  --color-underwater-moonlight-900: #06344f;
  --color-underwater-moonlight-950: #022134;
  --color-peaches-of-immortality: #d48a87;
  --color-peaches-of-immortality-50: #fff1f0;
  --color-peaches-of-immortality-100: #ffe3e2;
  --color-peaches-of-immortality-200: #ffc7c4;
  --color-peaches-of-immortality-300: #efadaa;
  --color-peaches-of-immortality-400: #d48a87;
  --color-peaches-of-immortality-500: #b66f6d;
  --color-peaches-of-immortality-600: #995554;
  --color-peaches-of-immortality-700: #7d403f;
  --color-peaches-of-immortality-800: #65302f;
  --color-peaches-of-immortality-900: #502323;
  --color-peaches-of-immortality-950: #341414;
  --color-sky: #7bd7ff;
  --color-sky-50: #f3fbff;
  --color-sky-100: #e0f5ff;
  --color-sky-200: #b5e8ff;
  --color-sky-300: #7bd7ff;
  --color-sky-400: #5fb5d9;
  --color-sky-500: #3897bd;
  --color-sky-600: #0d7a9f;
  --color-sky-700: #00617f;
  --color-sky-800: #004b63;
  --color-sky-900: #00394c;
  --color-sky-950: #002331;
}