Enchanted Forest to Noir Mystique color palette

558121Enchanted Forest 66AB2EGreen Symphony 573D00Pineapple FEC8FFSugar Chic 79B1FFFennel Flower 241802Noir Mystique

Open in generator Export PNG, PDF, ASE…

About this palette

Enchanted Forest to Noir Mystique is a 6-color cool, earthy palette: #558121 (Enchanted Forest), #66AB2E (Green Symphony), #573D00 (Pineapple), #FEC8FF (Sugar Chic), #79B1FF (Fennel Flower), #241802 (Noir Mystique). It mixes green, brown, pink, blue tones and feels cool overall. The strongest text pairing is #FEC8FF on #241802 with a contrast ratio of 12.37:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Enchanted Forest	rgb(85, 129, 33)	hsl(88, 59%, 32%)
Green Symphony	rgb(102, 171, 46)	hsl(93, 58%, 43%)
Pineapple	rgb(87, 61, 0)	hsl(42, 100%, 17%)
Sugar Chic	rgb(254, 200, 255)	hsl(299, 100%, 89%)
Fennel Flower	rgb(121, 177, 255)	hsl(215, 100%, 74%)
Noir Mystique	rgb(36, 24, 2)	hsl(39, 89%, 7%)

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.

Aa12.37:1 Super#FEC8FF on #241802
Aa12.37:1 Super#241802 on #FEC8FF
Aa7.91:1 Very good#79B1FF on #241802
Aa7.91:1 Very good#241802 on #79B1FF
Aa7.20:1 Very good#573D00 on #FEC8FF
Aa7.20:1 Very good#FEC8FF on #573D00
Aa6.16:1 Good#66AB2E on #241802
Aa6.16:1 Good#241802 on #66AB2E

Color blindness preview

CSS variables

/* Enchanted Forest to Noir Mystique — https://swatchly.xyz/palette/558121-66ab2e-573d00-fec8ff-79b1ff-241802 */
:root {
  --enchanted-forest: #558121;
  --green-symphony: #66ab2e;
  --pineapple: #573d00;
  --sugar-chic: #fec8ff;
  --fennel-flower: #79b1ff;
  --noir-mystique: #241802;
}

Tailwind CSS v4

/* Enchanted Forest to Noir Mystique — https://swatchly.xyz/palette/558121-66ab2e-573d00-fec8ff-79b1ff-241802 */
@theme {
  --color-enchanted-forest: #558121;
  --color-enchanted-forest-50: #e6ffd1;
  --color-enchanted-forest-100: #d9f8c0;
  --color-enchanted-forest-200: #c3e8a4;
  --color-enchanted-forest-300: #abd486;
  --color-enchanted-forest-400: #89b65f;
  --color-enchanted-forest-500: #6e9b3f;
  --color-enchanted-forest-600: #558121;
  --color-enchanted-forest-700: #406705;
  --color-enchanted-forest-800: #305100;
  --color-enchanted-forest-900: #243e00;
  --color-enchanted-forest-950: #152700;
  --color-green-symphony: #66ab2e;
  --color-green-symphony-50: #d8ffc1;
  --color-green-symphony-100: #c6f6a9;
  --color-green-symphony-200: #aae287;
  --color-green-symphony-300: #8ccb62;
  --color-green-symphony-400: #66ab2e;
  --color-green-symphony-500: #4d9100;
  --color-green-symphony-600: #3d7500;
  --color-green-symphony-700: #305e00;
  --color-green-symphony-800: #254a00;
  --color-green-symphony-900: #1c3a00;
  --color-green-symphony-950: #102600;
  --color-pineapple: #573d00;
  --color-pineapple-50: #fff4e0;
  --color-pineapple-100: #fce9c7;
  --color-pineapple-200: #ebd4ad;
  --color-pineapple-300: #d7bd90;
  --color-pineapple-400: #b99d6b;
  --color-pineapple-500: #9e814d;
  --color-pineapple-600: #826734;
  --color-pineapple-700: #695121;
  --color-pineapple-800: #573d00;
  --color-pineapple-900: #422f0a;
  --color-pineapple-950: #2a1d03;
  --color-sugar-chic: #fec8ff;
  --color-sugar-chic-50: #fff5ff;
  --color-sugar-chic-100: #ffe7ff;
  --color-sugar-chic-200: #fec8ff;
  --color-sugar-chic-300: #e0b4e1;
  --color-sugar-chic-400: #c292c3;
  --color-sugar-chic-500: #a675a7;
  --color-sugar-chic-600: #895a8a;
  --color-sugar-chic-700: #6f4470;
  --color-sugar-chic-800: #573259;
  --color-sugar-chic-900: #452546;
  --color-sugar-chic-950: #2c152d;
  --color-fennel-flower: #79b1ff;
  --color-fennel-flower-50: #f7faff;
  --color-fennel-flower-100: #ebf3ff;
  --color-fennel-flower-200: #cfe3ff;
  --color-fennel-flower-300: #adcfff;
  --color-fennel-flower-400: #79b1ff;
  --color-fennel-flower-500: #5c92dd;
  --color-fennel-flower-600: #3f74bd;
  --color-fennel-flower-700: #295b9e;
  --color-fennel-flower-800: #194580;
  --color-fennel-flower-900: #0e3465;
  --color-fennel-flower-950: #051e41;
  --color-noir-mystique: #241802;
  --color-noir-mystique-50: #fdf4e4;
  --color-noir-mystique-100: #f4ead8;
  --color-noir-mystique-200: #e2d6c1;
  --color-noir-mystique-300: #cdbfa8;
  --color-noir-mystique-400: #ae9f86;
  --color-noir-mystique-500: #928369;
  --color-noir-mystique-600: #76684f;
  --color-noir-mystique-700: #5d503a;
  --color-noir-mystique-800: #483d2a;
  --color-noir-mystique-900: #362d1d;
  --color-noir-mystique-950: #241802;
}