Elite Teal to Airy Fields Color Palette

About this palette

Elite Teal to Airy Fields is a 4-color muted, gradient palette: #1A3239 (Elite Teal), #6B5E75 (Plummy), #B47C6C (Döner Kebab), #D8DFC4 (Airy Fields). It mixes gray, purple, red, green tones and feels cool overall. The strongest text pairing is #1A3239 on #D8DFC4 with a contrast ratio of 9.79:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(26, 50, 57)	hsl(194, 37%, 16%)
Plummy	rgb(107, 94, 117)	hsl(274, 11%, 41%)
Döner Kebab	rgb(180, 124, 108)	hsl(13, 32%, 56%)
Airy Fields	rgb(216, 223, 196)	hsl(76, 30%, 82%)

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.79:1 Very good#1A3239 on #D8DFC4
Aa9.79:1 Very good#D8DFC4 on #1A3239
Aa4.38:1 Poor#6B5E75 on #D8DFC4
Aa4.38:1 Poor#D8DFC4 on #6B5E75
Aa3.87:1 Poor#1A3239 on #B47C6C
Aa3.87:1 Poor#B47C6C on #1A3239

Color blindness preview

CSS variables

/* Elite Teal to Airy Fields — https://swatchly.xyz/palette/1a3239-6b5e75-b47c6c-d8dfc4 */
:root {
  --elite-teal: #1a3239;
  --plummy: #6b5e75;
  --d-ner-kebab: #b47c6c;
  --airy-fields: #d8dfc4;
}

Tailwind CSS v4

/* Elite Teal to Airy Fields — https://swatchly.xyz/palette/1a3239-6b5e75-b47c6c-d8dfc4 */
@theme {
  --color-elite-teal: #1a3239;
  --color-elite-teal-50: #e9f8fd;
  --color-elite-teal-100: #ddeff4;
  --color-elite-teal-200: #c7dce2;
  --color-elite-teal-300: #aec6cd;
  --color-elite-teal-400: #8ca6ae;
  --color-elite-teal-500: #6f8992;
  --color-elite-teal-600: #556e75;
  --color-elite-teal-700: #3f565d;
  --color-elite-teal-800: #2e4248;
  --color-elite-teal-900: #1a3239;
  --color-elite-teal-950: #121e21;
  --color-plummy: #6b5e75;
  --color-plummy-50: #f9f2ff;
  --color-plummy-100: #efe5f6;
  --color-plummy-200: #dbcfe3;
  --color-plummy-300: #c3b7cd;
  --color-plummy-400: #a396ae;
  --color-plummy-500: #877991;
  --color-plummy-600: #6b5e75;
  --color-plummy-700: #554a5e;
  --color-plummy-800: #43394a;
  --color-plummy-900: #342c3a;
  --color-plummy-950: #201a25;
  --color-d-ner-kebab: #b47c6c;
  --color-d-ner-kebab-50: #fff3f0;
  --color-d-ner-kebab-100: #ffe7e1;
  --color-d-ner-kebab-200: #fccfc2;
  --color-d-ner-kebab-300: #eab8a9;
  --color-d-ner-kebab-400: #ce9788;
  --color-d-ner-kebab-500: #b47c6c;
  --color-d-ner-kebab-600: #966152;
  --color-d-ner-kebab-700: #7b4a3d;
  --color-d-ner-kebab-800: #62382c;
  --color-d-ner-kebab-900: #4d291f;
  --color-d-ner-kebab-950: #311811;
  --color-airy-fields: #d8dfc4;
  --color-airy-fields-50: #f6faeb;
  --color-airy-fields-100: #ecf1e0;
  --color-airy-fields-200: #d8dfc4;
  --color-airy-fields-300: #c1c7b1;
  --color-airy-fields-400: #a1a78f;
  --color-airy-fields-500: #858b72;
  --color-airy-fields-600: #6a7058;
  --color-airy-fields-700: #535943;
  --color-airy-fields-800: #404532;
  --color-airy-fields-900: #313525;
  --color-airy-fields-950: #1e2115;
}