Nuclear Mango to Royal Milk Tea color palette

EA942BNuclear Mango 125C82Oceanic Motion 052D4EMidnight Ocean AC672EMai Tai FDD2B1Royal Milk Tea

About this palette

Nuclear Mango to Royal Milk Tea is a 5-color warm, earthy, vintage palette: #EA942B (Nuclear Mango), #125C82 (Oceanic Motion), #052D4E (Midnight Ocean), #AC672E (Mai Tai), #FDD2B1 (Royal Milk Tea). It mixes orange, blue tones and feels warm overall. The strongest text pairing is #052D4E on #FDD2B1 with a contrast ratio of 10.07:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nuclear Mango	rgb(234, 148, 43)	hsl(33, 82%, 54%)
Oceanic Motion	rgb(18, 92, 130)	hsl(200, 76%, 29%)
Midnight Ocean	rgb(5, 45, 78)	hsl(207, 88%, 16%)
Mai Tai	rgb(172, 103, 46)	hsl(27, 58%, 43%)
Royal Milk Tea	rgb(253, 210, 177)	hsl(26, 95%, 84%)

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.07:1 Very good#052D4E on #FDD2B1
Aa10.07:1 Very good#FDD2B1 on #052D4E
Aa5.88:1 Good#EA942B on #052D4E
Aa5.88:1 Good#052D4E on #EA942B
Aa5.22:1 Good#125C82 on #FDD2B1
Aa5.22:1 Good#FDD2B1 on #125C82
Aa3.18:1 Poor#AC672E on #FDD2B1
Aa3.18:1 Poor#FDD2B1 on #AC672E

Color blindness preview

CSS variables

/* Nuclear Mango to Royal Milk Tea — https://swatchly.xyz/palette/ea942b-125c82-052d4e-ac672e-fdd2b1 */
:root {
  --nuclear-mango: #ea942b;
  --oceanic-motion: #125c82;
  --midnight-ocean: #052d4e;
  --mai-tai: #ac672e;
  --royal-milk-tea: #fdd2b1;
}

Tailwind CSS v4

/* Nuclear Mango to Royal Milk Tea — https://swatchly.xyz/palette/ea942b-125c82-052d4e-ac672e-fdd2b1 */
@theme {
  --color-nuclear-mango: #ea942b;
  --color-nuclear-mango-50: #fff7ef;
  --color-nuclear-mango-100: #ffecdb;
  --color-nuclear-mango-200: #ffd5ad;
  --color-nuclear-mango-300: #ffb86f;
  --color-nuclear-mango-400: #ea942b;
  --color-nuclear-mango-500: #c77800;
  --color-nuclear-mango-600: #a16000;
  --color-nuclear-mango-700: #804b00;
  --color-nuclear-mango-800: #643900;
  --color-nuclear-mango-900: #4d2b00;
  --color-nuclear-mango-950: #301900;
  --color-oceanic-motion: #125c82;
  --color-oceanic-motion-50: #ebf7ff;
  --color-oceanic-motion-100: #d8efff;
  --color-oceanic-motion-200: #aedfff;
  --color-oceanic-motion-300: #91c9ee;
  --color-oceanic-motion-400: #6aaad2;
  --color-oceanic-motion-500: #4c8eb7;
  --color-oceanic-motion-600: #31739a;
  --color-oceanic-motion-700: #125c82;
  --color-oceanic-motion-800: #0c4866;
  --color-oceanic-motion-900: #033751;
  --color-oceanic-motion-950: #002235;
  --color-midnight-ocean: #052d4e;
  --color-midnight-ocean-50: #eef6ff;
  --color-midnight-ocean-100: #dcedff;
  --color-midnight-ocean-200: #bcdbfb;
  --color-midnight-ocean-300: #a2c5e8;
  --color-midnight-ocean-400: #7da4cb;
  --color-midnight-ocean-500: #6087ae;
  --color-midnight-ocean-600: #466b8f;
  --color-midnight-ocean-700: #315373;
  --color-midnight-ocean-800: #223e59;
  --color-midnight-ocean-900: #052d4e;
  --color-midnight-ocean-950: #0a1b2a;
  --color-mai-tai: #ac672e;
  --color-mai-tai-50: #fff0e5;
  --color-mai-tai-100: #ffe0ca;
  --color-mai-tai-200: #fec398;
  --color-mai-tai-300: #eaa877;
  --color-mai-tai-400: #cb854e;
  --color-mai-tai-500: #ac672e;
  --color-mai-tai-600: #905015;
  --color-mai-tai-700: #763d01;
  --color-mai-tai-800: #5e2f00;
  --color-mai-tai-900: #4b2400;
  --color-mai-tai-950: #311500;
  --color-royal-milk-tea: #fdd2b1;
  --color-royal-milk-tea-50: #fff6ef;
  --color-royal-milk-tea-100: #ffeadb;
  --color-royal-milk-tea-200: #fdd2b1;
  --color-royal-milk-tea-300: #e0bca1;
  --color-royal-milk-tea-400: #c29b7d;
  --color-royal-milk-tea-500: #a67f60;
  --color-royal-milk-tea-600: #896447;
  --color-royal-milk-tea-700: #6f4e33;
  --color-royal-milk-tea-800: #583b23;
  --color-royal-milk-tea-900: #452d18;
  --color-royal-milk-tea-950: #2c1b0c;
}