Start generating

Summer Mist to Castro color palette

C9E9F2Summer MistBFBDA4Forgotten Tusk98997AA Frond in Need4D727FHydro6A4755Wine Stain41283ACastro
Open in generator Export PNG, PDF, ASE…

About this palette

Summer Mist to Castro is a 6-color muted, vintage palette: #C9E9F2 (Summer Mist), #BFBDA4 (Forgotten Tusk), #98997A (A Frond in Need), #4D727F (Hydro), #6A4755 (Wine Stain), #41283A (Castro). It mixes blue, gray, yellow, red, purple tones and feels warm overall. The strongest text pairing is #C9E9F2 on #41283A with a contrast ratio of 10.33:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Summer Mistrgb(201, 233, 242)hsl(193, 61%, 87%)
Forgotten Tuskrgb(191, 189, 164)hsl(56, 17%, 70%)
A Frond in Needrgb(152, 153, 122)hsl(62, 13%, 54%)
Hydrorgb(77, 114, 127)hsl(196, 25%, 40%)
Wine Stainrgb(106, 71, 85)hsl(336, 20%, 35%)
Castrorgb(65, 40, 58)hsl(317, 24%, 21%)

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.33:1 Very good#C9E9F2 on #41283A
  • Aa10.33:1 Very good#41283A on #C9E9F2
  • Aa6.94:1 Good#BFBDA4 on #41283A
  • Aa6.94:1 Good#41283A on #BFBDA4
  • Aa6.21:1 Good#C9E9F2 on #6A4755
  • Aa6.21:1 Good#6A4755 on #C9E9F2
  • Aa4.51:1 Good#98997A on #41283A
  • Aa4.51:1 Good#41283A on #98997A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Summer Mist to Castro — https://swatchly.xyz/palette/c9e9f2-bfbda4-98997a-4d727f-6a4755-41283a */
:root {
  --summer-mist: #c9e9f2;
  --forgotten-tusk: #bfbda4;
  --a-frond-in-need: #98997a;
  --hydro: #4d727f;
  --wine-stain: #6a4755;
  --castro: #41283a;
}

Tailwind CSS v4

/* Summer Mist to Castro — https://swatchly.xyz/palette/c9e9f2-bfbda4-98997a-4d727f-6a4755-41283a */
@theme {
  --color-summer-mist: #c9e9f2;
  --color-summer-mist-50: #dff2f7;
  --color-summer-mist-100: #c9e9f2;
  --color-summer-mist-200: #bdd5dc;
  --color-summer-mist-300: #a6c1c8;
  --color-summer-mist-400: #86a3ab;
  --color-summer-mist-500: #6c8992;
  --color-summer-mist-600: #547078;
  --color-summer-mist-700: #405a61;
  --color-summer-mist-800: #30474d;
  --color-summer-mist-900: #23363c;
  --color-summer-mist-950: #142226;
  --color-forgotten-tusk: #bfbda4;
  --color-forgotten-tusk-50: #f4f3e4;
  --color-forgotten-tusk-100: #eae8d8;
  --color-forgotten-tusk-200: #d6d4c1;
  --color-forgotten-tusk-300: #bfbda4;
  --color-forgotten-tusk-400: #a09f87;
  --color-forgotten-tusk-500: #86846d;
  --color-forgotten-tusk-600: #6c6b54;
  --color-forgotten-tusk-700: #575541;
  --color-forgotten-tusk-800: #444331;
  --color-forgotten-tusk-900: #353424;
  --color-forgotten-tusk-950: #212015;
  --color-a-frond-in-need: #98997a;
  --color-a-frond-in-need-50: #f2f3e0;
  --color-a-frond-in-need-100: #e6e7d1;
  --color-a-frond-in-need-200: #d1d2b8;
  --color-a-frond-in-need-300: #b9ba9d;
  --color-a-frond-in-need-400: #98997a;
  --color-a-frond-in-need-500: #7f8062;
  --color-a-frond-in-need-600: #66674b;
  --color-a-frond-in-need-700: #525239;
  --color-a-frond-in-need-800: #40412a;
  --color-a-frond-in-need-900: #323320;
  --color-a-frond-in-need-950: #202012;
  --color-hydro: #4d727f;
  --color-hydro-50: #e7f9ff;
  --color-hydro-100: #d7f0f9;
  --color-hydro-200: #c0dde8;
  --color-hydro-300: #a6c7d3;
  --color-hydro-400: #83a8b6;
  --color-hydro-500: #678d9a;
  --color-hydro-600: #4d727f;
  --color-hydro-700: #395b66;
  --color-hydro-800: #2a4751;
  --color-hydro-900: #1e373f;
  --color-hydro-950: #102228;
  --color-wine-stain: #6a4755;
  --color-wine-stain-50: #fff1f6;
  --color-wine-stain-100: #fee3ed;
  --color-wine-stain-200: #edcdd9;
  --color-wine-stain-300: #d8b5c2;
  --color-wine-stain-400: #ba94a2;
  --color-wine-stain-500: #9e7887;
  --color-wine-stain-600: #825e6c;
  --color-wine-stain-700: #6a4755;
  --color-wine-stain-800: #533742;
  --color-wine-stain-900: #412933;
  --color-wine-stain-950: #29181f;
  --color-castro: #41283a;
  --color-castro-50: #fff0fa;
  --color-castro-100: #f9e4f2;
  --color-castro-200: #e8cfe0;
  --color-castro-300: #d3b7ca;
  --color-castro-400: #b597ab;
  --color-castro-500: #997b90;
  --color-castro-600: #7d6175;
  --color-castro-700: #644b5d;
  --color-castro-800: #4f3949;
  --color-castro-900: #41283a;
  --color-castro-950: #271923;
}

Similar palettes