Celestial Cathedral to Turtle Color Palette

About this palette

Celestial Cathedral to Turtle is a 4-color muted palette: #DBEEFC (Celestial Cathedral), #A5BFD6 (Rendez-Blue), #8C6C59 (Mocha Madness), #4E4135 (Turtle). It mixes white, blue, brown, gray tones and feels balanced overall. The strongest text pairing is #DBEEFC on #4E4135 with a contrast ratio of 8.28:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Celestial Cathedral	rgb(219, 238, 252)	hsl(205, 85%, 92%)
Rendez-Blue	rgb(165, 191, 214)	hsl(208, 37%, 74%)
Mocha Madness	rgb(140, 108, 89)	hsl(22, 22%, 45%)
Turtle	rgb(78, 65, 53)	hsl(29, 19%, 26%)

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.28:1 Very good#DBEEFC on #4E4135
Aa8.28:1 Very good#4E4135 on #DBEEFC
Aa5.17:1 Good#A5BFD6 on #4E4135
Aa5.17:1 Good#4E4135 on #A5BFD6
Aa4.01:1 Poor#DBEEFC on #8C6C59
Aa4.01:1 Poor#8C6C59 on #DBEEFC

Color blindness preview

CSS variables

/* Celestial Cathedral to Turtle — https://swatchly.xyz/palette/dbeefc-a5bfd6-8c6c59-4e4135 */
:root {
  --celestial-cathedral: #dbeefc;
  --rendez-blue: #a5bfd6;
  --mocha-madness: #8c6c59;
  --turtle: #4e4135;
}

Tailwind CSS v4

/* Celestial Cathedral to Turtle — https://swatchly.xyz/palette/dbeefc-a5bfd6-8c6c59-4e4135 */
@theme {
  --color-celestial-cathedral: #dbeefc;
  --color-celestial-cathedral-50: #ecf7fe;
  --color-celestial-cathedral-100: #dbeefc;
  --color-celestial-cathedral-200: #ccd9e4;
  --color-celestial-cathedral-300: #b4c3cf;
  --color-celestial-cathedral-400: #93a4b1;
  --color-celestial-cathedral-500: #788995;
  --color-celestial-cathedral-600: #5e6e7a;
  --color-celestial-cathedral-700: #495862;
  --color-celestial-cathedral-800: #37444e;
  --color-celestial-cathedral-900: #29343c;
  --color-celestial-cathedral-950: #182026;
  --color-rendez-blue: #a5bfd6;
  --color-rendez-blue-50: #e8f4ff;
  --color-rendez-blue-100: #d9eaf9;
  --color-rendez-blue-200: #c1d6e8;
  --color-rendez-blue-300: #a5bfd6;
  --color-rendez-blue-400: #88a0b6;
  --color-rendez-blue-500: #6d869b;
  --color-rendez-blue-600: #556c81;
  --color-rendez-blue-700: #415669;
  --color-rendez-blue-800: #314454;
  --color-rendez-blue-900: #253542;
  --color-rendez-blue-950: #15212a;
  --color-mocha-madness: #8c6c59;
  --color-mocha-madness-50: #fff2eb;
  --color-mocha-madness-100: #fee8db;
  --color-mocha-madness-200: #efd5c5;
  --color-mocha-madness-300: #dcbfad;
  --color-mocha-madness-400: #c0a08d;
  --color-mocha-madness-500: #a68572;
  --color-mocha-madness-600: #8c6c59;
  --color-mocha-madness-700: #715443;
  --color-mocha-madness-800: #5a4132;
  --color-mocha-madness-900: #463124;
  --color-mocha-madness-950: #2d1d14;
  --color-turtle: #4e4135;
  --color-turtle-50: #fcf3eb;
  --color-turtle-100: #f3e9e0;
  --color-turtle-200: #e1d5ca;
  --color-turtle-300: #ccbfb2;
  --color-turtle-400: #ae9f92;
  --color-turtle-500: #938477;
  --color-turtle-600: #786a5d;
  --color-turtle-700: #605448;
  --color-turtle-800: #4e4135;
  --color-turtle-900: #3b3229;
  --color-turtle-950: #251f18;
}