Start generating

Deep Space Royal to Cosmic Latte color palette

1E3B7DDeep Space Royal5D68A4Bellflower646DACTwinkle NightB2993BNuggetE4CD6FLe Bon DijonFFF8E7Cosmic Latte
Open in generator Export PNG, PDF, ASE…

About this palette

Deep Space Royal to Cosmic Latte is a 6-color palette: #1E3B7D (Deep Space Royal), #5D68A4 (Bellflower), #646DAC (Twinkle Night), #B2993B (Nugget), #E4CD6F (Le Bon Dijon), #FFF8E7 (Cosmic Latte). It mixes blue, purple, yellow, white tones and feels cool overall. The strongest text pairing is #1E3B7D on #FFF8E7 with a contrast ratio of 10.03:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Deep Space Royalrgb(30, 59, 125)hsl(222, 61%, 30%)
Bellflowerrgb(93, 104, 164)hsl(231, 28%, 50%)
Twinkle Nightrgb(100, 109, 172)hsl(232, 30%, 53%)
Nuggetrgb(178, 153, 59)hsl(47, 50%, 46%)
Le Bon Dijonrgb(228, 205, 111)hsl(48, 68%, 66%)
Cosmic Lattergb(255, 248, 231)hsl(42, 100%, 95%)

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.03:1 Very good#1E3B7D on #FFF8E7
  • Aa10.03:1 Very good#FFF8E7 on #1E3B7D
  • Aa6.71:1 Good#1E3B7D on #E4CD6F
  • Aa6.71:1 Good#E4CD6F on #1E3B7D
  • Aa4.98:1 Good#5D68A4 on #FFF8E7
  • Aa4.98:1 Good#FFF8E7 on #5D68A4
  • Aa4.59:1 Good#646DAC on #FFF8E7
  • Aa4.59:1 Good#FFF8E7 on #646DAC

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Deep Space Royal to Cosmic Latte — https://swatchly.xyz/palette/1e3b7d-5d68a4-646dac-b2993b-e4cd6f-fff8e7 */
:root {
  --deep-space-royal: #1e3b7d;
  --bellflower: #5d68a4;
  --twinkle-night: #646dac;
  --nugget: #b2993b;
  --le-bon-dijon: #e4cd6f;
  --cosmic-latte: #fff8e7;
}

Tailwind CSS v4

/* Deep Space Royal to Cosmic Latte — https://swatchly.xyz/palette/1e3b7d-5d68a4-646dac-b2993b-e4cd6f-fff8e7 */
@theme {
  --color-deep-space-royal: #1e3b7d;
  --color-deep-space-royal-50: #f0f5ff;
  --color-deep-space-royal-100: #e1ecff;
  --color-deep-space-royal-200: #c4d8ff;
  --color-deep-space-royal-300: #a1c0ff;
  --color-deep-space-royal-400: #7c9fe7;
  --color-deep-space-royal-500: #6083cb;
  --color-deep-space-royal-600: #4767ac;
  --color-deep-space-royal-700: #33508e;
  --color-deep-space-royal-800: #1e3b7d;
  --color-deep-space-royal-900: #1a2e5c;
  --color-deep-space-royal-950: #0d1c3c;
  --color-bellflower: #5d68a4;
  --color-bellflower-50: #f2f5ff;
  --color-bellflower-100: #e5eaff;
  --color-bellflower-200: #ccd6ff;
  --color-bellflower-300: #b2bef7;
  --color-bellflower-400: #919edc;
  --color-bellflower-500: #7683c1;
  --color-bellflower-600: #5d68a4;
  --color-bellflower-700: #485187;
  --color-bellflower-800: #373f6e;
  --color-bellflower-900: #292f57;
  --color-bellflower-950: #181d39;
  --color-twinkle-night: #646dac;
  --color-twinkle-night-50: #f2f5ff;
  --color-twinkle-night-100: #e7ebff;
  --color-twinkle-night-200: #d0d8ff;
  --color-twinkle-night-300: #b6c1fb;
  --color-twinkle-night-400: #97a2e1;
  --color-twinkle-night-500: #7d87c7;
  --color-twinkle-night-600: #646dac;
  --color-twinkle-night-700: #4e558f;
  --color-twinkle-night-800: #3b4174;
  --color-twinkle-night-900: #2c315c;
  --color-twinkle-night-950: #1a1e3c;
  --color-nugget: #b2993b;
  --color-nugget-50: #fff3c8;
  --color-nugget-100: #f7e7af;
  --color-nugget-200: #e5d28f;
  --color-nugget-300: #d0ba6c;
  --color-nugget-400: #b2993b;
  --color-nugget-500: #977f19;
  --color-nugget-600: #7b6600;
  --color-nugget-700: #625100;
  --color-nugget-800: #4e3f00;
  --color-nugget-900: #3d3100;
  --color-nugget-950: #271e00;
  --color-le-bon-dijon: #e4cd6f;
  --color-le-bon-dijon-50: #fcefb9;
  --color-le-bon-dijon-100: #f2e3a6;
  --color-le-bon-dijon-200: #e4cd6f;
  --color-le-bon-dijon-300: #ccb867;
  --color-le-bon-dijon-400: #b09a3e;
  --color-le-bon-dijon-500: #978017;
  --color-le-bon-dijon-600: #7b6800;
  --color-le-bon-dijon-700: #635300;
  --color-le-bon-dijon-800: #4f4200;
  --color-le-bon-dijon-900: #3d3200;
  --color-le-bon-dijon-950: #261f00;
  --color-cosmic-latte: #fff8e7;
  --color-cosmic-latte-50: #fff8e7;
  --color-cosmic-latte-100: #f2eee4;
  --color-cosmic-latte-200: #ded9cd;
  --color-cosmic-latte-300: #c8c2b4;
  --color-cosmic-latte-400: #a8a293;
  --color-cosmic-latte-500: #8c8677;
  --color-cosmic-latte-600: #716b5d;
  --color-cosmic-latte-700: #5a5548;
  --color-cosmic-latte-800: #474237;
  --color-cosmic-latte-900: #363229;
  --color-cosmic-latte-950: #221f18;
}

Similar palettes