Midnight Dreams to Fizz Color Palette

About this palette

Midnight Dreams to Fizz is a 5-color cool palette: #00242E (Midnight Dreams), #873212 (Kobe), #7463A0 (Scampi), #3AAECA (Aquarius), #C4DBA6 (Fizz). It mixes blue, red, purple, green tones and feels cool overall. The strongest text pairing is #00242E on #C4DBA6 with a contrast ratio of 10.86:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Dreams	rgb(0, 36, 46)	hsl(193, 100%, 9%)
Kobe	rgb(135, 50, 18)	hsl(16, 76%, 30%)
Scampi	rgb(116, 99, 160)	hsl(257, 24%, 51%)
Aquarius	rgb(58, 174, 202)	hsl(192, 58%, 51%)
Fizz	rgb(196, 219, 166)	hsl(86, 42%, 75%)

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.86:1 Very good#00242E on #C4DBA6
Aa10.86:1 Very good#C4DBA6 on #00242E
Aa6.26:1 Good#00242E on #3AAECA
Aa6.26:1 Good#3AAECA on #00242E
Aa5.62:1 Good#873212 on #C4DBA6
Aa5.62:1 Good#C4DBA6 on #873212
Aa3.48:1 Poor#7463A0 on #C4DBA6
Aa3.48:1 Poor#C4DBA6 on #7463A0

Color blindness preview

CSS variables

/* Midnight Dreams to Fizz — https://swatchly.xyz/palette/00242e-873212-7463a0-3aaeca-c4dba6 */
:root {
  --midnight-dreams: #00242e;
  --kobe: #873212;
  --scampi: #7463a0;
  --aquarius: #3aaeca;
  --fizz: #c4dba6;
}

Tailwind CSS v4

/* Midnight Dreams to Fizz — https://swatchly.xyz/palette/00242e-873212-7463a0-3aaeca-c4dba6 */
@theme {
  --color-midnight-dreams: #00242e;
  --color-midnight-dreams-50: #e7f9ff;
  --color-midnight-dreams-100: #d8f0f8;
  --color-midnight-dreams-200: #c1dde7;
  --color-midnight-dreams-300: #a7c7d2;
  --color-midnight-dreams-400: #85a8b4;
  --color-midnight-dreams-500: #698d99;
  --color-midnight-dreams-600: #4f727e;
  --color-midnight-dreams-700: #3b5b65;
  --color-midnight-dreams-800: #2b4750;
  --color-midnight-dreams-900: #1f373f;
  --color-midnight-dreams-950: #00242e;
  --color-kobe: #873212;
  --color-kobe-50: #fff2ee;
  --color-kobe-100: #ffe5dc;
  --color-kobe-200: #ffc8b6;
  --color-kobe-300: #fba78b;
  --color-kobe-400: #de8465;
  --color-kobe-500: #c16648;
  --color-kobe-600: #a14b2e;
  --color-kobe-700: #873212;
  --color-kobe-800: #6a270f;
  --color-kobe-900: #541c06;
  --color-kobe-950: #370e02;
  --color-scampi: #7463a0;
  --color-scampi-50: #f6f3ff;
  --color-scampi-100: #ede8ff;
  --color-scampi-200: #dcd1ff;
  --color-scampi-300: #c7b9f2;
  --color-scampi-400: #a898d7;
  --color-scampi-500: #8e7dbc;
  --color-scampi-600: #7463a0;
  --color-scampi-700: #5c4d84;
  --color-scampi-800: #483a6a;
  --color-scampi-900: #382c54;
  --color-scampi-950: #231a37;
  --color-aquarius: #3aaeca;
  --color-aquarius-50: #e2f8ff;
  --color-aquarius-100: #c6f2ff;
  --color-aquarius-200: #95e3f8;
  --color-aquarius-300: #71cde6;
  --color-aquarius-400: #3aaeca;
  --color-aquarius-500: #0792ae;
  --color-aquarius-600: #00768d;
  --color-aquarius-700: #005e70;
  --color-aquarius-800: #004a59;
  --color-aquarius-900: #003945;
  --color-aquarius-950: #00242d;
  --color-fizz: #c4dba6;
  --color-fizz-50: #e9f7d8;
  --color-fizz-100: #ddedca;
  --color-fizz-200: #c4dba6;
  --color-fizz-300: #b0c497;
  --color-fizz-400: #91a675;
  --color-fizz-500: #778c5a;
  --color-fizz-600: #5e7243;
  --color-fizz-700: #4a5c30;
  --color-fizz-800: #394922;
  --color-fizz-900: #2b3817;
  --color-fizz-950: #1a230b;
}