Droplet to Wasabi Nori Color Palette

About this palette

Droplet to Wasabi Nori is a 5-color cool palette: #ADDDFF (Droplet), #42ADFF (Cerulean), #CB5382 (Lipstick), #713950 (Passionate Plum), #283700 (Wasabi Nori). It mixes blue, pink, red, green tones and feels cool overall. The strongest text pairing is #ADDDFF on #283700 with a contrast ratio of 8.90:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Droplet	rgb(173, 221, 255)	hsl(205, 100%, 84%)
Cerulean	rgb(66, 173, 255)	hsl(206, 100%, 63%)
Lipstick	rgb(203, 83, 130)	hsl(336, 54%, 56%)
Passionate Plum	rgb(113, 57, 80)	hsl(335, 33%, 33%)
Wasabi Nori	rgb(40, 55, 0)	hsl(76, 100%, 11%)

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.

Aa8.90:1 Very good#ADDDFF on #283700
Aa8.90:1 Very good#283700 on #ADDDFF
Aa6.06:1 Good#ADDDFF on #713950
Aa6.06:1 Good#713950 on #ADDDFF
Aa5.29:1 Good#42ADFF on #283700
Aa5.29:1 Good#283700 on #42ADFF
Aa3.60:1 Poor#42ADFF on #713950
Aa3.60:1 Poor#713950 on #42ADFF

Color blindness preview

CSS variables

/* Droplet to Wasabi Nori — https://swatchly.xyz/palette/adddff-42adff-cb5382-713950-283700 */
:root {
  --droplet: #adddff;
  --cerulean: #42adff;
  --lipstick: #cb5382;
  --passionate-plum: #713950;
  --wasabi-nori: #283700;
}

Tailwind CSS v4

/* Droplet to Wasabi Nori — https://swatchly.xyz/palette/adddff-42adff-cb5382-713950-283700 */
@theme {
  --color-droplet: #adddff;
  --color-droplet-50: #eaf6ff;
  --color-droplet-100: #d6eeff;
  --color-droplet-200: #adddff;
  --color-droplet-300: #9dc6e2;
  --color-droplet-400: #7aa7c6;
  --color-droplet-500: #5e8bab;
  --color-droplet-600: #45718e;
  --color-droplet-700: #315a75;
  --color-droplet-800: #23465e;
  --color-droplet-900: #18364a;
  --color-droplet-950: #0b2230;
  --color-cerulean: #42adff;
  --color-cerulean-50: #f0f8ff;
  --color-cerulean-100: #dff0ff;
  --color-cerulean-200: #bcdfff;
  --color-cerulean-300: #90cbff;
  --color-cerulean-400: #42adff;
  --color-cerulean-500: #1a90df;
  --color-cerulean-600: #0073b8;
  --color-cerulean-700: #005b93;
  --color-cerulean-800: #004774;
  --color-cerulean-900: #00365a;
  --color-cerulean-950: #00213a;
  --color-lipstick: #cb5382;
  --color-lipstick-50: #fff0f4;
  --color-lipstick-100: #ffe1ea;
  --color-lipstick-200: #ffc3d5;
  --color-lipstick-300: #ff9cbe;
  --color-lipstick-400: #e9729e;
  --color-lipstick-500: #cb5382;
  --color-lipstick-600: #ac3968;
  --color-lipstick-700: #8e2452;
  --color-lipstick-800: #731540;
  --color-lipstick-900: #5c0b31;
  --color-lipstick-950: #3d031e;
  --color-passionate-plum: #713950;
  --color-passionate-plum-50: #fff1f5;
  --color-passionate-plum-100: #ffe2ec;
  --color-passionate-plum-200: #f9c6d8;
  --color-passionate-plum-300: #e5abc0;
  --color-passionate-plum-400: #c688a0;
  --color-passionate-plum-500: #a96c83;
  --color-passionate-plum-600: #8a5168;
  --color-passionate-plum-700: #713950;
  --color-passionate-plum-800: #582d3e;
  --color-passionate-plum-900: #452130;
  --color-passionate-plum-950: #2c121d;
  --color-wasabi-nori: #283700;
  --color-wasabi-nori-50: #eefbdc;
  --color-wasabi-nori-100: #e4f1ce;
  --color-wasabi-nori-200: #cfdfb5;
  --color-wasabi-nori-300: #b7c99a;
  --color-wasabi-nori-400: #96aa76;
  --color-wasabi-nori-500: #7b8e59;
  --color-wasabi-nori-600: #617240;
  --color-wasabi-nori-700: #4b5b2c;
  --color-wasabi-nori-800: #39461e;
  --color-wasabi-nori-900: #283700;
  --color-wasabi-nori-950: #192109;
}