Start generating

Elite Teal to Pastel Lilac color palette

1A362EElite Teal6B4636BrisketDCD6F9Icy Plains51695EDark ForestA9927FSaddle UpB9B2CFPastel Lilac
Open in generator Export PNG, PDF, ASE…

About this palette

Elite Teal to Pastel Lilac is a 6-color muted palette: #1A362E (Elite Teal), #6B4636 (Brisket), #DCD6F9 (Icy Plains), #51695E (Dark Forest), #A9927F (Saddle Up), #B9B2CF (Pastel Lilac). It mixes turquoise, brown, purple, gray, orange tones and feels cool overall. The strongest text pairing is #1A362E on #DCD6F9 with a contrast ratio of 9.33:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Elite Tealrgb(26, 54, 46)hsl(163, 35%, 16%)
Brisketrgb(107, 70, 54)hsl(18, 33%, 32%)
Icy Plainsrgb(220, 214, 249)hsl(250, 74%, 91%)
Dark Forestrgb(81, 105, 94)hsl(153, 13%, 36%)
Saddle Uprgb(169, 146, 127)hsl(27, 20%, 58%)
Pastel Lilacrgb(185, 178, 207)hsl(254, 23%, 75%)

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.33:1 Very good#1A362E on #DCD6F9
  • Aa9.33:1 Very good#DCD6F9 on #1A362E
  • Aa6.41:1 Good#1A362E on #B9B2CF
  • Aa6.41:1 Good#B9B2CF on #1A362E
  • Aa5.88:1 Good#6B4636 on #DCD6F9
  • Aa5.88:1 Good#DCD6F9 on #6B4636
  • Aa4.41:1 Poor#1A362E on #A9927F
  • Aa4.41:1 Poor#A9927F on #1A362E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Elite Teal to Pastel Lilac — https://swatchly.xyz/palette/1a362e-6b4636-dcd6f9-51695e-a9927f-b9b2cf */
:root {
  --elite-teal: #1a362e;
  --brisket: #6b4636;
  --icy-plains: #dcd6f9;
  --dark-forest: #51695e;
  --saddle-up: #a9927f;
  --pastel-lilac: #b9b2cf;
}

Tailwind CSS v4

/* Elite Teal to Pastel Lilac — https://swatchly.xyz/palette/1a362e-6b4636-dcd6f9-51695e-a9927f-b9b2cf */
@theme {
  --color-elite-teal: #1a362e;
  --color-elite-teal-50: #e8faf4;
  --color-elite-teal-100: #dcf1ea;
  --color-elite-teal-200: #c6ded6;
  --color-elite-teal-300: #adc8bf;
  --color-elite-teal-400: #8ba99f;
  --color-elite-teal-500: #6e8d83;
  --color-elite-teal-600: #547168;
  --color-elite-teal-700: #3f5951;
  --color-elite-teal-800: #2f453e;
  --color-elite-teal-900: #1a362e;
  --color-elite-teal-950: #13201c;
  --color-brisket: #6b4636;
  --color-brisket-50: #fff2ed;
  --color-brisket-100: #ffe5da;
  --color-brisket-200: #f0cec0;
  --color-brisket-300: #dbb6a6;
  --color-brisket-400: #bd9483;
  --color-brisket-500: #a17867;
  --color-brisket-600: #835d4d;
  --color-brisket-700: #6b4636;
  --color-brisket-800: #53362a;
  --color-brisket-900: #41291e;
  --color-brisket-950: #2a1811;
  --color-icy-plains: #dcd6f9;
  --color-icy-plains-50: #f8f6ff;
  --color-icy-plains-100: #efecff;
  --color-icy-plains-200: #dcd6f9;
  --color-icy-plains-300: #c5c0dc;
  --color-icy-plains-400: #a59fbf;
  --color-icy-plains-500: #8983a3;
  --color-icy-plains-600: #6e6886;
  --color-icy-plains-700: #57516d;
  --color-icy-plains-800: #433e56;
  --color-icy-plains-900: #332f44;
  --color-icy-plains-950: #201d2b;
  --color-dark-forest: #51695e;
  --color-dark-forest-50: #eaf9f2;
  --color-dark-forest-100: #ddeee6;
  --color-dark-forest-200: #c5dad0;
  --color-dark-forest-300: #abc2b7;
  --color-dark-forest-400: #89a296;
  --color-dark-forest-500: #6c8579;
  --color-dark-forest-600: #51695e;
  --color-dark-forest-700: #3f534a;
  --color-dark-forest-800: #2f4139;
  --color-dark-forest-900: #23332c;
  --color-dark-forest-950: #15201b;
  --color-saddle-up: #a9927f;
  --color-saddle-up-50: #fdeee3;
  --color-saddle-up-100: #f3e2d5;
  --color-saddle-up-200: #dfccbc;
  --color-saddle-up-300: #c9b3a2;
  --color-saddle-up-400: #a9927f;
  --color-saddle-up-500: #8f7966;
  --color-saddle-up-600: #75614f;
  --color-saddle-up-700: #5f4c3d;
  --color-saddle-up-800: #4c3c2e;
  --color-saddle-up-900: #3c2e23;
  --color-saddle-up-950: #271d14;
  --color-pastel-lilac: #b9b2cf;
  --color-pastel-lilac-50: #f1edff;
  --color-pastel-lilac-100: #e6e1f5;
  --color-pastel-lilac-200: #d1cbe2;
  --color-pastel-lilac-300: #b9b2cf;
  --color-pastel-lilac-400: #9b95b0;
  --color-pastel-lilac-500: #827b96;
  --color-pastel-lilac-600: #69637c;
  --color-pastel-lilac-700: #544e65;
  --color-pastel-lilac-800: #433d51;
  --color-pastel-lilac-900: #343041;
  --color-pastel-lilac-950: #201d29;
}

Similar palettes