Elite Teal to Sassy Lime Color Palette

About this palette

Elite Teal to Sassy Lime is a 5-color warm palette: #003339 (Elite Teal), #8C1F3B (French Winery), #B45C5A (Her Velour), #ABA4F4 (Cold Lips), #E2E796 (Sassy Lime). It mixes turquoise, red, purple, yellow tones and feels warm overall. The strongest text pairing is #003339 on #E2E796 with a contrast ratio of 10.51:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(0, 51, 57)	hsl(186, 100%, 11%)
French Winery	rgb(140, 31, 59)	hsl(345, 64%, 34%)
Her Velour	rgb(180, 92, 90)	hsl(1, 38%, 53%)
Cold Lips	rgb(171, 164, 244)	hsl(245, 78%, 80%)
Sassy Lime	rgb(226, 231, 150)	hsl(64, 63%, 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.

Aa10.51:1 Very good#003339 on #E2E796
Aa10.51:1 Very good#E2E796 on #003339
Aa6.78:1 Good#8C1F3B on #E2E796
Aa6.78:1 Good#E2E796 on #8C1F3B
Aa6.10:1 Good#003339 on #ABA4F4
Aa6.10:1 Good#ABA4F4 on #003339
Aa3.94:1 Poor#8C1F3B on #ABA4F4
Aa3.94:1 Poor#ABA4F4 on #8C1F3B

Color blindness preview

CSS variables

/* Elite Teal to Sassy Lime — https://swatchly.xyz/palette/003339-8c1f3b-b45c5a-aba4f4-e2e796 */
:root {
  --elite-teal: #003339;
  --french-winery: #8c1f3b;
  --her-velour: #b45c5a;
  --cold-lips: #aba4f4;
  --sassy-lime: #e2e796;
}

Tailwind CSS v4

/* Elite Teal to Sassy Lime — https://swatchly.xyz/palette/003339-8c1f3b-b45c5a-aba4f4-e2e796 */
@theme {
  --color-elite-teal: #003339;
  --color-elite-teal-50: #e1fbff;
  --color-elite-teal-100: #d4f2f6;
  --color-elite-teal-200: #bcdfe4;
  --color-elite-teal-300: #a1c9cf;
  --color-elite-teal-400: #7da9b0;
  --color-elite-teal-500: #5f8c93;
  --color-elite-teal-600: #457077;
  --color-elite-teal-700: #30585d;
  --color-elite-teal-800: #204347;
  --color-elite-teal-900: #003339;
  --color-elite-teal-950: #0a1e20;
  --color-french-winery: #8c1f3b;
  --color-french-winery-50: #fff1f2;
  --color-french-winery-100: #ffe3e6;
  --color-french-winery-200: #ffc5cb;
  --color-french-winery-300: #ff9fac;
  --color-french-winery-400: #e67688;
  --color-french-winery-500: #c8576c;
  --color-french-winery-600: #a73c52;
  --color-french-winery-700: #8c1f3b;
  --color-french-winery-800: #6d192e;
  --color-french-winery-900: #571022;
  --color-french-winery-950: #390613;
  --color-her-velour: #b45c5a;
  --color-her-velour-50: #ffeeed;
  --color-her-velour-100: #ffdedb;
  --color-her-velour-200: #ffbeba;
  --color-her-velour-300: #f39e9a;
  --color-her-velour-400: #d37a77;
  --color-her-velour-500: #b45c5a;
  --color-her-velour-600: #974544;
  --color-her-velour-700: #7c3333;
  --color-her-velour-800: #652525;
  --color-her-velour-900: #511b1b;
  --color-her-velour-950: #360e0f;
  --color-cold-lips: #aba4f4;
  --color-cold-lips-50: #faf9ff;
  --color-cold-lips-100: #f1f1ff;
  --color-cold-lips-200: #dfddff;
  --color-cold-lips-300: #c9c6ff;
  --color-cold-lips-400: #aba4f4;
  --color-cold-lips-500: #8d86d3;
  --color-cold-lips-600: #7169b3;
  --color-cold-lips-700: #595094;
  --color-cold-lips-800: #443c78;
  --color-cold-lips-900: #332c5e;
  --color-cold-lips-950: #1e193c;
  --color-sassy-lime: #e2e796;
  --color-sassy-lime-50: #fcffd7;
  --color-sassy-lime-100: #f3f7ca;
  --color-sassy-lime-200: #e2e796;
  --color-sassy-lime-300: #c9ce8d;
  --color-sassy-lime-400: #a9ad63;
  --color-sassy-lime-500: #8c9041;
  --color-sassy-lime-600: #717323;
  --color-sassy-lime-700: #595b0a;
  --color-sassy-lime-800: #444600;
  --color-sassy-lime-900: #343600;
  --color-sassy-lime-950: #202100;
}