Panorama to In Good Taste Color Palette

About this palette

Panorama to In Good Taste is a 5-color cool, vintage palette: #217983 (Panorama), #F29C7E (Parma Ham), #BC6D59 (Spiced), #4E3C80 (Galactic Compass), #BDCF91 (In Good Taste). It mixes turquoise, red, purple, green tones and feels cool overall. The strongest text pairing is #4E3C80 on #BDCF91 with a contrast ratio of 5.48:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Panorama	rgb(33, 121, 131)	hsl(186, 60%, 32%)
Parma Ham	rgb(242, 156, 126)	hsl(16, 82%, 72%)
Spiced	rgb(188, 109, 89)	hsl(12, 42%, 54%)
Galactic Compass	rgb(78, 60, 128)	hsl(256, 36%, 37%)
In Good Taste	rgb(189, 207, 145)	hsl(77, 39%, 69%)

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.

Aa5.48:1 Good#4E3C80 on #BDCF91
Aa5.48:1 Good#BDCF91 on #4E3C80
Aa4.31:1 Poor#F29C7E on #4E3C80
Aa4.31:1 Poor#4E3C80 on #F29C7E
Aa3.03:1 Poor#217983 on #BDCF91
Aa3.03:1 Poor#BDCF91 on #217983

Color blindness preview

CSS variables

/* Panorama to In Good Taste — https://swatchly.xyz/palette/217983-f29c7e-bc6d59-4e3c80-bdcf91 */
:root {
  --panorama: #217983;
  --parma-ham: #f29c7e;
  --spiced: #bc6d59;
  --galactic-compass: #4e3c80;
  --in-good-taste: #bdcf91;
}

Tailwind CSS v4

/* Panorama to In Good Taste — https://swatchly.xyz/palette/217983-f29c7e-bc6d59-4e3c80-bdcf91 */
@theme {
  --color-panorama: #217983;
  --color-panorama-50: #dffbff;
  --color-panorama-100: #c5f5fc;
  --color-panorama-200: #a9e3eb;
  --color-panorama-300: #8bced7;
  --color-panorama-400: #62b0ba;
  --color-panorama-500: #42949e;
  --color-panorama-600: #217983;
  --color-panorama-700: #08616a;
  --color-panorama-800: #004c54;
  --color-panorama-900: #003b41;
  --color-panorama-950: #002529;
  --color-parma-ham: #f29c7e;
  --color-parma-ham-50: #ffeae2;
  --color-parma-ham-100: #ffdacd;
  --color-parma-ham-200: #ffbba3;
  --color-parma-ham-300: #f29c7e;
  --color-parma-ham-400: #d18063;
  --color-parma-ham-500: #b66649;
  --color-parma-ham-600: #9a4e33;
  --color-parma-ham-700: #7f3b22;
  --color-parma-ham-800: #682c16;
  --color-parma-ham-900: #55210d;
  --color-parma-ham-950: #371205;
  --color-spiced: #bc6d59;
  --color-spiced-50: #fff2ee;
  --color-spiced-100: #ffe4dd;
  --color-spiced-200: #ffc9ba;
  --color-spiced-300: #f5ac99;
  --color-spiced-400: #d88a75;
  --color-spiced-500: #bc6d59;
  --color-spiced-600: #9e5340;
  --color-spiced-700: #823e2d;
  --color-spiced-800: #692e1f;
  --color-spiced-900: #532115;
  --color-spiced-950: #36120a;
  --color-galactic-compass: #4e3c80;
  --color-galactic-compass-50: #f5f3ff;
  --color-galactic-compass-100: #ebe8ff;
  --color-galactic-compass-200: #d8d0ff;
  --color-galactic-compass-300: #c4b8fa;
  --color-galactic-compass-400: #a798e1;
  --color-galactic-compass-500: #8e7dc7;
  --color-galactic-compass-600: #7564ab;
  --color-galactic-compass-700: #5f4f91;
  --color-galactic-compass-800: #4e3c80;
  --color-galactic-compass-900: #3c2f62;
  --color-galactic-compass-950: #261c42;
  --color-in-good-taste: #bdcf91;
  --color-in-good-taste-50: #f3fddc;
  --color-in-good-taste-100: #e9f5cf;
  --color-in-good-taste-200: #d5e3b6;
  --color-in-good-taste-300: #bdcf91;
  --color-in-good-taste-400: #9dae74;
  --color-in-good-taste-500: #819156;
  --color-in-good-taste-600: #66763c;
  --color-in-good-taste-700: #505d28;
  --color-in-good-taste-800: #3d4919;
  --color-in-good-taste-900: #2e380f;
  --color-in-good-taste-950: #1c2306;
}