Cosmic to Celestial Cathedral Color Palette

About this palette

Cosmic to Celestial Cathedral is a 5-color muted palette: #BBB4CB (Cosmic), #3B311D (Cola), #3C5B75 (Dark Blue), #A69478 (Saddle Up), #D7ECF6 (Celestial Cathedral). It mixes gray, brown, blue, yellow, white tones and feels warm overall. The strongest text pairing is #3B311D on #D7ECF6 with a contrast ratio of 10.48:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cosmic	rgb(187, 180, 203)	hsl(258, 18%, 75%)
Cola	rgb(59, 49, 29)	hsl(40, 34%, 17%)
Dark Blue	rgb(60, 91, 117)	hsl(207, 32%, 35%)
Saddle Up	rgb(166, 148, 120)	hsl(37, 21%, 56%)
Celestial Cathedral	rgb(215, 236, 246)	hsl(199, 63%, 90%)

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.

Aa10.48:1 Very good#3B311D on #D7ECF6
Aa10.48:1 Very good#D7ECF6 on #3B311D
Aa6.39:1 Good#BBB4CB on #3B311D
Aa6.39:1 Good#3B311D on #BBB4CB
Aa5.85:1 Good#3C5B75 on #D7ECF6
Aa5.85:1 Good#D7ECF6 on #3C5B75
Aa4.34:1 Poor#3B311D on #A69478
Aa4.34:1 Poor#A69478 on #3B311D

Color blindness preview

CSS variables

/* Cosmic to Celestial Cathedral — https://swatchly.xyz/palette/bbb4cb-3b311d-3c5b75-a69478-d7ecf6 */
:root {
  --cosmic: #bbb4cb;
  --cola: #3b311d;
  --dark-blue: #3c5b75;
  --saddle-up: #a69478;
  --celestial-cathedral: #d7ecf6;
}

Tailwind CSS v4

/* Cosmic to Celestial Cathedral — https://swatchly.xyz/palette/bbb4cb-3b311d-3c5b75-a69478-d7ecf6 */
@theme {
  --color-cosmic: #bbb4cb;
  --color-cosmic-50: #f2eefc;
  --color-cosmic-100: #e7e2f2;
  --color-cosmic-200: #d2cddf;
  --color-cosmic-300: #bbb4cb;
  --color-cosmic-400: #9d96ac;
  --color-cosmic-500: #837d92;
  --color-cosmic-600: #6a6478;
  --color-cosmic-700: #554f61;
  --color-cosmic-800: #433e4e;
  --color-cosmic-900: #34303e;
  --color-cosmic-950: #201d27;
  --color-cola: #3b311d;
  --color-cola-50: #fbf4e7;
  --color-cola-100: #f2eadb;
  --color-cola-200: #e0d6c4;
  --color-cola-300: #cac0ab;
  --color-cola-400: #aca08a;
  --color-cola-500: #90856e;
  --color-cola-600: #756a55;
  --color-cola-700: #5e5440;
  --color-cola-800: #4a4130;
  --color-cola-900: #3b311d;
  --color-cola-950: #231e14;
  --color-dark-blue: #3c5b75;
  --color-dark-blue-50: #edf7ff;
  --color-dark-blue-100: #dbeeff;
  --color-dark-blue-200: #c2dcf2;
  --color-dark-blue-300: #a9c6df;
  --color-dark-blue-400: #87a7c3;
  --color-dark-blue-500: #6b8ca8;
  --color-dark-blue-600: #52728c;
  --color-dark-blue-700: #3c5b75;
  --color-dark-blue-800: #2e475c;
  --color-dark-blue-900: #213748;
  --color-dark-blue-950: #12222f;
  --color-saddle-up: #a69478;
  --color-saddle-up-50: #fbf0de;
  --color-saddle-up-100: #f0e4d0;
  --color-saddle-up-200: #ddceb7;
  --color-saddle-up-300: #c6b59c;
  --color-saddle-up-400: #a69478;
  --color-saddle-up-500: #8c7b60;
  --color-saddle-up-600: #736249;
  --color-saddle-up-700: #5d4e37;
  --color-saddle-up-800: #4a3d29;
  --color-saddle-up-900: #3a2f1e;
  --color-saddle-up-950: #261e11;
  --color-celestial-cathedral: #d7ecf6;
  --color-celestial-cathedral-50: #e9f5fa;
  --color-celestial-cathedral-100: #d7ecf6;
  --color-celestial-cathedral-200: #c8d8df;
  --color-celestial-cathedral-300: #b1c2ca;
  --color-celestial-cathedral-400: #91a4ad;
  --color-celestial-cathedral-500: #768992;
  --color-celestial-cathedral-600: #5c6f77;
  --color-celestial-cathedral-700: #485860;
  --color-celestial-cathedral-800: #36454c;
  --color-celestial-cathedral-900: #29353b;
  --color-celestial-cathedral-950: #182125;
}