Maniac Mansion to Salmon Nigiri Color Palette

About this palette

Maniac Mansion to Salmon Nigiri is a 5-color warm, vintage palette: #004154 (Maniac Mansion), #9E3F04 (Muddy), #A86846 (Hazel), #CFF0FF (Water), #FF8C6C (Salmon Nigiri). It mixes blue, brown, red tones and feels warm overall. The strongest text pairing is #004154 on #CFF0FF with a contrast ratio of 9.32:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maniac Mansion	rgb(0, 65, 84)	hsl(194, 100%, 16%)
Muddy	rgb(158, 63, 4)	hsl(23, 95%, 32%)
Hazel	rgb(168, 104, 70)	hsl(21, 41%, 47%)
Water	rgb(207, 240, 255)	hsl(199, 100%, 91%)
Salmon Nigiri	rgb(255, 140, 108)	hsl(13, 100%, 71%)

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.32:1 Very good#004154 on #CFF0FF
Aa9.32:1 Very good#CFF0FF on #004154
Aa5.55:1 Good#9E3F04 on #CFF0FF
Aa5.55:1 Good#CFF0FF on #9E3F04
Aa4.89:1 Good#004154 on #FF8C6C
Aa4.89:1 Good#FF8C6C on #004154
Aa3.71:1 Poor#A86846 on #CFF0FF
Aa3.71:1 Poor#CFF0FF on #A86846

Color blindness preview

CSS variables

/* Maniac Mansion to Salmon Nigiri — https://swatchly.xyz/palette/004154-9e3f04-a86846-cff0ff-ff8c6c */
:root {
  --maniac-mansion: #004154;
  --muddy: #9e3f04;
  --hazel: #a86846;
  --water: #cff0ff;
  --salmon-nigiri: #ff8c6c;
}

Tailwind CSS v4

/* Maniac Mansion to Salmon Nigiri — https://swatchly.xyz/palette/004154-9e3f04-a86846-cff0ff-ff8c6c */
@theme {
  --color-maniac-mansion: #004154;
  --color-maniac-mansion-50: #e8f8ff;
  --color-maniac-mansion-100: #d1f1ff;
  --color-maniac-mansion-200: #b6dff0;
  --color-maniac-mansion-300: #9ac9dd;
  --color-maniac-mansion-400: #77acc1;
  --color-maniac-mansion-500: #5b92a7;
  --color-maniac-mansion-600: #42788d;
  --color-maniac-mansion-700: #2f6275;
  --color-maniac-mansion-800: #214f60;
  --color-maniac-mansion-900: #004154;
  --color-maniac-mansion-950: #0a2934;
  --color-muddy: #9e3f04;
  --color-muddy-50: #fff2ed;
  --color-muddy-100: #ffe2d6;
  --color-muddy-200: #ffc4ab;
  --color-muddy-300: #fca078;
  --color-muddy-400: #de7b4e;
  --color-muddy-500: #be5c2d;
  --color-muddy-600: #9e3f04;
  --color-muddy-700: #7f3000;
  --color-muddy-800: #652400;
  --color-muddy-900: #501b00;
  --color-muddy-950: #340f00;
  --color-hazel: #a86846;
  --color-hazel-50: #ffefe8;
  --color-hazel-100: #ffdfd0;
  --color-hazel-200: #fac3a7;
  --color-hazel-300: #e6a889;
  --color-hazel-400: #c78563;
  --color-hazel-500: #a86846;
  --color-hazel-600: #8c5130;
  --color-hazel-700: #733e20;
  --color-hazel-800: #5d2f15;
  --color-hazel-900: #4a230c;
  --color-hazel-950: #311505;
  --color-water: #cff0ff;
  --color-water-50: #e6f7ff;
  --color-water-100: #cff0ff;
  --color-water-200: #c3dbe6;
  --color-water-300: #aac5d1;
  --color-water-400: #88a6b4;
  --color-water-500: #6d8b99;
  --color-water-600: #54717d;
  --color-water-700: #3f5a65;
  --color-water-800: #2f4650;
  --color-water-900: #22363f;
  --color-water-950: #132228;
  --color-salmon-nigiri: #ff8c6c;
  --color-salmon-nigiri-50: #fff9f7;
  --color-salmon-nigiri-100: #ffefeb;
  --color-salmon-nigiri-200: #ffd8cd;
  --color-salmon-nigiri-300: #ffbba8;
  --color-salmon-nigiri-400: #ff8c6c;
  --color-salmon-nigiri-500: #dc6e4f;
  --color-salmon-nigiri-600: #bb4f31;
  --color-salmon-nigiri-700: #9a371a;
  --color-salmon-nigiri-800: #7c2408;
  --color-salmon-nigiri-900: #611700;
  --color-salmon-nigiri-950: #3d0a00;
}