Mysterious Mixture to Rusty Red Color Palette

About this palette

Mysterious Mixture to Rusty Red is a 5-color cool palette: #1F4F0C (Mysterious Mixture), #68B8D0 (High Dive), #EEC5FF (Neon Boneyard), #9766B6 (Viola), #B43000 (Rusty Red). It mixes green, blue, purple, red tones and feels cool overall. The strongest text pairing is #1F4F0C on #EEC5FF with a contrast ratio of 6.45:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mysterious Mixture	rgb(31, 79, 12)	hsl(103, 74%, 18%)
High Dive	rgb(104, 184, 208)	hsl(194, 53%, 61%)
Neon Boneyard	rgb(238, 197, 255)	hsl(282, 100%, 89%)
Viola	rgb(151, 102, 182)	hsl(277, 35%, 56%)
Rusty Red	rgb(180, 48, 0)	hsl(16, 100%, 35%)

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.

Aa6.45:1 Good#1F4F0C on #EEC5FF
Aa6.45:1 Good#EEC5FF on #1F4F0C
Aa4.29:1 Poor#1F4F0C on #68B8D0
Aa4.29:1 Poor#68B8D0 on #1F4F0C
Aa4.18:1 Poor#EEC5FF on #B43000
Aa4.18:1 Poor#B43000 on #EEC5FF

Color blindness preview

CSS variables

/* Mysterious Mixture to Rusty Red — https://swatchly.xyz/palette/1f4f0c-68b8d0-eec5ff-9766b6-b43000 */
:root {
  --mysterious-mixture: #1f4f0c;
  --high-dive: #68b8d0;
  --neon-boneyard: #eec5ff;
  --viola: #9766b6;
  --rusty-red: #b43000;
}

Tailwind CSS v4

/* Mysterious Mixture to Rusty Red — https://swatchly.xyz/palette/1f4f0c-68b8d0-eec5ff-9766b6-b43000 */
@theme {
  --color-mysterious-mixture: #1f4f0c;
  --color-mysterious-mixture-50: #e3ffda;
  --color-mysterious-mixture-100: #d5f7cc;
  --color-mysterious-mixture-200: #bde5b2;
  --color-mysterious-mixture-300: #a3d096;
  --color-mysterious-mixture-400: #80b171;
  --color-mysterious-mixture-500: #639654;
  --color-mysterious-mixture-600: #4a7a3b;
  --color-mysterious-mixture-700: #366228;
  --color-mysterious-mixture-800: #1f4f0c;
  --color-mysterious-mixture-900: #1b3c10;
  --color-mysterious-mixture-950: #0e2606;
  --color-high-dive: #68b8d0;
  --color-high-dive-50: #effbff;
  --color-high-dive-100: #daf6ff;
  --color-high-dive-200: #b2e8fa;
  --color-high-dive-300: #95d4e8;
  --color-high-dive-400: #68b8d0;
  --color-high-dive-500: #4a9ab1;
  --color-high-dive-600: #2a7d94;
  --color-high-dive-700: #0d6478;
  --color-high-dive-800: #004d5f;
  --color-high-dive-900: #003b49;
  --color-high-dive-950: #00242d;
  --color-neon-boneyard: #eec5ff;
  --color-neon-boneyard-50: #fbf0ff;
  --color-neon-boneyard-100: #f6e2ff;
  --color-neon-boneyard-200: #eec5ff;
  --color-neon-boneyard-300: #d4b1e2;
  --color-neon-boneyard-400: #b691c6;
  --color-neon-boneyard-500: #9b75aa;
  --color-neon-boneyard-600: #7f5b8e;
  --color-neon-boneyard-700: #674674;
  --color-neon-boneyard-800: #52355d;
  --color-neon-boneyard-900: #40274a;
  --color-neon-boneyard-950: #291730;
  --color-viola: #9766b6;
  --color-viola-50: #f9f0ff;
  --color-viola-100: #f2e0ff;
  --color-viola-200: #e6c3ff;
  --color-viola-300: #d3a6f1;
  --color-viola-400: #b483d3;
  --color-viola-500: #9766b6;
  --color-viola-600: #7c4e99;
  --color-viola-700: #653a7f;
  --color-viola-800: #512b67;
  --color-viola-900: #402052;
  --color-viola-950: #291237;
  --color-rusty-red: #b43000;
  --color-rusty-red-50: #fff2ee;
  --color-rusty-red-100: #ffe3db;
  --color-rusty-red-200: #ffc6b6;
  --color-rusty-red-300: #ffa289;
  --color-rusty-red-400: #f3704d;
  --color-rusty-red-500: #d5502b;
  --color-rusty-red-600: #b43000;
  --color-rusty-red-700: #902400;
  --color-rusty-red-800: #731b00;
  --color-rusty-red-900: #5a1300;
  --color-rusty-red-950: #3b0900;
}