Boa to Iron Maiden color palette

About this palette

Boa to Iron Maiden is a 5-color muted palette: #837657 (Boa), #A599B9 (Enchanted Lilac), #37443D (Deep Forest), #1D1C16 (Coco’s Black), #D3CFE3 (Iron Maiden). It mixes yellow, purple, gray tones and feels balanced overall. The strongest text pairing is #1D1C16 on #D3CFE3 with a contrast ratio of 11.22:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Boargb(131, 118, 87)hsl(42, 20%, 43%)
Enchanted Lilacrgb(165, 153, 185)hsl(262, 19%, 66%)
Deep Forestrgb(55, 68, 61)hsl(148, 11%, 24%)
Coco’s Blackrgb(29, 28, 22)hsl(51, 14%, 10%)
Iron Maidenrgb(211, 207, 227)hsl(252, 26%, 85%)

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.22:1 Very good#1D1C16 on #D3CFE3
  • Aa11.22:1 Very good#D3CFE3 on #1D1C16
  • Aa6.71:1 Good#37443D on #D3CFE3
  • Aa6.71:1 Good#D3CFE3 on #37443D
  • Aa6.39:1 Good#A599B9 on #1D1C16
  • Aa6.39:1 Good#1D1C16 on #A599B9
  • Aa3.82:1 Poor#A599B9 on #37443D
  • Aa3.82:1 Poor#37443D on #A599B9

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Boa to Iron Maiden — https://swatchly.xyz/palette/837657-a599b9-37443d-1d1c16-d3cfe3 */
:root {
  --boa: #837657;
  --enchanted-lilac: #a599b9;
  --deep-forest: #37443d;
  --coco-s-black: #1d1c16;
  --iron-maiden: #d3cfe3;
}

Tailwind CSS v4

/* Boa to Iron Maiden — https://swatchly.xyz/palette/837657-a599b9-37443d-1d1c16-d3cfe3 */
@theme {
  --color-boa: #837657;
  --color-boa-50: #fcf5e2;
  --color-boa-100: #f5edd8;
  --color-boa-200: #e5dbc3;
  --color-boa-300: #d2c6ab;
  --color-boa-400: #b5a98a;
  --color-boa-500: #9c8f6f;
  --color-boa-600: #837657;
  --color-boa-700: #695d41;
  --color-boa-800: #53482f;
  --color-boa-900: #403721;
  --color-boa-950: #282212;
  --color-enchanted-lilac: #a599b9;
  --color-enchanted-lilac-50: #f7f2ff;
  --color-enchanted-lilac-100: #eee6fb;
  --color-enchanted-lilac-200: #dad1ea;
  --color-enchanted-lilac-300: #c4b9d6;
  --color-enchanted-lilac-400: #a599b9;
  --color-enchanted-lilac-500: #8a7e9d;
  --color-enchanted-lilac-600: #706482;
  --color-enchanted-lilac-700: #594f69;
  --color-enchanted-lilac-800: #463d54;
  --color-enchanted-lilac-900: #362e42;
  --color-enchanted-lilac-950: #221c2a;
  --color-deep-forest: #37443d;
  --color-deep-forest-50: #eff8f3;
  --color-deep-forest-100: #e4eee8;
  --color-deep-forest-200: #cfdbd4;
  --color-deep-forest-300: #b7c4bd;
  --color-deep-forest-400: #96a59d;
  --color-deep-forest-500: #7b8981;
  --color-deep-forest-600: #616e67;
  --color-deep-forest-700: #4b5750;
  --color-deep-forest-800: #37443d;
  --color-deep-forest-900: #2b342f;
  --color-deep-forest-950: #19201c;
  --color-coco-s-black: #1d1c16;
  --color-coco-s-black-50: #f6f5f1;
  --color-coco-s-black-100: #ecebe6;
  --color-coco-s-black-200: #d9d8d1;
  --color-coco-s-black-300: #c2c1ba;
  --color-coco-s-black-400: #a3a29a;
  --color-coco-s-black-500: #87867e;
  --color-coco-s-black-600: #6c6b63;
  --color-coco-s-black-700: #54534d;
  --color-coco-s-black-800: #41403a;
  --color-coco-s-black-900: #31302b;
  --color-coco-s-black-950: #1d1c16;
  --color-iron-maiden: #d3cfe3;
  --color-iron-maiden-50: #f2f0fb;
  --color-iron-maiden-100: #e7e5f2;
  --color-iron-maiden-200: #d3cfe3;
  --color-iron-maiden-300: #bdbacb;
  --color-iron-maiden-400: #9f9bae;
  --color-iron-maiden-500: #858193;
  --color-iron-maiden-600: #6b6779;
  --color-iron-maiden-700: #555262;
  --color-iron-maiden-800: #43404e;
  --color-iron-maiden-900: #33313c;
  --color-iron-maiden-950: #201e26;
}

Similar palettes