Start generating

Darkest Forest to Bunny Tail color palette

263511Darkest Forest3D3F64Storm Is Coming506BA9BellflowerC481B6Moonlight MauveA7C379Fiddle-Leaf FigFFE0F8Bunny Tail
Open in generator Export PNG, PDF, ASE…

About this palette

Darkest Forest to Bunny Tail is a 6-color cool palette: #263511 (Darkest Forest), #3D3F64 (Storm Is Coming), #506BA9 (Bellflower), #C481B6 (Moonlight Mauve), #A7C379 (Fiddle-Leaf Fig), #FFE0F8 (Bunny Tail). It mixes green, purple, blue, pink tones and feels cool overall. The strongest text pairing is #263511 on #FFE0F8 with a contrast ratio of 10.80:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Darkest Forestrgb(38, 53, 17)hsl(85, 51%, 14%)
Storm Is Comingrgb(61, 63, 100)hsl(237, 24%, 32%)
Bellflowerrgb(80, 107, 169)hsl(222, 36%, 49%)
Moonlight Mauvergb(196, 129, 182)hsl(313, 36%, 64%)
Fiddle-Leaf Figrgb(167, 195, 121)hsl(83, 38%, 62%)
Bunny Tailrgb(255, 224, 248)hsl(314, 100%, 94%)

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.80:1 Very good#263511 on #FFE0F8
  • Aa10.80:1 Very good#FFE0F8 on #263511
  • Aa8.25:1 Very good#3D3F64 on #FFE0F8
  • Aa8.25:1 Very good#FFE0F8 on #3D3F64
  • Aa6.70:1 Good#263511 on #A7C379
  • Aa6.70:1 Good#A7C379 on #263511
  • Aa5.12:1 Good#3D3F64 on #A7C379
  • Aa5.12:1 Good#A7C379 on #3D3F64

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Darkest Forest to Bunny Tail — https://swatchly.xyz/palette/263511-3d3f64-506ba9-c481b6-a7c379-ffe0f8 */
:root {
  --darkest-forest: #263511;
  --storm-is-coming: #3d3f64;
  --bellflower: #506ba9;
  --moonlight-mauve: #c481b6;
  --fiddle-leaf-fig: #a7c379;
  --bunny-tail: #ffe0f8;
}

Tailwind CSS v4

/* Darkest Forest to Bunny Tail — https://swatchly.xyz/palette/263511-3d3f64-506ba9-c481b6-a7c379-ffe0f8 */
@theme {
  --color-darkest-forest: #263511;
  --color-darkest-forest-50: #eefae2;
  --color-darkest-forest-100: #e4f1d6;
  --color-darkest-forest-200: #cfdebf;
  --color-darkest-forest-300: #b7c8a5;
  --color-darkest-forest-400: #96a882;
  --color-darkest-forest-500: #7a8c65;
  --color-darkest-forest-600: #5f714b;
  --color-darkest-forest-700: #495937;
  --color-darkest-forest-800: #374427;
  --color-darkest-forest-900: #263511;
  --color-darkest-forest-950: #18200e;
  --color-storm-is-coming: #3d3f64;
  --color-storm-is-coming-50: #f3f4ff;
  --color-storm-is-coming-100: #e7e9ff;
  --color-storm-is-coming-200: #d1d5f6;
  --color-storm-is-coming-300: #babee4;
  --color-storm-is-coming-400: #9a9ec7;
  --color-storm-is-coming-500: #7f83ac;
  --color-storm-is-coming-600: #656890;
  --color-storm-is-coming-700: #505276;
  --color-storm-is-coming-800: #3d3f64;
  --color-storm-is-coming-900: #2f314b;
  --color-storm-is-coming-950: #1c1e31;
  --color-bellflower: #506ba9;
  --color-bellflower-50: #f0f5ff;
  --color-bellflower-100: #e2ecff;
  --color-bellflower-200: #c6d8ff;
  --color-bellflower-300: #a6c1fb;
  --color-bellflower-400: #85a1e1;
  --color-bellflower-500: #6986c6;
  --color-bellflower-600: #506ba9;
  --color-bellflower-700: #3c548c;
  --color-bellflower-800: #2c4171;
  --color-bellflower-900: #20315a;
  --color-bellflower-950: #121e3c;
  --color-moonlight-mauve: #c481b6;
  --color-moonlight-mauve-50: #ffecfa;
  --color-moonlight-mauve-100: #ffdbf6;
  --color-moonlight-mauve-200: #f6bfe9;
  --color-moonlight-mauve-300: #e1a5d4;
  --color-moonlight-mauve-400: #c481b6;
  --color-moonlight-mauve-500: #a8679b;
  --color-moonlight-mauve-600: #8c4f80;
  --color-moonlight-mauve-700: #733b68;
  --color-moonlight-mauve-800: #5c2c53;
  --color-moonlight-mauve-900: #492042;
  --color-moonlight-mauve-950: #30122b;
  --color-fiddle-leaf-fig: #a7c379;
  --color-fiddle-leaf-fig-50: #e6f8cc;
  --color-fiddle-leaf-fig-100: #d9edbc;
  --color-fiddle-leaf-fig-200: #c2d99f;
  --color-fiddle-leaf-fig-300: #a7c379;
  --color-fiddle-leaf-fig-400: #8aa55e;
  --color-fiddle-leaf-fig-500: #718b43;
  --color-fiddle-leaf-fig-600: #59712b;
  --color-fiddle-leaf-fig-700: #465b19;
  --color-fiddle-leaf-fig-800: #36490c;
  --color-fiddle-leaf-fig-900: #293904;
  --color-fiddle-leaf-fig-950: #182401;
  --color-bunny-tail: #ffe0f8;
  --color-bunny-tail-50: #fff0fb;
  --color-bunny-tail-100: #ffe0f8;
  --color-bunny-tail-200: #e6cfe1;
  --color-bunny-tail-300: #d1b8cb;
  --color-bunny-tail-400: #b397ad;
  --color-bunny-tail-500: #987c92;
  --color-bunny-tail-600: #7c6277;
  --color-bunny-tail-700: #644d5f;
  --color-bunny-tail-800: #4f3b4b;
  --color-bunny-tail-900: #3e2c3a;
  --color-bunny-tail-950: #271b24;
}

Similar palettes