Panorama to Blush Kiss Color Palette

About this palette

Panorama to Blush Kiss is a 5-color muted, vintage palette: #377F8E (Panorama), #5E3842 (Hot Chocolate), #1B2A23 (Swamp Thing), #7FA08F (Mother Earth), #E7BCC1 (Blush Kiss). It mixes turquoise, red, gray, green, pink tones and feels balanced overall. The strongest text pairing is #1B2A23 on #E7BCC1 with a contrast ratio of 8.82:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Panorama	rgb(55, 127, 142)	hsl(190, 44%, 39%)
Hot Chocolate	rgb(94, 56, 66)	hsl(344, 25%, 29%)
Swamp Thing	rgb(27, 42, 35)	hsl(152, 22%, 14%)
Mother Earth	rgb(127, 160, 143)	hsl(149, 15%, 56%)
Blush Kiss	rgb(231, 188, 193)	hsl(353, 47%, 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.

Aa8.82:1 Very good#1B2A23 on #E7BCC1
Aa8.82:1 Very good#E7BCC1 on #1B2A23
Aa5.83:1 Good#5E3842 on #E7BCC1
Aa5.83:1 Good#E7BCC1 on #5E3842
Aa5.23:1 Good#1B2A23 on #7FA08F
Aa5.23:1 Good#7FA08F on #1B2A23
Aa3.46:1 Poor#5E3842 on #7FA08F
Aa3.46:1 Poor#7FA08F on #5E3842

Color blindness preview

CSS variables

/* Panorama to Blush Kiss — https://swatchly.xyz/palette/377f8e-5e3842-1b2a23-7fa08f-e7bcc1 */
:root {
  --panorama: #377f8e;
  --hot-chocolate: #5e3842;
  --swamp-thing: #1b2a23;
  --mother-earth: #7fa08f;
  --blush-kiss: #e7bcc1;
}

Tailwind CSS v4

/* Panorama to Blush Kiss — https://swatchly.xyz/palette/377f8e-5e3842-1b2a23-7fa08f-e7bcc1 */
@theme {
  --color-panorama: #377f8e;
  --color-panorama-50: #e4faff;
  --color-panorama-100: #cbf5ff;
  --color-panorama-200: #b2e4f0;
  --color-panorama-300: #96d0de;
  --color-panorama-400: #71b3c2;
  --color-panorama-500: #5399a8;
  --color-panorama-600: #377f8e;
  --color-panorama-700: #206673;
  --color-panorama-800: #0e505c;
  --color-panorama-900: #033e48;
  --color-panorama-950: #00272e;
  --color-hot-chocolate: #5e3842;
  --color-hot-chocolate-50: #fff1f4;
  --color-hot-chocolate-100: #ffe3e9;
  --color-hot-chocolate-200: #f0cdd5;
  --color-hot-chocolate-300: #ddb5be;
  --color-hot-chocolate-400: #c0959f;
  --color-hot-chocolate-500: #a57a84;
  --color-hot-chocolate-600: #89606a;
  --color-hot-chocolate-700: #704b55;
  --color-hot-chocolate-800: #5e3842;
  --color-hot-chocolate-900: #472c33;
  --color-hot-chocolate-950: #2e1a1f;
  --color-swamp-thing: #1b2a23;
  --color-swamp-thing-50: #eef8f3;
  --color-swamp-thing-100: #e3eee8;
  --color-swamp-thing-200: #cddbd4;
  --color-swamp-thing-300: #b5c5bd;
  --color-swamp-thing-400: #95a69e;
  --color-swamp-thing-500: #7b8c84;
  --color-swamp-thing-600: #62736b;
  --color-swamp-thing-700: #4e5d56;
  --color-swamp-thing-800: #3d4b44;
  --color-swamp-thing-900: #303c36;
  --color-swamp-thing-950: #1b2a23;
  --color-mother-earth: #7fa08f;
  --color-mother-earth-50: #e3f7ec;
  --color-mother-earth-100: #d5ece0;
  --color-mother-earth-200: #bdd8c9;
  --color-mother-earth-300: #a2c0b0;
  --color-mother-earth-400: #7fa08f;
  --color-mother-earth-500: #668676;
  --color-mother-earth-600: #4f6d5e;
  --color-mother-earth-700: #3c584a;
  --color-mother-earth-800: #2d463a;
  --color-mother-earth-900: #22372d;
  --color-mother-earth-950: #14231c;
  --color-blush-kiss: #e7bcc1;
  --color-blush-kiss-50: #fff7f8;
  --color-blush-kiss-100: #ffebed;
  --color-blush-kiss-200: #f4d5d9;
  --color-blush-kiss-300: #e7bcc1;
  --color-blush-kiss-400: #c39ca1;
  --color-blush-kiss-500: #a77f84;
  --color-blush-kiss-600: #896468;
  --color-blush-kiss-700: #6f4d51;
  --color-blush-kiss-800: #583a3e;
  --color-blush-kiss-900: #442b2e;
  --color-blush-kiss-950: #2b1a1c;
}