Burned to Broad Daylight color palette

4F0700Burned 005E7BBlue-Collar 876600Alligator E74A5CWatermelonade F2B24CGolden Hour BDE3FFBroad Daylight

Open in generator Export PNG, PDF, ASE…

About this palette

Burned to Broad Daylight is a 6-color warm palette: #4F0700 (Burned), #005E7B (Blue-Collar), #876600 (Alligator), #E74A5C (Watermelonade), #F2B24C (Golden Hour), #BDE3FF (Broad Daylight). It mixes brown, blue, red, yellow tones and feels warm overall. The strongest text pairing is #4F0700 on #BDE3FF with a contrast ratio of 11.44:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Burned	rgb(79, 7, 0)	hsl(5, 100%, 15%)
Blue-Collar	rgb(0, 94, 123)	hsl(194, 100%, 24%)
Alligator	rgb(135, 102, 0)	hsl(45, 100%, 26%)
Watermelonade	rgb(231, 74, 92)	hsl(353, 77%, 60%)
Golden Hour	rgb(242, 178, 76)	hsl(37, 86%, 62%)
Broad Daylight	rgb(189, 227, 255)	hsl(205, 100%, 87%)

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.44:1 Very good#4F0700 on #BDE3FF
Aa11.44:1 Very good#BDE3FF on #4F0700
Aa8.25:1 Very good#4F0700 on #F2B24C
Aa8.25:1 Very good#F2B24C on #4F0700
Aa5.40:1 Good#005E7B on #BDE3FF
Aa5.40:1 Good#BDE3FF on #005E7B
Aa4.06:1 Poor#4F0700 on #E74A5C
Aa4.06:1 Poor#E74A5C on #4F0700

Color blindness preview

CSS variables

/* Burned to Broad Daylight — https://swatchly.xyz/palette/4f0700-005e7b-876600-e74a5c-f2b24c-bde3ff */
:root {
  --burned: #4f0700;
  --blue-collar: #005e7b;
  --alligator: #876600;
  --watermelonade: #e74a5c;
  --golden-hour: #f2b24c;
  --broad-daylight: #bde3ff;
}

Tailwind CSS v4

/* Burned to Broad Daylight — https://swatchly.xyz/palette/4f0700-005e7b-876600-e74a5c-f2b24c-bde3ff */
@theme {
  --color-burned: #4f0700;
  --color-burned-50: #fff2ef;
  --color-burned-100: #ffe4df;
  --color-burned-200: #ffc9bd;
  --color-burned-300: #f5ac9d;
  --color-burned-400: #d98a7a;
  --color-burned-500: #be6f60;
  --color-burned-600: #a25748;
  --color-burned-700: #884336;
  --color-burned-800: #723328;
  --color-burned-900: #5e271d;
  --color-burned-950: #4f0700;
  --color-blue-collar: #005e7b;
  --color-blue-collar-50: #e9f8ff;
  --color-blue-collar-100: #d2f1ff;
  --color-blue-collar-200: #abe1f9;
  --color-blue-collar-300: #8dcbe7;
  --color-blue-collar-400: #65accb;
  --color-blue-collar-500: #4690af;
  --color-blue-collar-600: #297593;
  --color-blue-collar-700: #005e7b;
  --color-blue-collar-800: #014961;
  --color-blue-collar-900: #00394c;
  --color-blue-collar-950: #002331;
  --color-alligator: #876600;
  --color-alligator-50: #fff4dd;
  --color-alligator-100: #ffe9b9;
  --color-alligator-200: #efd49a;
  --color-alligator-300: #dbbd7a;
  --color-alligator-400: #be9d4f;
  --color-alligator-500: #a3812d;
  --color-alligator-600: #876600;
  --color-alligator-700: #6b5100;
  --color-alligator-800: #543f00;
  --color-alligator-900: #413000;
  --color-alligator-950: #291d00;
  --color-watermelonade: #e74a5c;
  --color-watermelonade-50: #fff2f2;
  --color-watermelonade-100: #ffe6e6;
  --color-watermelonade-200: #ffcbcb;
  --color-watermelonade-300: #ffa9ab;
  --color-watermelonade-400: #ff707a;
  --color-watermelonade-500: #e74a5c;
  --color-watermelonade-600: #c52942;
  --color-watermelonade-700: #a4082f;
  --color-watermelonade-800: #830022;
  --color-watermelonade-900: #670018;
  --color-watermelonade-950: #43000d;
  --color-golden-hour: #f2b24c;
  --color-golden-hour-50: #fff2e1;
  --color-golden-hour-100: #ffe6c4;
  --color-golden-hour-200: #fecd87;
  --color-golden-hour-300: #f2b24c;
  --color-golden-hour-400: #cf932e;
  --color-golden-hour-500: #b17800;
  --color-golden-hour-600: #8f6100;
  --color-golden-hour-700: #724c00;
  --color-golden-hour-800: #5a3b00;
  --color-golden-hour-900: #462d00;
  --color-golden-hour-950: #2d1b00;
  --color-broad-daylight: #bde3ff;
  --color-broad-daylight-50: #f4faff;
  --color-broad-daylight-100: #e2f3ff;
  --color-broad-daylight-200: #bde3ff;
  --color-broad-daylight-300: #abcae1;
  --color-broad-daylight-400: #88aac3;
  --color-broad-daylight-500: #6a8ea7;
  --color-broad-daylight-600: #50728a;
  --color-broad-daylight-700: #3b5a70;
  --color-broad-daylight-800: #2b4659;
  --color-broad-daylight-900: #1e3646;
  --color-broad-daylight-950: #11212d;
}