Velvet Scarf to Jungle Civilization color palette

E2DFEEVelvet Scarf 837F96Mecha Metal 1F3534Aztec C9AEB2Strawberry Latte 6D663DJungle Civilization

About this palette

Velvet Scarf to Jungle Civilization is a 5-color muted palette: #E2DFEE (Velvet Scarf), #837F96 (Mecha Metal), #1F3534 (Aztec), #C9AEB2 (Strawberry Latte), #6D663D (Jungle Civilization). It mixes gray, brown tones and feels warm overall. The strongest text pairing is #E2DFEE on #1F3534 with a contrast ratio of 9.91:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Velvet Scarf	rgb(226, 223, 238)	hsl(252, 31%, 90%)
Mecha Metal	rgb(131, 127, 150)	hsl(250, 10%, 54%)
Aztec	rgb(31, 53, 52)	hsl(177, 26%, 16%)
Strawberry Latte	rgb(201, 174, 178)	hsl(351, 20%, 74%)
Jungle Civilization	rgb(109, 102, 61)	hsl(51, 28%, 33%)

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.

Aa9.91:1 Very good#E2DFEE on #1F3534
Aa9.91:1 Very good#1F3534 on #E2DFEE
Aa6.30:1 Good#1F3534 on #C9AEB2
Aa6.30:1 Good#C9AEB2 on #1F3534
Aa4.43:1 Poor#E2DFEE on #6D663D
Aa4.43:1 Poor#6D663D on #E2DFEE
Aa3.36:1 Poor#837F96 on #1F3534
Aa3.36:1 Poor#1F3534 on #837F96

Color blindness preview

CSS variables

/* Velvet Scarf to Jungle Civilization — https://swatchly.xyz/palette/e2dfee-837f96-1f3534-c9aeb2-6d663d */
:root {
  --velvet-scarf: #e2dfee;
  --mecha-metal: #837f96;
  --aztec: #1f3534;
  --strawberry-latte: #c9aeb2;
  --jungle-civilization: #6d663d;
}

Tailwind CSS v4

/* Velvet Scarf to Jungle Civilization — https://swatchly.xyz/palette/e2dfee-837f96-1f3534-c9aeb2-6d663d */
@theme {
  --color-velvet-scarf: #e2dfee;
  --color-velvet-scarf-50: #edebf5;
  --color-velvet-scarf-100: #e2dfee;
  --color-velvet-scarf-200: #d0ced9;
  --color-velvet-scarf-300: #bbb9c5;
  --color-velvet-scarf-400: #9d9ba8;
  --color-velvet-scarf-500: #84818f;
  --color-velvet-scarf-600: #6b6875;
  --color-velvet-scarf-700: #56535f;
  --color-velvet-scarf-800: #43414b;
  --color-velvet-scarf-900: #33313a;
  --color-velvet-scarf-950: #201e24;
  --color-mecha-metal: #837f96;
  --color-mecha-metal-50: #f5f3ff;
  --color-mecha-metal-100: #eae7f8;
  --color-mecha-metal-200: #d6d3e6;
  --color-mecha-metal-300: #bfbbd0;
  --color-mecha-metal-400: #9f9bb2;
  --color-mecha-metal-500: #837f96;
  --color-mecha-metal-600: #69667b;
  --color-mecha-metal-700: #535063;
  --color-mecha-metal-800: #413e4f;
  --color-mecha-metal-900: #32303e;
  --color-mecha-metal-950: #1f1d27;
  --color-aztec: #1f3534;
  --color-aztec-50: #eaf9f8;
  --color-aztec-100: #dfefee;
  --color-aztec-200: #c9dcdb;
  --color-aztec-300: #b0c6c5;
  --color-aztec-400: #8fa7a5;
  --color-aztec-500: #728b89;
  --color-aztec-600: #58706e;
  --color-aztec-700: #435857;
  --color-aztec-800: #324443;
  --color-aztec-900: #1f3534;
  --color-aztec-950: #15201f;
  --color-strawberry-latte: #c9aeb2;
  --color-strawberry-latte-50: #fbebed;
  --color-strawberry-latte-100: #f1dee1;
  --color-strawberry-latte-200: #dec8cb;
  --color-strawberry-latte-300: #c9aeb2;
  --color-strawberry-latte-400: #ab9195;
  --color-strawberry-latte-500: #91787c;
  --color-strawberry-latte-600: #776063;
  --color-strawberry-latte-700: #614c4f;
  --color-strawberry-latte-800: #4e3b3e;
  --color-strawberry-latte-900: #3e2e31;
  --color-strawberry-latte-950: #271c1e;
  --color-jungle-civilization: #6d663d;
  --color-jungle-civilization-50: #faf6dd;
  --color-jungle-civilization-100: #efebcf;
  --color-jungle-civilization-200: #dcd6b5;
  --color-jungle-civilization-300: #c5be98;
  --color-jungle-civilization-400: #a59e74;
  --color-jungle-civilization-500: #898158;
  --color-jungle-civilization-600: #6d663d;
  --color-jungle-civilization-700: #57512d;
  --color-jungle-civilization-800: #443f1f;
  --color-jungle-civilization-900: #353015;
  --color-jungle-civilization-950: #211e0a;
}