Botanical Night to Parisian Patina color palette

1D3C37Botanical Night C9E1E7Melting Point 305450Hunter 556D55Cactus 8EC1C7Cerulean Skies 769B84Parisian Patina

Open in generator Export PNG, PDF, ASE…

About this palette

Botanical Night to Parisian Patina is a 6-color muted, cool palette: #1D3C37 (Botanical Night), #C9E1E7 (Melting Point), #305450 (Hunter), #556D55 (Cactus), #8EC1C7 (Cerulean Skies), #769B84 (Parisian Patina). It mixes turquoise, gray, green tones and feels cool overall. The strongest text pairing is #1D3C37 on #C9E1E7 with a contrast ratio of 8.79:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Night	rgb(29, 60, 55)	hsl(170, 35%, 17%)
Melting Point	rgb(201, 225, 231)	hsl(192, 38%, 85%)
Hunter	rgb(48, 84, 80)	hsl(173, 27%, 26%)
Cactus	rgb(85, 109, 85)	hsl(120, 12%, 38%)
Cerulean Skies	rgb(142, 193, 199)	hsl(186, 34%, 67%)
Parisian Patina	rgb(118, 155, 132)	hsl(143, 16%, 54%)

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.

Aa8.79:1 Very good#1D3C37 on #C9E1E7
Aa8.79:1 Very good#C9E1E7 on #1D3C37
Aa6.14:1 Good#C9E1E7 on #305450
Aa6.14:1 Good#305450 on #C9E1E7
Aa6.05:1 Good#1D3C37 on #8EC1C7
Aa6.05:1 Good#8EC1C7 on #1D3C37
Aa4.22:1 Poor#305450 on #8EC1C7
Aa4.22:1 Poor#8EC1C7 on #305450

Color blindness preview

CSS variables

/* Botanical Night to Parisian Patina — https://swatchly.xyz/palette/1d3c37-c9e1e7-305450-556d55-8ec1c7-769b84 */
:root {
  --botanical-night: #1d3c37;
  --melting-point: #c9e1e7;
  --hunter: #305450;
  --cactus: #556d55;
  --cerulean-skies: #8ec1c7;
  --parisian-patina: #769b84;
}

Tailwind CSS v4

/* Botanical Night to Parisian Patina — https://swatchly.xyz/palette/1d3c37-c9e1e7-305450-556d55-8ec1c7-769b84 */
@theme {
  --color-botanical-night: #1d3c37;
  --color-botanical-night-50: #e7faf6;
  --color-botanical-night-100: #dbf1ec;
  --color-botanical-night-200: #c4ded9;
  --color-botanical-night-300: #abc8c2;
  --color-botanical-night-400: #8aaaa4;
  --color-botanical-night-500: #6e8f89;
  --color-botanical-night-600: #55756f;
  --color-botanical-night-700: #415e59;
  --color-botanical-night-800: #314b46;
  --color-botanical-night-900: #1d3c37;
  --color-botanical-night-950: #152522;
  --color-melting-point: #c9e1e7;
  --color-melting-point-50: #eefbfe;
  --color-melting-point-100: #e4f2f6;
  --color-melting-point-200: #c9e1e7;
  --color-melting-point-300: #b5c9ce;
  --color-melting-point-400: #93a9ae;
  --color-melting-point-500: #778d92;
  --color-melting-point-600: #5c7177;
  --color-melting-point-700: #465a5e;
  --color-melting-point-800: #35464a;
  --color-melting-point-900: #273639;
  --color-melting-point-950: #172124;
  --color-hunter: #305450;
  --color-hunter-50: #e5fbf8;
  --color-hunter-100: #d9f1ee;
  --color-hunter-200: #bfddd9;
  --color-hunter-300: #a4c6c1;
  --color-hunter-400: #80a5a0;
  --color-hunter-500: #638884;
  --color-hunter-600: #496c68;
  --color-hunter-700: #305450;
  --color-hunter-800: #26413e;
  --color-hunter-900: #1b3230;
  --color-hunter-950: #0f1f1d;
  --color-cactus: #556d55;
  --color-cactus-50: #ebfaeb;
  --color-cactus-100: #def0de;
  --color-cactus-200: #c7dcc7;
  --color-cactus-300: #aec5ae;
  --color-cactus-400: #8ca58c;
  --color-cactus-500: #708970;
  --color-cactus-600: #556d55;
  --color-cactus-700: #425742;
  --color-cactus-800: #324432;
  --color-cactus-900: #253525;
  --color-cactus-950: #162116;
  --color-cerulean-skies: #8ec1c7;
  --color-cerulean-skies-50: #d8f6fa;
  --color-cerulean-skies-100: #c9ebef;
  --color-cerulean-skies-200: #afd7dc;
  --color-cerulean-skies-300: #8ec1c7;
  --color-cerulean-skies-400: #72a3a9;
  --color-cerulean-skies-500: #58898f;
  --color-cerulean-skies-600: #407076;
  --color-cerulean-skies-700: #2e5a5f;
  --color-cerulean-skies-800: #21484c;
  --color-cerulean-skies-900: #17393d;
  --color-cerulean-skies-950: #0b2326;
  --color-parisian-patina: #769b84;
  --color-parisian-patina-50: #e8fdf0;
  --color-parisian-patina-100: #dff6e7;
  --color-parisian-patina-200: #cae5d4;
  --color-parisian-patina-300: #b2d2bd;
  --color-parisian-patina-400: #91b59e;
  --color-parisian-patina-500: #769b84;
  --color-parisian-patina-600: #5a7e68;
  --color-parisian-patina-700: #436551;
  --color-parisian-patina-800: #314f3d;
  --color-parisian-patina-900: #233c2e;
  --color-parisian-patina-950: #13251b;
}