Jazz to Desert Temple Color Palette

About this palette

Jazz to Desert Temple is a 5-color cool, vintage palette: #552E3D (Jazz), #00685C (Peacock Pride), #7A86AD (Kimono), #2DAFAD (Teal Me No Lies), #D6CEA1 (Desert Temple). It mixes red, turquoise, blue, yellow tones and feels cool overall. The strongest text pairing is #552E3D on #D6CEA1 with a contrast ratio of 7.16:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jazz	rgb(85, 46, 61)	hsl(337, 30%, 26%)
Peacock Pride	rgb(0, 104, 92)	hsl(173, 100%, 20%)
Kimono	rgb(122, 134, 173)	hsl(226, 24%, 58%)
Teal Me No Lies	rgb(45, 175, 173)	hsl(179, 59%, 43%)
Desert Temple	rgb(214, 206, 161)	hsl(51, 39%, 74%)

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.

Aa7.16:1 Very good#552E3D on #D6CEA1
Aa7.16:1 Very good#D6CEA1 on #552E3D
Aa4.25:1 Poor#552E3D on #2DAFAD
Aa4.25:1 Poor#2DAFAD on #552E3D
Aa4.21:1 Poor#00685C on #D6CEA1
Aa4.21:1 Poor#D6CEA1 on #00685C
Aa3.17:1 Poor#552E3D on #7A86AD
Aa3.17:1 Poor#7A86AD on #552E3D

Color blindness preview

CSS variables

/* Jazz to Desert Temple — https://swatchly.xyz/palette/552e3d-00685c-7a86ad-2dafad-d6cea1 */
:root {
  --jazz: #552e3d;
  --peacock-pride: #00685c;
  --kimono: #7a86ad;
  --teal-me-no-lies: #2dafad;
  --desert-temple: #d6cea1;
}

Tailwind CSS v4

/* Jazz to Desert Temple — https://swatchly.xyz/palette/552e3d-00685c-7a86ad-2dafad-d6cea1 */
@theme {
  --color-jazz: #552e3d;
  --color-jazz-50: #fff1f5;
  --color-jazz-100: #ffe2ec;
  --color-jazz-200: #f1ccd8;
  --color-jazz-300: #dcb2c1;
  --color-jazz-400: #be90a0;
  --color-jazz-500: #a17484;
  --color-jazz-600: #835968;
  --color-jazz-700: #684351;
  --color-jazz-800: #552e3d;
  --color-jazz-900: #3f252e;
  --color-jazz-950: #28151c;
  --color-peacock-pride: #00685c;
  --color-peacock-pride-50: #d8fff7;
  --color-peacock-pride-100: #c6f7ed;
  --color-peacock-pride-200: #ace6db;
  --color-peacock-pride-300: #8ed2c5;
  --color-peacock-pride-400: #67b4a7;
  --color-peacock-pride-500: #47998c;
  --color-peacock-pride-600: #2a7f72;
  --color-peacock-pride-700: #00685c;
  --color-peacock-pride-800: #005148;
  --color-peacock-pride-900: #003f37;
  --color-peacock-pride-950: #002822;
  --color-kimono: #7a86ad;
  --color-kimono-50: #f2f5ff;
  --color-kimono-100: #e5ebff;
  --color-kimono-200: #cdd7f7;
  --color-kimono-300: #b5c1e4;
  --color-kimono-400: #95a1c8;
  --color-kimono-500: #7a86ad;
  --color-kimono-600: #606b90;
  --color-kimono-700: #4b5576;
  --color-kimono-800: #39415f;
  --color-kimono-900: #2b324b;
  --color-kimono-950: #191e30;
  --color-teal-me-no-lies: #2dafad;
  --color-teal-me-no-lies-50: #c8fffd;
  --color-teal-me-no-lies-100: #b1f7f4;
  --color-teal-me-no-lies-200: #8fe4e2;
  --color-teal-me-no-lies-300: #69cecc;
  --color-teal-me-no-lies-400: #2dafad;
  --color-teal-me-no-lies-500: #009392;
  --color-teal-me-no-lies-600: #007776;
  --color-teal-me-no-lies-700: #005f5e;
  --color-teal-me-no-lies-800: #004b4a;
  --color-teal-me-no-lies-900: #003a3a;
  --color-teal-me-no-lies-950: #002525;
  --color-desert-temple: #d6cea1;
  --color-desert-temple-50: #f3efd3;
  --color-desert-temple-100: #e8e3c4;
  --color-desert-temple-200: #d6cea1;
  --color-desert-temple-300: #c0b992;
  --color-desert-temple-400: #a39c72;
  --color-desert-temple-500: #8a8258;
  --color-desert-temple-600: #716941;
  --color-desert-temple-700: #5b542f;
  --color-desert-temple-800: #494322;
  --color-desert-temple-900: #383317;
  --color-desert-temple-950: #23200b;
}