Botanical Night to Innocent Snowdrop color palette

133F38Botanical Night 225748Evergreen 6B549APassion Flower B27F51Komodo Dragon D1A066Kombucha CCC3F4Innocent Snowdrop

Open in generator Export PNG, PDF, ASE…

About this palette

Botanical Night to Innocent Snowdrop is a 6-color cool palette: #133F38 (Botanical Night), #225748 (Evergreen), #6B549A (Passion Flower), #B27F51 (Komodo Dragon), #D1A066 (Kombucha), #CCC3F4 (Innocent Snowdrop). It mixes turquoise, purple, orange tones and feels cool overall. The strongest text pairing is #133F38 on #CCC3F4 with a contrast ratio of 7.06:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Night	rgb(19, 63, 56)	hsl(170, 54%, 16%)
Evergreen	rgb(34, 87, 72)	hsl(163, 44%, 24%)
Passion Flower	rgb(107, 84, 154)	hsl(260, 29%, 47%)
Komodo Dragon	rgb(178, 127, 81)	hsl(28, 39%, 51%)
Kombucha	rgb(209, 160, 102)	hsl(33, 54%, 61%)
Innocent Snowdrop	rgb(204, 195, 244)	hsl(251, 69%, 86%)

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.

Aa7.06:1 Very good#133F38 on #CCC3F4
Aa7.06:1 Very good#CCC3F4 on #133F38
Aa5.02:1 Good#225748 on #CCC3F4
Aa5.02:1 Good#CCC3F4 on #225748
Aa4.97:1 Good#133F38 on #D1A066
Aa4.97:1 Good#D1A066 on #133F38
Aa3.77:1 Poor#6B549A on #CCC3F4
Aa3.77:1 Poor#CCC3F4 on #6B549A

Color blindness preview

CSS variables

/* Botanical Night to Innocent Snowdrop — https://swatchly.xyz/palette/133f38-225748-6b549a-b27f51-d1a066-ccc3f4 */
:root {
  --botanical-night: #133f38;
  --evergreen: #225748;
  --passion-flower: #6b549a;
  --komodo-dragon: #b27f51;
  --kombucha: #d1a066;
  --innocent-snowdrop: #ccc3f4;
}

Tailwind CSS v4

/* Botanical Night to Innocent Snowdrop — https://swatchly.xyz/palette/133f38-225748-6b549a-b27f51-d1a066-ccc3f4 */
@theme {
  --color-botanical-night: #133f38;
  --color-botanical-night-50: #e3fcf6;
  --color-botanical-night-100: #d6f2ec;
  --color-botanical-night-200: #bee0d9;
  --color-botanical-night-300: #a4cac2;
  --color-botanical-night-400: #82aca4;
  --color-botanical-night-500: #669289;
  --color-botanical-night-600: #4d786f;
  --color-botanical-night-700: #3a6159;
  --color-botanical-night-800: #2a4d47;
  --color-botanical-night-900: #133f38;
  --color-botanical-night-950: #102723;
  --color-evergreen: #225748;
  --color-evergreen-50: #dffdf2;
  --color-evergreen-100: #d3f4e8;
  --color-evergreen-200: #b8e0d2;
  --color-evergreen-300: #9bc9b9;
  --color-evergreen-400: #75a998;
  --color-evergreen-500: #578c7b;
  --color-evergreen-600: #3d6f60;
  --color-evergreen-700: #225748;
  --color-evergreen-800: #1c4338;
  --color-evergreen-900: #13342b;
  --color-evergreen-950: #082019;
  --color-passion-flower: #6b549a;
  --color-passion-flower-50: #f6f3ff;
  --color-passion-flower-100: #ece5ff;
  --color-passion-flower-200: #d9cbff;
  --color-passion-flower-300: #c3aff3;
  --color-passion-flower-400: #a38dd6;
  --color-passion-flower-500: #8770b8;
  --color-passion-flower-600: #6b549a;
  --color-passion-flower-700: #55417e;
  --color-passion-flower-800: #433166;
  --color-passion-flower-900: #342551;
  --color-passion-flower-950: #211535;
  --color-komodo-dragon: #b27f51;
  --color-komodo-dragon-50: #fff4eb;
  --color-komodo-dragon-100: #ffe9d6;
  --color-komodo-dragon-200: #fad2af;
  --color-komodo-dragon-300: #e8ba93;
  --color-komodo-dragon-400: #cc9a6e;
  --color-komodo-dragon-500: #b27f51;
  --color-komodo-dragon-600: #946436;
  --color-komodo-dragon-700: #794d22;
  --color-komodo-dragon-800: #613a13;
  --color-komodo-dragon-900: #4c2b09;
  --color-komodo-dragon-950: #311a03;
  --color-kombucha: #d1a066;
  --color-kombucha-50: #fff7ee;
  --color-kombucha-100: #ffedd8;
  --color-kombucha-200: #fbd7ae;
  --color-kombucha-300: #eac091;
  --color-kombucha-400: #d1a066;
  --color-kombucha-500: #b2834a;
  --color-kombucha-600: #94672d;
  --color-kombucha-700: #794f16;
  --color-kombucha-800: #603c05;
  --color-kombucha-900: #4a2c00;
  --color-kombucha-950: #2f1a00;
  --color-innocent-snowdrop: #ccc3f4;
  --color-innocent-snowdrop-50: #faf9ff;
  --color-innocent-snowdrop-100: #f2f0ff;
  --color-innocent-snowdrop-200: #e1dbfd;
  --color-innocent-snowdrop-300: #ccc3f4;
  --color-innocent-snowdrop-400: #aba2cf;
  --color-innocent-snowdrop-500: #8e85b2;
  --color-innocent-snowdrop-600: #726994;
  --color-innocent-snowdrop-700: #595179;
  --color-innocent-snowdrop-800: #453e60;
  --color-innocent-snowdrop-900: #342e4a;
  --color-innocent-snowdrop-950: #201c30;
}