Dark Olive to Blue Mana Color Palette

About this palette

Dark Olive to Blue Mana is a 4-color vintage palette: #3B3F00 (Dark Olive), #925E77 (Indian Silk), #7F9C4A (Rosemarried), #6CC6FF (Blue Mana). It mixes green, red, blue tones and feels balanced overall. The strongest text pairing is #3B3F00 on #6CC6FF with a contrast ratio of 5.88:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Olive	rgb(59, 63, 0)	hsl(64, 100%, 12%)
Indian Silk	rgb(146, 94, 119)	hsl(331, 22%, 47%)
Rosemarried	rgb(127, 156, 74)	hsl(81, 36%, 45%)
Blue Mana	rgb(108, 198, 255)	hsl(203, 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.

Aa5.88:1 Good#3B3F00 on #6CC6FF
Aa5.88:1 Good#6CC6FF on #3B3F00
Aa3.56:1 Poor#3B3F00 on #7F9C4A
Aa3.56:1 Poor#7F9C4A on #3B3F00

Color blindness preview

CSS variables

/* Dark Olive to Blue Mana — https://swatchly.xyz/palette/3b3f00-925e77-7f9c4a-6cc6ff */
:root {
  --dark-olive: #3b3f00;
  --indian-silk: #925e77;
  --rosemarried: #7f9c4a;
  --blue-mana: #6cc6ff;
}

Tailwind CSS v4

/* Dark Olive to Blue Mana — https://swatchly.xyz/palette/3b3f00-925e77-7f9c4a-6cc6ff */
@theme {
  --color-dark-olive: #3b3f00;
  --color-dark-olive-50: #f4f9d8;
  --color-dark-olive-100: #eaefca;
  --color-dark-olive-200: #d7dcb0;
  --color-dark-olive-300: #bfc592;
  --color-dark-olive-400: #9ea46d;
  --color-dark-olive-500: #81874f;
  --color-dark-olive-600: #666b35;
  --color-dark-olive-700: #4f5322;
  --color-dark-olive-800: #3b3f00;
  --color-dark-olive-900: #2d300b;
  --color-dark-olive-950: #1b1d04;
  --color-indian-silk: #925e77;
  --color-indian-silk-50: #fff1f7;
  --color-indian-silk-100: #ffe3ef;
  --color-indian-silk-200: #f7cbdf;
  --color-indian-silk-300: #e4b3ca;
  --color-indian-silk-400: #c893ac;
  --color-indian-silk-500: #ad7791;
  --color-indian-silk-600: #925e77;
  --color-indian-silk-700: #77485f;
  --color-indian-silk-800: #5f364a;
  --color-indian-silk-900: #4b2839;
  --color-indian-silk-950: #301724;
  --color-rosemarried: #7f9c4a;
  --color-rosemarried-50: #edffd2;
  --color-rosemarried-100: #e4f8c6;
  --color-rosemarried-200: #d0e7ac;
  --color-rosemarried-300: #b9d38f;
  --color-rosemarried-400: #9ab669;
  --color-rosemarried-500: #7f9c4a;
  --color-rosemarried-600: #637f2d;
  --color-rosemarried-700: #4d6515;
  --color-rosemarried-800: #3a4f02;
  --color-rosemarried-900: #2b3d00;
  --color-rosemarried-950: #192500;
  --color-blue-mana: #6cc6ff;
  --color-blue-mana-50: #e6f5ff;
  --color-blue-mana-100: #d1ecff;
  --color-blue-mana-200: #a5dbff;
  --color-blue-mana-300: #6cc6ff;
  --color-blue-mana-400: #4fa7dc;
  --color-blue-mana-500: #2c8cc1;
  --color-blue-mana-600: #0171a4;
  --color-blue-mana-700: #005a84;
  --color-blue-mana-800: #004769;
  --color-blue-mana-900: #003753;
  --color-blue-mana-950: #002236;
}