Tuxedo to New Heights Color Palette

About this palette

Tuxedo to New Heights is a 5-color muted, cool, gradient palette: #3D3B47 (Tuxedo), #55697D (Admiral Blue), #828DA8 (Celestial Horizon), #A5A9CE (Old World), #D2E6F6 (New Heights). It mixes gray, blue, purple tones and feels cool overall. The strongest text pairing is #3D3B47 on #D2E6F6 with a contrast ratio of 8.56:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tuxedo	rgb(61, 59, 71)	hsl(250, 9%, 25%)
Admiral Blue	rgb(85, 105, 125)	hsl(210, 19%, 41%)
Celestial Horizon	rgb(130, 141, 168)	hsl(223, 18%, 58%)
Old World	rgb(165, 169, 206)	hsl(234, 29%, 73%)
New Heights	rgb(210, 230, 246)	hsl(207, 67%, 89%)

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.56:1 Very good#3D3B47 on #D2E6F6
Aa8.56:1 Very good#D2E6F6 on #3D3B47
Aa4.79:1 Good#3D3B47 on #A5A9CE
Aa4.79:1 Good#A5A9CE on #3D3B47
Aa4.43:1 Poor#55697D on #D2E6F6
Aa4.43:1 Poor#D2E6F6 on #55697D
Aa3.30:1 Poor#3D3B47 on #828DA8
Aa3.30:1 Poor#828DA8 on #3D3B47

Color blindness preview

CSS variables

/* Tuxedo to New Heights — https://swatchly.xyz/palette/3d3b47-55697d-828da8-a5a9ce-d2e6f6 */
:root {
  --tuxedo: #3d3b47;
  --admiral-blue: #55697d;
  --celestial-horizon: #828da8;
  --old-world: #a5a9ce;
  --new-heights: #d2e6f6;
}

Tailwind CSS v4

/* Tuxedo to New Heights — https://swatchly.xyz/palette/3d3b47-55697d-828da8-a5a9ce-d2e6f6 */
@theme {
  --color-tuxedo: #3d3b47;
  --color-tuxedo-50: #f5f4fc;
  --color-tuxedo-100: #ebeaf3;
  --color-tuxedo-200: #d7d6e1;
  --color-tuxedo-300: #c0becb;
  --color-tuxedo-400: #9f9dab;
  --color-tuxedo-500: #83818f;
  --color-tuxedo-600: #686673;
  --color-tuxedo-700: #514f5a;
  --color-tuxedo-800: #3d3b47;
  --color-tuxedo-900: #2e2d35;
  --color-tuxedo-950: #1c1b21;
  --color-admiral-blue: #55697d;
  --color-admiral-blue-50: #eef6ff;
  --color-admiral-blue-100: #deecfb;
  --color-admiral-blue-200: #c7d8e9;
  --color-admiral-blue-300: #adc1d4;
  --color-admiral-blue-400: #8ca0b5;
  --color-admiral-blue-500: #6f8499;
  --color-admiral-blue-600: #55697d;
  --color-admiral-blue-700: #425365;
  --color-admiral-blue-800: #324150;
  --color-admiral-blue-900: #25323f;
  --color-admiral-blue-950: #161f28;
  --color-celestial-horizon: #828da8;
  --color-celestial-horizon-50: #f3f6ff;
  --color-celestial-horizon-100: #e7eeff;
  --color-celestial-horizon-200: #d2dbf0;
  --color-celestial-horizon-300: #bcc6de;
  --color-celestial-horizon-400: #9da7c2;
  --color-celestial-horizon-500: #828da8;
  --color-celestial-horizon-600: #67718b;
  --color-celestial-horizon-700: #505971;
  --color-celestial-horizon-800: #3d455a;
  --color-celestial-horizon-900: #2e3446;
  --color-celestial-horizon-950: #1b202c;
  --color-old-world: #a5a9ce;
  --color-old-world-50: #f7f8ff;
  --color-old-world-100: #eef0ff;
  --color-old-world-200: #daddf8;
  --color-old-world-300: #c4c8e7;
  --color-old-world-400: #a5a9ce;
  --color-old-world-500: #888caf;
  --color-old-world-600: #6c6f91;
  --color-old-world-700: #545776;
  --color-old-world-800: #40435e;
  --color-old-world-900: #303249;
  --color-old-world-950: #1c1e2e;
  --color-new-heights: #d2e6f6;
  --color-new-heights-50: #e4f0fa;
  --color-new-heights-100: #d2e6f6;
  --color-new-heights-200: #c4d3df;
  --color-new-heights-300: #adbecc;
  --color-new-heights-400: #8ea0af;
  --color-new-heights-500: #748695;
  --color-new-heights-600: #5c6d7b;
  --color-new-heights-700: #485864;
  --color-new-heights-800: #37444f;
  --color-new-heights-900: #29343e;
  --color-new-heights-950: #182027;
}