Magnolia to Deep Sea Base Color Palette

About this palette

Magnolia to Deep Sea Base is a 5-color cool palette: #FFF8E3 (Magnolia), #90CFE8 (Below Zero), #0097B1 (Munsell Blue), #861F10 (Minotaurus Brown), #2D2C53 (Deep Sea Base). It mixes white, blue, red, purple tones and feels cool overall. The strongest text pairing is #FFF8E3 on #2D2C53 with a contrast ratio of 12.39:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Magnolia	rgb(255, 248, 227)	hsl(45, 100%, 95%)
Below Zero	rgb(144, 207, 232)	hsl(197, 66%, 74%)
Munsell Blue	rgb(0, 151, 177)	hsl(189, 100%, 35%)
Minotaurus Brown	rgb(134, 31, 16)	hsl(8, 79%, 29%)
Deep Sea Base	rgb(45, 44, 83)	hsl(242, 31%, 25%)

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.

Aa12.39:1 Super#FFF8E3 on #2D2C53
Aa12.39:1 Super#2D2C53 on #FFF8E3
Aa8.93:1 Very good#FFF8E3 on #861F10
Aa8.93:1 Very good#861F10 on #FFF8E3
Aa7.69:1 Very good#90CFE8 on #2D2C53
Aa7.69:1 Very good#2D2C53 on #90CFE8
Aa5.54:1 Good#90CFE8 on #861F10
Aa5.54:1 Good#861F10 on #90CFE8

Color blindness preview

CSS variables

/* Magnolia to Deep Sea Base — https://swatchly.xyz/palette/fff8e3-90cfe8-0097b1-861f10-2d2c53 */
:root {
  --magnolia: #fff8e3;
  --below-zero: #90cfe8;
  --munsell-blue: #0097b1;
  --minotaurus-brown: #861f10;
  --deep-sea-base: #2d2c53;
}

Tailwind CSS v4

/* Magnolia to Deep Sea Base — https://swatchly.xyz/palette/fff8e3-90cfe8-0097b1-861f10-2d2c53 */
@theme {
  --color-magnolia: #fff8e3;
  --color-magnolia-50: #fff8e3;
  --color-magnolia-100: #f2eee1;
  --color-magnolia-200: #ded9ca;
  --color-magnolia-300: #c8c2b1;
  --color-magnolia-400: #a8a290;
  --color-magnolia-500: #8d8674;
  --color-magnolia-600: #726c5a;
  --color-magnolia-700: #5b5545;
  --color-magnolia-800: #474234;
  --color-magnolia-900: #373327;
  --color-magnolia-950: #221f16;
  --color-below-zero: #90cfe8;
  --color-below-zero-50: #ecf9ff;
  --color-below-zero-100: #d6f3ff;
  --color-below-zero-200: #b6e3f5;
  --color-below-zero-300: #90cfe8;
  --color-below-zero-400: #73aec5;
  --color-below-zero-500: #5492a9;
  --color-below-zero-600: #39768d;
  --color-below-zero-700: #245e73;
  --color-below-zero-800: #154a5b;
  --color-below-zero-900: #0a3847;
  --color-below-zero-950: #03232e;
  --color-munsell-blue: #0097b1;
  --color-munsell-blue-50: #e5faff;
  --color-munsell-blue-100: #caf4ff;
  --color-munsell-blue-200: #98e6fa;
  --color-munsell-blue-300: #74d1e8;
  --color-munsell-blue-400: #42b3cc;
  --color-munsell-blue-500: #0097b1;
  --color-munsell-blue-600: #007a8f;
  --color-munsell-blue-700: #006072;
  --color-munsell-blue-800: #004b59;
  --color-munsell-blue-900: #003a45;
  --color-munsell-blue-950: #00242c;
  --color-minotaurus-brown: #861f10;
  --color-minotaurus-brown-50: #fff2ef;
  --color-minotaurus-brown-100: #ffe4df;
  --color-minotaurus-brown-200: #ffc9be;
  --color-minotaurus-brown-300: #ffa998;
  --color-minotaurus-brown-400: #ec826f;
  --color-minotaurus-brown-500: #d26653;
  --color-minotaurus-brown-600: #b44c3b;
  --color-minotaurus-brown-700: #993828;
  --color-minotaurus-brown-800: #861f10;
  --color-minotaurus-brown-900: #671b0f;
  --color-minotaurus-brown-950: #450d05;
  --color-deep-sea-base: #2d2c53;
  --color-deep-sea-base-50: #f3f4ff;
  --color-deep-sea-base-100: #e8e9ff;
  --color-deep-sea-base-200: #d2d4f9;
  --color-deep-sea-base-300: #bbbde6;
  --color-deep-sea-base-400: #9b9dca;
  --color-deep-sea-base-500: #7f81ae;
  --color-deep-sea-base-600: #656691;
  --color-deep-sea-base-700: #4f5077;
  --color-deep-sea-base-800: #3d3d5f;
  --color-deep-sea-base-900: #2d2c53;
  --color-deep-sea-base-950: #1c1c30;
}