Start generating

Vibrant Vine to Sea Foam Mist color palette

4A343AVibrant Vine6D7261OrganicBDC3AFStone Fortress1F252CBlack PearlA1858BFemme FataleCCDCE6Sea Foam Mist
Open in generator Export PNG, PDF, ASE…

About this palette

Vibrant Vine to Sea Foam Mist is a 6-color muted palette: #4A343A (Vibrant Vine), #6D7261 (Organic), #BDC3AF (Stone Fortress), #1F252C (Black Pearl), #A1858B (Femme Fatale), #CCDCE6 (Sea Foam Mist). It mixes gray, pink tones and feels warm overall. The strongest text pairing is #1F252C on #CCDCE6 with a contrast ratio of 11.00:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Vibrant Vinergb(74, 52, 58)hsl(344, 17%, 25%)
Organicrgb(109, 114, 97)hsl(78, 8%, 41%)
Stone Fortressrgb(189, 195, 175)hsl(78, 14%, 73%)
Black Pearlrgb(31, 37, 44)hsl(212, 17%, 15%)
Femme Fatalergb(161, 133, 139)hsl(347, 13%, 58%)
Sea Foam Mistrgb(204, 220, 230)hsl(203, 34%, 85%)

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.

  • Aa11.00:1 Very good#1F252C on #CCDCE6
  • Aa11.00:1 Very good#CCDCE6 on #1F252C
  • Aa8.53:1 Very good#BDC3AF on #1F252C
  • Aa8.53:1 Very good#1F252C on #BDC3AF
  • Aa8.11:1 Very good#4A343A on #CCDCE6
  • Aa8.11:1 Very good#CCDCE6 on #4A343A
  • Aa6.29:1 Good#4A343A on #BDC3AF
  • Aa6.29:1 Good#BDC3AF on #4A343A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Vibrant Vine to Sea Foam Mist — https://swatchly.xyz/palette/4a343a-6d7261-bdc3af-1f252c-a1858b-ccdce6 */
:root {
  --vibrant-vine: #4a343a;
  --organic: #6d7261;
  --stone-fortress: #bdc3af;
  --black-pearl: #1f252c;
  --femme-fatale: #a1858b;
  --sea-foam-mist: #ccdce6;
}

Tailwind CSS v4

/* Vibrant Vine to Sea Foam Mist — https://swatchly.xyz/palette/4a343a-6d7261-bdc3af-1f252c-a1858b-ccdce6 */
@theme {
  --color-vibrant-vine: #4a343a;
  --color-vibrant-vine-50: #fff1f4;
  --color-vibrant-vine-100: #f8e6ea;
  --color-vibrant-vine-200: #e6d1d6;
  --color-vibrant-vine-300: #d0b8be;
  --color-vibrant-vine-400: #b1979d;
  --color-vibrant-vine-500: #947a81;
  --color-vibrant-vine-600: #775f65;
  --color-vibrant-vine-700: #5d484e;
  --color-vibrant-vine-800: #4a343a;
  --color-vibrant-vine-900: #37282c;
  --color-vibrant-vine-950: #22181a;
  --color-organic: #6d7261;
  --color-organic-50: #f3f7ec;
  --color-organic-100: #eaeee2;
  --color-organic-200: #d7dbcd;
  --color-organic-300: #c1c5b6;
  --color-organic-400: #a2a795;
  --color-organic-500: #878c7a;
  --color-organic-600: #6d7261;
  --color-organic-700: #565a4b;
  --color-organic-800: #434739;
  --color-organic-900: #33362b;
  --color-organic-950: #1f2119;
  --color-stone-fortress: #bdc3af;
  --color-stone-fortress-50: #f3f6eb;
  --color-stone-fortress-100: #e9ece0;
  --color-stone-fortress-200: #d4d9ca;
  --color-stone-fortress-300: #bdc3af;
  --color-stone-fortress-400: #9ea491;
  --color-stone-fortress-500: #838876;
  --color-stone-fortress-600: #696e5c;
  --color-stone-fortress-700: #535747;
  --color-stone-fortress-800: #404436;
  --color-stone-fortress-900: #313529;
  --color-stone-fortress-950: #1e2018;
  --color-black-pearl: #1f252c;
  --color-black-pearl-50: #f1f6fb;
  --color-black-pearl-100: #e7ecf2;
  --color-black-pearl-200: #d2d8df;
  --color-black-pearl-300: #bbc2ca;
  --color-black-pearl-400: #9ba2ab;
  --color-black-pearl-500: #818891;
  --color-black-pearl-600: #686f77;
  --color-black-pearl-700: #535961;
  --color-black-pearl-800: #41474d;
  --color-black-pearl-900: #33383e;
  --color-black-pearl-950: #1f252c;
  --color-femme-fatale: #a1858b;
  --color-femme-fatale-50: #fff3f5;
  --color-femme-fatale-100: #fbe8ec;
  --color-femme-fatale-200: #ebd5d9;
  --color-femme-fatale-300: #d8bfc4;
  --color-femme-fatale-400: #bba0a5;
  --color-femme-fatale-500: #a1858b;
  --color-femme-fatale-600: #846a6f;
  --color-femme-fatale-700: #6a5258;
  --color-femme-fatale-800: #543f44;
  --color-femme-fatale-900: #412f33;
  --color-femme-fatale-950: #291c1f;
  --color-sea-foam-mist: #ccdce6;
  --color-sea-foam-mist-50: #eff8fd;
  --color-sea-foam-mist-100: #e5eef5;
  --color-sea-foam-mist-200: #ccdce6;
  --color-sea-foam-mist-300: #b7c5cd;
  --color-sea-foam-mist-400: #97a5ae;
  --color-sea-foam-mist-500: #7b8993;
  --color-sea-foam-mist-600: #616f77;
  --color-sea-foam-mist-700: #4b585f;
  --color-sea-foam-mist-800: #39444b;
  --color-sea-foam-mist-900: #2b343a;
  --color-sea-foam-mist-950: #1a2024;
}

Similar palettes