Infinity and Beyond to Beyond the Stars color palette

6B7D9EInfinity and Beyond D2C5A8Trail Dust 644C61Grape Fizz 80B88EVerde 1B304FBeyond the Stars

About this palette

Infinity and Beyond to Beyond the Stars is a 5-color muted, cool, vintage palette: #6B7D9E (Infinity and Beyond), #D2C5A8 (Trail Dust), #644C61 (Grape Fizz), #80B88E (Verde), #1B304F (Beyond the Stars). It mixes blue, yellow, purple, green tones and feels cool overall. The strongest text pairing is #D2C5A8 on #1B304F with a contrast ratio of 7.77:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Infinity and Beyond	rgb(107, 125, 158)	hsl(219, 21%, 52%)
Trail Dust	rgb(210, 197, 168)	hsl(41, 32%, 74%)
Grape Fizz	rgb(100, 76, 97)	hsl(308, 14%, 35%)
Verde	rgb(128, 184, 142)	hsl(135, 28%, 61%)
Beyond the Stars	rgb(27, 48, 79)	hsl(216, 49%, 21%)

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.77:1 Very good#D2C5A8 on #1B304F
Aa7.77:1 Very good#1B304F on #D2C5A8
Aa5.79:1 Good#80B88E on #1B304F
Aa5.79:1 Good#1B304F on #80B88E
Aa4.47:1 Poor#D2C5A8 on #644C61
Aa4.47:1 Poor#644C61 on #D2C5A8
Aa3.33:1 Poor#644C61 on #80B88E
Aa3.33:1 Poor#80B88E on #644C61

Color blindness preview

CSS variables

/* Infinity and Beyond to Beyond the Stars — https://swatchly.xyz/palette/6b7d9e-d2c5a8-644c61-80b88e-1b304f */
:root {
  --infinity-and-beyond: #6b7d9e;
  --trail-dust: #d2c5a8;
  --grape-fizz: #644c61;
  --verde: #80b88e;
  --beyond-the-stars: #1b304f;
}

Tailwind CSS v4

/* Infinity and Beyond to Beyond the Stars — https://swatchly.xyz/palette/6b7d9e-d2c5a8-644c61-80b88e-1b304f */
@theme {
  --color-infinity-and-beyond: #6b7d9e;
  --color-infinity-and-beyond-50: #edf4ff;
  --color-infinity-and-beyond-100: #dce8ff;
  --color-infinity-and-beyond-200: #c3d3ef;
  --color-infinity-and-beyond-300: #a9bbda;
  --color-infinity-and-beyond-400: #879abb;
  --color-infinity-and-beyond-500: #6b7d9e;
  --color-infinity-and-beyond-600: #546483;
  --color-infinity-and-beyond-700: #41506b;
  --color-infinity-and-beyond-800: #313e56;
  --color-infinity-and-beyond-900: #253044;
  --color-infinity-and-beyond-950: #161e2d;
  --color-trail-dust: #d2c5a8;
  --color-trail-dust-50: #fef7e8;
  --color-trail-dust-100: #f6eedd;
  --color-trail-dust-200: #e5dbc6;
  --color-trail-dust-300: #d2c5a8;
  --color-trail-dust-400: #b1a58a;
  --color-trail-dust-500: #94886d;
  --color-trail-dust-600: #796d53;
  --color-trail-dust-700: #60563e;
  --color-trail-dust-800: #4b422d;
  --color-trail-dust-900: #3a3220;
  --color-trail-dust-950: #241f12;
  --color-grape-fizz: #644c61;
  --color-grape-fizz-50: #fff0fd;
  --color-grape-fizz-100: #f7e5f4;
  --color-grape-fizz-200: #e5d0e2;
  --color-grape-fizz-300: #d0b8cd;
  --color-grape-fizz-400: #b298ae;
  --color-grape-fizz-500: #967c93;
  --color-grape-fizz-600: #7b6278;
  --color-grape-fizz-700: #644c61;
  --color-grape-fizz-800: #4e3b4c;
  --color-grape-fizz-900: #3d2d3b;
  --color-grape-fizz-950: #261b25;
  --color-verde: #80b88e;
  --color-verde-50: #e7ffec;
  --color-verde-100: #d7f9df;
  --color-verde-200: #c0e8c9;
  --color-verde-300: #a6d4b1;
  --color-verde-400: #80b88e;
  --color-verde-500: #649b72;
  --color-verde-600: #487e57;
  --color-verde-700: #336542;
  --color-verde-800: #234f30;
  --color-verde-900: #173d23;
  --color-verde-950: #0a2613;
  --color-beyond-the-stars: #1b304f;
  --color-beyond-the-stars-50: #eff6ff;
  --color-beyond-the-stars-100: #e0ecff;
  --color-beyond-the-stars-200: #c5d9f7;
  --color-beyond-the-stars-300: #acc3e4;
  --color-beyond-the-stars-400: #8aa3c7;
  --color-beyond-the-stars-500: #6e86ab;
  --color-beyond-the-stars-600: #546b8e;
  --color-beyond-the-stars-700: #3f5473;
  --color-beyond-the-stars-800: #2f405b;
  --color-beyond-the-stars-900: #1b304f;
  --color-beyond-the-stars-950: #131d2d;
}