Broad Daylight to Wasabi Nori Color Palette

About this palette

Broad Daylight to Wasabi Nori is a 5-color warm, vintage palette: #C2DEFC (Broad Daylight), #D492A0 (Rosetti), #B85D81 (Malevolent Mauve), #23577A (3AM in Shibuya), #2E310F (Wasabi Nori). It mixes blue, pink, red, green tones and feels warm overall. The strongest text pairing is #C2DEFC on #2E310F with a contrast ratio of 9.70:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Broad Daylight	rgb(194, 222, 252)	hsl(211, 91%, 87%)
Rosetti	rgb(212, 146, 160)	hsl(347, 43%, 70%)
Malevolent Mauve	rgb(184, 93, 129)	hsl(336, 39%, 54%)
3AM in Shibuya	rgb(35, 87, 122)	hsl(204, 55%, 31%)
Wasabi Nori	rgb(46, 49, 15)	hsl(65, 53%, 13%)

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.

Aa9.70:1 Very good#C2DEFC on #2E310F
Aa9.70:1 Very good#2E310F on #C2DEFC
Aa5.58:1 Good#C2DEFC on #23577A
Aa5.58:1 Good#23577A on #C2DEFC
Aa5.39:1 Good#D492A0 on #2E310F
Aa5.39:1 Good#2E310F on #D492A0
Aa3.15:1 Poor#B85D81 on #2E310F
Aa3.15:1 Poor#2E310F on #B85D81

Color blindness preview

CSS variables

/* Broad Daylight to Wasabi Nori — https://swatchly.xyz/palette/c2defc-d492a0-b85d81-23577a-2e310f */
:root {
  --broad-daylight: #c2defc;
  --rosetti: #d492a0;
  --malevolent-mauve: #b85d81;
  --c-3am-in-shibuya: #23577a;
  --wasabi-nori: #2e310f;
}

Tailwind CSS v4

/* Broad Daylight to Wasabi Nori — https://swatchly.xyz/palette/c2defc-d492a0-b85d81-23577a-2e310f */
@theme {
  --color-broad-daylight: #c2defc;
  --color-broad-daylight-50: #f2f8ff;
  --color-broad-daylight-100: #e1f0ff;
  --color-broad-daylight-200: #c2defc;
  --color-broad-daylight-300: #afc6df;
  --color-broad-daylight-400: #8da6c2;
  --color-broad-daylight-500: #718aa6;
  --color-broad-daylight-600: #576f89;
  --color-broad-daylight-700: #42586f;
  --color-broad-daylight-800: #314459;
  --color-broad-daylight-900: #243446;
  --color-broad-daylight-950: #14202d;
  --color-rosetti: #d492a0;
  --color-rosetti-50: #fff4f6;
  --color-rosetti-100: #ffe7ec;
  --color-rosetti-200: #ffccd6;
  --color-rosetti-300: #edb4c0;
  --color-rosetti-400: #d492a0;
  --color-rosetti-500: #b57684;
  --color-rosetti-600: #975b69;
  --color-rosetti-700: #7b4552;
  --color-rosetti-800: #63333f;
  --color-rosetti-900: #4d252f;
  --color-rosetti-950: #31151c;
  --color-malevolent-mauve: #b85d81;
  --color-malevolent-mauve-50: #ffeff4;
  --color-malevolent-mauve-100: #ffdfe9;
  --color-malevolent-mauve-200: #ffbfd5;
  --color-malevolent-mauve-300: #f49ebe;
  --color-malevolent-mauve-400: #d67a9d;
  --color-malevolent-mauve-500: #b85d81;
  --color-malevolent-mauve-600: #9a4568;
  --color-malevolent-mauve-700: #7f3252;
  --color-malevolent-mauve-800: #672341;
  --color-malevolent-mauve-900: #521932;
  --color-malevolent-mauve-950: #360d1f;
  --color-c-3am-in-shibuya: #23577a;
  --color-c-3am-in-shibuya-50: #ecf7ff;
  --color-c-3am-in-shibuya-100: #d9eeff;
  --color-c-3am-in-shibuya-200: #b5ddfb;
  --color-c-3am-in-shibuya-300: #99c6e8;
  --color-c-3am-in-shibuya-400: #74a6cc;
  --color-c-3am-in-shibuya-500: #568ab0;
  --color-c-3am-in-shibuya-600: #3d6f92;
  --color-c-3am-in-shibuya-700: #23577a;
  --color-c-3am-in-shibuya-800: #1b445f;
  --color-c-3am-in-shibuya-900: #11344b;
  --color-c-3am-in-shibuya-950: #072031;
  --color-wasabi-nori: #2e310f;
  --color-wasabi-nori-50: #f4f8e2;
  --color-wasabi-nori-100: #eaeed6;
  --color-wasabi-nori-200: #d7dbbe;
  --color-wasabi-nori-300: #c0c5a4;
  --color-wasabi-nori-400: #a0a581;
  --color-wasabi-nori-500: #848864;
  --color-wasabi-nori-600: #696d4a;
  --color-wasabi-nori-700: #515536;
  --color-wasabi-nori-800: #3e4126;
  --color-wasabi-nori-900: #2e310f;
  --color-wasabi-nori-950: #1b1d0e;
}