Atomic Orange to Maniac Mansion Color Palette

About this palette

Atomic Orange to Maniac Mansion is a 4-color palette: #F58B00 (Atomic Orange), #AF5AB3 (Prickly Purple), #EAFFEF (Snow White), #043C57 (Maniac Mansion). It mixes orange, pink, white, blue tones and feels cool overall. The strongest text pairing is #EAFFEF on #043C57 with a contrast ratio of 11.21:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Atomic Orange	rgb(245, 139, 0)	hsl(34, 100%, 48%)
Prickly Purple	rgb(175, 90, 179)	hsl(297, 37%, 53%)
Snow White	rgb(234, 255, 239)	hsl(134, 100%, 96%)
Maniac Mansion	rgb(4, 60, 87)	hsl(200, 91%, 18%)

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.

Aa11.21:1 Very good#EAFFEF on #043C57
Aa11.21:1 Very good#043C57 on #EAFFEF
Aa4.79:1 Good#F58B00 on #043C57
Aa4.79:1 Good#043C57 on #F58B00
Aa4.06:1 Poor#AF5AB3 on #EAFFEF
Aa4.06:1 Poor#EAFFEF on #AF5AB3

Color blindness preview

CSS variables

/* Atomic Orange to Maniac Mansion — https://swatchly.xyz/palette/f58b00-af5ab3-eaffef-043c57 */
:root {
  --atomic-orange: #f58b00;
  --prickly-purple: #af5ab3;
  --snow-white: #eaffef;
  --maniac-mansion: #043c57;
}

Tailwind CSS v4

/* Atomic Orange to Maniac Mansion — https://swatchly.xyz/palette/f58b00-af5ab3-eaffef-043c57 */
@theme {
  --color-atomic-orange: #f58b00;
  --color-atomic-orange-50: #fff6ef;
  --color-atomic-orange-100: #ffebdc;
  --color-atomic-orange-200: #ffd4b1;
  --color-atomic-orange-300: #ffb677;
  --color-atomic-orange-400: #f58b00;
  --color-atomic-orange-500: #cc7300;
  --color-atomic-orange-600: #a55c00;
  --color-atomic-orange-700: #834800;
  --color-atomic-orange-800: #673700;
  --color-atomic-orange-900: #4f2900;
  --color-atomic-orange-950: #321800;
  --color-prickly-purple: #af5ab3;
  --color-prickly-purple-50: #ffeeff;
  --color-prickly-purple-100: #ffdcff;
  --color-prickly-purple-200: #fdb9ff;
  --color-prickly-purple-300: #ea9ded;
  --color-prickly-purple-400: #cc78d0;
  --color-prickly-purple-500: #af5ab3;
  --color-prickly-purple-600: #924196;
  --color-prickly-purple-700: #782e7c;
  --color-prickly-purple-800: #611f64;
  --color-prickly-purple-900: #4d1450;
  --color-prickly-purple-950: #320935;
  --color-snow-white: #eaffef;
  --color-snow-white-50: #eaffef;
  --color-snow-white-100: #e5f2e8;
  --color-snow-white-200: #cfded3;
  --color-snow-white-300: #b7c8bb;
  --color-snow-white-400: #96a89a;
  --color-snow-white-500: #798c7e;
  --color-snow-white-600: #5f7164;
  --color-snow-white-700: #4a5a4e;
  --color-snow-white-800: #38463c;
  --color-snow-white-900: #2a362d;
  --color-snow-white-950: #19221b;
  --color-maniac-mansion: #043c57;
  --color-maniac-mansion-50: #ebf7ff;
  --color-maniac-mansion-100: #d7efff;
  --color-maniac-mansion-200: #b8def6;
  --color-maniac-mansion-300: #9cc8e4;
  --color-maniac-mansion-400: #79a9c8;
  --color-maniac-mansion-500: #5d8fad;
  --color-maniac-mansion-600: #447592;
  --color-maniac-mansion-700: #315e79;
  --color-maniac-mansion-800: #224b63;
  --color-maniac-mansion-900: #043c57;
  --color-maniac-mansion-950: #0b2635;
}