Bevelled Glass to Imperial Color Palette

About this palette

Bevelled Glass to Imperial is a 4-color cool palette: #7CD2BA (Bevelled Glass), #799AA3 (Tranquili Teal), #6E648B (Heron), #5C2C71 (Imperial). It mixes turquoise, blue, purple tones and feels cool overall. The strongest text pairing is #7CD2BA on #5C2C71 with a contrast ratio of 5.74:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bevelled Glass	rgb(124, 210, 186)	hsl(163, 49%, 65%)
Tranquili Teal	rgb(121, 154, 163)	hsl(193, 19%, 56%)
Heron	rgb(110, 100, 139)	hsl(255, 16%, 47%)
Imperial	rgb(92, 44, 113)	hsl(282, 44%, 31%)

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.74:1 Good#7CD2BA on #5C2C71
Aa5.74:1 Good#5C2C71 on #7CD2BA
Aa3.39:1 Poor#799AA3 on #5C2C71
Aa3.39:1 Poor#5C2C71 on #799AA3
Aa3.05:1 Poor#7CD2BA on #6E648B
Aa3.05:1 Poor#6E648B on #7CD2BA

Color blindness preview

CSS variables

/* Bevelled Glass to Imperial — https://swatchly.xyz/palette/7cd2ba-799aa3-6e648b-5c2c71 */
:root {
  --bevelled-glass: #7cd2ba;
  --tranquili-teal: #799aa3;
  --heron: #6e648b;
  --imperial: #5c2c71;
}

Tailwind CSS v4

/* Bevelled Glass to Imperial — https://swatchly.xyz/palette/7cd2ba-799aa3-6e648b-5c2c71 */
@theme {
  --color-bevelled-glass: #7cd2ba;
  --color-bevelled-glass-50: #d4fff1;
  --color-bevelled-glass-100: #c3f7e7;
  --color-bevelled-glass-200: #a6e5d2;
  --color-bevelled-glass-300: #7cd2ba;
  --color-bevelled-glass-400: #5fb29b;
  --color-bevelled-glass-500: #3f9680;
  --color-bevelled-glass-600: #207b67;
  --color-bevelled-glass-700: #036351;
  --color-bevelled-glass-800: #004e3f;
  --color-bevelled-glass-900: #003d30;
  --color-bevelled-glass-950: #00261e;
  --color-tranquili-teal: #799aa3;
  --color-tranquili-teal-50: #ecfbff;
  --color-tranquili-teal-100: #e0f4fa;
  --color-tranquili-teal-200: #cce4ea;
  --color-tranquili-teal-300: #b4d0d8;
  --color-tranquili-teal-400: #94b3bc;
  --color-tranquili-teal-500: #799aa3;
  --color-tranquili-teal-600: #5d7d85;
  --color-tranquili-teal-700: #45636b;
  --color-tranquili-teal-800: #334d54;
  --color-tranquili-teal-900: #243b41;
  --color-tranquili-teal-950: #142428;
  --color-heron: #6e648b;
  --color-heron-50: #f6f3ff;
  --color-heron-100: #ece7ff;
  --color-heron-200: #d9d2f3;
  --color-heron-300: #c3badf;
  --color-heron-400: #a49ac2;
  --color-heron-500: #887ea7;
  --color-heron-600: #6e648b;
  --color-heron-700: #574e71;
  --color-heron-800: #443c5a;
  --color-heron-900: #342e47;
  --color-heron-950: #201c2e;
  --color-imperial: #5c2c71;
  --color-imperial-50: #faf1ff;
  --color-imperial-100: #f6e3ff;
  --color-imperial-200: #ecc7ff;
  --color-imperial-300: #daadf0;
  --color-imperial-400: #bd8cd5;
  --color-imperial-500: #a270ba;
  --color-imperial-600: #87569d;
  --color-imperial-700: #6e4283;
  --color-imperial-800: #5c2c71;
  --color-imperial-900: #462455;
  --color-imperial-950: #2d1438;
}