Vanilla Blush to Maniac Mansion color palette

FFEDE7Vanilla Blush E7A88BLunatic Lynx 00AAD2Gummy Dolphins 007284Waterworld 004155Maniac Mansion

About this palette

Vanilla Blush to Maniac Mansion is a 5-color cool palette: #FFEDE7 (Vanilla Blush), #E7A88B (Lunatic Lynx), #00AAD2 (Gummy Dolphins), #007284 (Waterworld), #004155 (Maniac Mansion). It mixes white, orange, blue, turquoise tones and feels cool overall. The strongest text pairing is #FFEDE7 on #004155 with a contrast ratio of 9.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vanilla Blush	rgb(255, 237, 231)	hsl(15, 100%, 95%)
Lunatic Lynx	rgb(231, 168, 139)	hsl(19, 66%, 73%)
Gummy Dolphins	rgb(0, 170, 210)	hsl(191, 100%, 41%)
Waterworld	rgb(0, 114, 132)	hsl(188, 100%, 26%)
Maniac Mansion	rgb(0, 65, 85)	hsl(194, 100%, 17%)

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.81:1 Very good#FFEDE7 on #004155
Aa9.81:1 Very good#004155 on #FFEDE7
Aa5.50:1 Good#E7A88B on #004155
Aa5.50:1 Good#004155 on #E7A88B
Aa4.95:1 Good#FFEDE7 on #007284
Aa4.95:1 Good#007284 on #FFEDE7
Aa4.07:1 Poor#00AAD2 on #004155
Aa4.07:1 Poor#004155 on #00AAD2

Color blindness preview

CSS variables

/* Vanilla Blush to Maniac Mansion — https://swatchly.xyz/palette/ffede7-e7a88b-00aad2-007284-004155 */
:root {
  --vanilla-blush: #ffede7;
  --lunatic-lynx: #e7a88b;
  --gummy-dolphins: #00aad2;
  --waterworld: #007284;
  --maniac-mansion: #004155;
}

Tailwind CSS v4

/* Vanilla Blush to Maniac Mansion — https://swatchly.xyz/palette/ffede7-e7a88b-00aad2-007284-004155 */
@theme {
  --color-vanilla-blush: #ffede7;
  --color-vanilla-blush-50: #ffede7;
  --color-vanilla-blush-100: #f1e5e1;
  --color-vanilla-blush-200: #dfd2cd;
  --color-vanilla-blush-300: #cabbb6;
  --color-vanilla-blush-400: #ac9c97;
  --color-vanilla-blush-500: #92827c;
  --color-vanilla-blush-600: #776863;
  --color-vanilla-blush-700: #5f524d;
  --color-vanilla-blush-800: #4b3f3b;
  --color-vanilla-blush-900: #3a302d;
  --color-vanilla-blush-950: #251d1b;
  --color-lunatic-lynx: #e7a88b;
  --color-lunatic-lynx-50: #ffece4;
  --color-lunatic-lynx-100: #ffddce;
  --color-lunatic-lynx-200: #f6c4ad;
  --color-lunatic-lynx-300: #e7a88b;
  --color-lunatic-lynx-400: #c68b6f;
  --color-lunatic-lynx-500: #ab7155;
  --color-lunatic-lynx-600: #8f583e;
  --color-lunatic-lynx-700: #76442c;
  --color-lunatic-lynx-800: #60341f;
  --color-lunatic-lynx-900: #4d2715;
  --color-lunatic-lynx-950: #32170a;
  --color-gummy-dolphins: #00aad2;
  --color-gummy-dolphins-50: #e1f7ff;
  --color-gummy-dolphins-100: #c4efff;
  --color-gummy-dolphins-200: #88e0ff;
  --color-gummy-dolphins-300: #5ccaee;
  --color-gummy-dolphins-400: #00aad2;
  --color-gummy-dolphins-500: #008eb0;
  --color-gummy-dolphins-600: #00728e;
  --color-gummy-dolphins-700: #005b72;
  --color-gummy-dolphins-800: #00485a;
  --color-gummy-dolphins-900: #003847;
  --color-gummy-dolphins-950: #00242f;
  --color-waterworld: #007284;
  --color-waterworld-50: #e4faff;
  --color-waterworld-100: #c3f4ff;
  --color-waterworld-200: #a2e1f0;
  --color-waterworld-300: #80cbdb;
  --color-waterworld-400: #56abbd;
  --color-waterworld-500: #328ea1;
  --color-waterworld-600: #007284;
  --color-waterworld-700: #005a69;
  --color-waterworld-800: #004753;
  --color-waterworld-900: #003740;
  --color-waterworld-950: #002229;
  --color-maniac-mansion: #004155;
  --color-maniac-mansion-50: #e9f8ff;
  --color-maniac-mansion-100: #d2f1ff;
  --color-maniac-mansion-200: #b6dff1;
  --color-maniac-mansion-300: #9ac9de;
  --color-maniac-mansion-400: #77acc2;
  --color-maniac-mansion-500: #5b92a8;
  --color-maniac-mansion-600: #42788e;
  --color-maniac-mansion-700: #2f6276;
  --color-maniac-mansion-800: #214f61;
  --color-maniac-mansion-900: #004155;
  --color-maniac-mansion-950: #0a2935;
}