Start generating

Jaguar to Ecological color palette

272932Jaguar4E526AIntergalacticFEE2D8Pink GlitterC09683Café Crème95C0ABSeaborn6B8170Ecological
Open in generator Export PNG, PDF, ASE…

About this palette

Jaguar to Ecological is a 6-color muted palette: #272932 (Jaguar), #4E526A (Intergalactic), #FEE2D8 (Pink Glitter), #C09683 (Café Crème), #95C0AB (Seaborn), #6B8170 (Ecological). It mixes gray, purple, white, orange, green tones and feels cool overall. The strongest text pairing is #272932 on #FEE2D8 with a contrast ratio of 11.79:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Jaguarrgb(39, 41, 50)hsl(229, 12%, 17%)
Intergalacticrgb(78, 82, 106)hsl(231, 15%, 36%)
Pink Glitterrgb(254, 226, 216)hsl(16, 95%, 92%)
Café Crèmergb(192, 150, 131)hsl(19, 33%, 63%)
Seabornrgb(149, 192, 171)hsl(151, 25%, 67%)
Ecologicalrgb(107, 129, 112)hsl(134, 9%, 46%)

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.79:1 Very good#272932 on #FEE2D8
  • Aa11.79:1 Very good#FEE2D8 on #272932
  • Aa7.18:1 Very good#272932 on #95C0AB
  • Aa7.18:1 Very good#95C0AB on #272932
  • Aa6.24:1 Good#4E526A on #FEE2D8
  • Aa6.24:1 Good#FEE2D8 on #4E526A
  • Aa5.47:1 Good#272932 on #C09683
  • Aa5.47:1 Good#C09683 on #272932

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Jaguar to Ecological — https://swatchly.xyz/palette/272932-4e526a-fee2d8-c09683-95c0ab-6b8170 */
:root {
  --jaguar: #272932;
  --intergalactic: #4e526a;
  --pink-glitter: #fee2d8;
  --caf-cr-me: #c09683;
  --seaborn: #95c0ab;
  --ecological: #6b8170;
}

Tailwind CSS v4

/* Jaguar to Ecological — https://swatchly.xyz/palette/272932-4e526a-fee2d8-c09683-95c0ab-6b8170 */
@theme {
  --color-jaguar: #272932;
  --color-jaguar-50: #f3f5fb;
  --color-jaguar-100: #e9ebf2;
  --color-jaguar-200: #d5d7e0;
  --color-jaguar-300: #bec0ca;
  --color-jaguar-400: #9c9faa;
  --color-jaguar-500: #7f828d;
  --color-jaguar-600: #646670;
  --color-jaguar-700: #4c4e57;
  --color-jaguar-800: #383a41;
  --color-jaguar-900: #272932;
  --color-jaguar-950: #17181c;
  --color-intergalactic: #4e526a;
  --color-intergalactic-50: #f2f4ff;
  --color-intergalactic-100: #e7eafc;
  --color-intergalactic-200: #d2d6eb;
  --color-intergalactic-300: #babfd7;
  --color-intergalactic-400: #9a9fb9;
  --color-intergalactic-500: #7f839d;
  --color-intergalactic-600: #656981;
  --color-intergalactic-700: #4e526a;
  --color-intergalactic-800: #3d4053;
  --color-intergalactic-900: #2e3141;
  --color-intergalactic-950: #1c1e29;
  --color-pink-glitter: #fee2d8;
  --color-pink-glitter-50: #ffefea;
  --color-pink-glitter-100: #fee2d8;
  --color-pink-glitter-200: #e5d0c9;
  --color-pink-glitter-300: #d1bab1;
  --color-pink-glitter-400: #b39a91;
  --color-pink-glitter-500: #987f76;
  --color-pink-glitter-600: #7d655d;
  --color-pink-glitter-700: #655048;
  --color-pink-glitter-800: #503e37;
  --color-pink-glitter-900: #3e2f29;
  --color-pink-glitter-950: #271c18;
  --color-caf-cr-me: #c09683;
  --color-caf-cr-me-50: #fff2ec;
  --color-caf-cr-me-100: #ffe4d9;
  --color-caf-cr-me-200: #f0cfc0;
  --color-caf-cr-me-300: #dcb7a6;
  --color-caf-cr-me-400: #c09683;
  --color-caf-cr-me-500: #a37b69;
  --color-caf-cr-me-600: #876150;
  --color-caf-cr-me-700: #6e4c3c;
  --color-caf-cr-me-800: #583a2c;
  --color-caf-cr-me-900: #452c20;
  --color-caf-cr-me-950: #2c1a12;
  --color-seaborn: #95c0ab;
  --color-seaborn-50: #dcf6e9;
  --color-seaborn-100: #cdebdc;
  --color-seaborn-200: #b4d6c5;
  --color-seaborn-300: #95c0ab;
  --color-seaborn-400: #79a28e;
  --color-seaborn-500: #608975;
  --color-seaborn-600: #49705e;
  --color-seaborn-700: #375b4a;
  --color-seaborn-800: #29483a;
  --color-seaborn-900: #1e392d;
  --color-seaborn-950: #10241b;
  --color-ecological: #6b8170;
  --color-ecological-50: #e9f7ec;
  --color-ecological-100: #dcecdf;
  --color-ecological-200: #c4d7c8;
  --color-ecological-300: #aabfaf;
  --color-ecological-400: #889e8d;
  --color-ecological-500: #6b8170;
  --color-ecological-600: #546859;
  --color-ecological-700: #415345;
  --color-ecological-800: #324236;
  --color-ecological-900: #263329;
  --color-ecological-950: #172119;
}

Similar palettes