Broad Daylight to Fennel Flower color palette

C4D9FFBroad Daylight 002620Nightmare 996F00Glazed Chestnut 862D55Pleasure 6FA1FFFennel Flower

About this palette

Broad Daylight to Fennel Flower is a 5-color cool, vintage palette: #C4D9FF (Broad Daylight), #002620 (Nightmare), #996F00 (Glazed Chestnut), #862D55 (Pleasure), #6FA1FF (Fennel Flower). It mixes blue, turquoise, yellow, red tones and feels cool overall. The strongest text pairing is #C4D9FF on #002620 with a contrast ratio of 11.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Broad Daylight	rgb(196, 217, 255)	hsl(219, 100%, 88%)
Nightmare	rgb(0, 38, 32)	hsl(171, 100%, 7%)
Glazed Chestnut	rgb(153, 111, 0)	hsl(44, 100%, 30%)
Pleasure	rgb(134, 45, 85)	hsl(333, 50%, 35%)
Fennel Flower	rgb(111, 161, 255)	hsl(219, 100%, 72%)

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.34:1 Very good#C4D9FF on #002620
Aa11.34:1 Very good#002620 on #C4D9FF
Aa6.33:1 Good#002620 on #6FA1FF
Aa6.33:1 Good#6FA1FF on #002620
Aa5.84:1 Good#C4D9FF on #862D55
Aa5.84:1 Good#862D55 on #C4D9FF
Aa3.57:1 Poor#002620 on #996F00
Aa3.57:1 Poor#996F00 on #002620

Color blindness preview

CSS variables

/* Broad Daylight to Fennel Flower — https://swatchly.xyz/palette/c4d9ff-002620-996f00-862d55-6fa1ff */
:root {
  --broad-daylight: #c4d9ff;
  --nightmare: #002620;
  --glazed-chestnut: #996f00;
  --pleasure: #862d55;
  --fennel-flower: #6fa1ff;
}

Tailwind CSS v4

/* Broad Daylight to Fennel Flower — https://swatchly.xyz/palette/c4d9ff-002620-996f00-862d55-6fa1ff */
@theme {
  --color-broad-daylight: #c4d9ff;
  --color-broad-daylight-50: #f1f6ff;
  --color-broad-daylight-100: #e2ecff;
  --color-broad-daylight-200: #c4d9ff;
  --color-broad-daylight-300: #b1c2e2;
  --color-broad-daylight-400: #90a3c5;
  --color-broad-daylight-500: #7487aa;
  --color-broad-daylight-600: #5a6c8d;
  --color-broad-daylight-700: #455673;
  --color-broad-daylight-800: #34425c;
  --color-broad-daylight-900: #273349;
  --color-broad-daylight-950: #171f2f;
  --color-nightmare: #002620;
  --color-nightmare-50: #e5fbf5;
  --color-nightmare-100: #d9f2ec;
  --color-nightmare-200: #c2dfd8;
  --color-nightmare-300: #a8c9c2;
  --color-nightmare-400: #86aba2;
  --color-nightmare-500: #6a8f87;
  --color-nightmare-600: #50746d;
  --color-nightmare-700: #3c5d56;
  --color-nightmare-800: #2c4943;
  --color-nightmare-900: #203933;
  --color-nightmare-950: #002620;
  --color-glazed-chestnut: #996f00;
  --color-glazed-chestnut-50: #fff4e0;
  --color-glazed-chestnut-100: #ffebc6;
  --color-glazed-chestnut-200: #f8d79c;
  --color-glazed-chestnut-300: #e7c27d;
  --color-glazed-chestnut-400: #cca352;
  --color-glazed-chestnut-500: #b3882f;
  --color-glazed-chestnut-600: #996f00;
  --color-glazed-chestnut-700: #7a5800;
  --color-glazed-chestnut-800: #604400;
  --color-glazed-chestnut-900: #4a3400;
  --color-glazed-chestnut-950: #2f1f00;
  --color-pleasure: #862d55;
  --color-pleasure-50: #fff1f5;
  --color-pleasure-100: #ffe2ec;
  --color-pleasure-200: #ffc4d8;
  --color-pleasure-300: #f9a2c2;
  --color-pleasure-400: #dc7ea3;
  --color-pleasure-500: #bf6087;
  --color-pleasure-600: #a0466c;
  --color-pleasure-700: #862d55;
  --color-pleasure-800: #692342;
  --color-pleasure-900: #531833;
  --color-pleasure-950: #370c1f;
  --color-fennel-flower: #6fa1ff;
  --color-fennel-flower-50: #f1f6ff;
  --color-fennel-flower-100: #e2edff;
  --color-fennel-flower-200: #c5d9ff;
  --color-fennel-flower-300: #a2c3ff;
  --color-fennel-flower-400: #6fa1ff;
  --color-fennel-flower-500: #5484e0;
  --color-fennel-flower-600: #3b69c0;
  --color-fennel-flower-700: #2951a1;
  --color-fennel-flower-800: #1b3e84;
  --color-fennel-flower-900: #112f6a;
  --color-fennel-flower-950: #071c47;
}