Start generating

Everglade to Velvet Scarf color palette

2C3B26Everglade5F453CDeath by Chocolate5F828DArcticAB9CB1Pastel PurpleD4AA93FrappéE6DAEAVelvet Scarf
Open in generator Export PNG, PDF, ASE…

About this palette

Everglade to Velvet Scarf is a 6-color muted palette: #2C3B26 (Everglade), #5F453C (Death by Chocolate), #5F828D (Arctic), #AB9CB1 (Pastel Purple), #D4AA93 (Frappé), #E6DAEA (Velvet Scarf). It mixes green, brown, blue, gray, orange tones and feels balanced overall. The strongest text pairing is #2C3B26 on #E6DAEA with a contrast ratio of 8.85:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Evergladergb(44, 59, 38)hsl(103, 22%, 19%)
Death by Chocolatergb(95, 69, 60)hsl(15, 23%, 30%)
Arcticrgb(95, 130, 141)hsl(194, 19%, 46%)
Pastel Purplergb(171, 156, 177)hsl(283, 12%, 65%)
Frappérgb(212, 170, 147)hsl(21, 43%, 70%)
Velvet Scarfrgb(230, 218, 234)hsl(285, 28%, 89%)

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.85:1 Very good#2C3B26 on #E6DAEA
  • Aa8.85:1 Very good#E6DAEA on #2C3B26
  • Aa6.48:1 Good#5F453C on #E6DAEA
  • Aa6.48:1 Good#E6DAEA on #5F453C
  • Aa5.66:1 Good#2C3B26 on #D4AA93
  • Aa5.66:1 Good#D4AA93 on #2C3B26
  • Aa4.61:1 Good#2C3B26 on #AB9CB1
  • Aa4.61:1 Good#AB9CB1 on #2C3B26

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Everglade to Velvet Scarf — https://swatchly.xyz/palette/2c3b26-5f453c-5f828d-ab9cb1-d4aa93-e6daea */
:root {
  --everglade: #2c3b26;
  --death-by-chocolate: #5f453c;
  --arctic: #5f828d;
  --pastel-purple: #ab9cb1;
  --frapp: #d4aa93;
  --velvet-scarf: #e6daea;
}

Tailwind CSS v4

/* Everglade to Velvet Scarf — https://swatchly.xyz/palette/2c3b26-5f453c-5f828d-ab9cb1-d4aa93-e6daea */
@theme {
  --color-everglade: #2c3b26;
  --color-everglade-50: #eef9ea;
  --color-everglade-100: #e4efdf;
  --color-everglade-200: #cedcc9;
  --color-everglade-300: #b7c7b1;
  --color-everglade-400: #97a890;
  --color-everglade-500: #7c8e75;
  --color-everglade-600: #63735c;
  --color-everglade-700: #4e5d48;
  --color-everglade-800: #3c4a37;
  --color-everglade-900: #2c3b26;
  --color-everglade-950: #1c2519;
  --color-death-by-chocolate: #5f453c;
  --color-death-by-chocolate-50: #fff2ed;
  --color-death-by-chocolate-100: #fae6df;
  --color-death-by-chocolate-200: #e8d0c7;
  --color-death-by-chocolate-300: #d2b7ad;
  --color-death-by-chocolate-400: #b2958b;
  --color-death-by-chocolate-500: #95786e;
  --color-death-by-chocolate-600: #775d54;
  --color-death-by-chocolate-700: #5f453c;
  --color-death-by-chocolate-800: #4a362f;
  --color-death-by-chocolate-900: #392923;
  --color-death-by-chocolate-950: #241814;
  --color-arctic: #5f828d;
  --color-arctic-50: #e2f7fe;
  --color-arctic-100: #d4ecf4;
  --color-arctic-200: #bbd7e1;
  --color-arctic-300: #9fc0ca;
  --color-arctic-400: #7c9faa;
  --color-arctic-500: #5f828d;
  --color-arctic-600: #486973;
  --color-arctic-700: #36545d;
  --color-arctic-800: #28424a;
  --color-arctic-900: #1d343a;
  --color-arctic-950: #102126;
  --color-pastel-purple: #ab9cb1;
  --color-pastel-purple-50: #fbf2fe;
  --color-pastel-purple-100: #f1e7f5;
  --color-pastel-purple-200: #dfd3e4;
  --color-pastel-purple-300: #c9bccf;
  --color-pastel-purple-400: #ab9cb1;
  --color-pastel-purple-500: #8f8195;
  --color-pastel-purple-600: #74667a;
  --color-pastel-purple-700: #5d5062;
  --color-pastel-purple-800: #493e4d;
  --color-pastel-purple-900: #382f3c;
  --color-pastel-purple-950: #231c26;
  --color-frapp: #d4aa93;
  --color-frapp-50: #ffeade;
  --color-frapp-100: #f9dbcb;
  --color-frapp-200: #e7c5b2;
  --color-frapp-300: #d4aa93;
  --color-frapp-400: #b58d78;
  --color-frapp-500: #9b745f;
  --color-frapp-600: #815d48;
  --color-frapp-700: #6a4936;
  --color-frapp-800: #563929;
  --color-frapp-900: #452c1e;
  --color-frapp-950: #2c1a10;
  --color-velvet-scarf: #e6daea;
  --color-velvet-scarf-50: #fdf8ff;
  --color-velvet-scarf-100: #f6eff8;
  --color-velvet-scarf-200: #e6daea;
  --color-velvet-scarf-300: #cdc3d0;
  --color-velvet-scarf-400: #ada2b0;
  --color-velvet-scarf-500: #908594;
  --color-velvet-scarf-600: #746a78;
  --color-velvet-scarf-700: #5c525f;
  --color-velvet-scarf-800: #473f4a;
  --color-velvet-scarf-900: #373039;
  --color-velvet-scarf-950: #221d24;
}

Similar palettes