Night Snow to Velvet Cosmos color palette

B7CEFFNight Snow 43B94AIntoxicate 9E7F00Captain Kirk 335EBABlasphemous Blue 4A0F4DVelvet Cosmos

About this palette

Night Snow to Velvet Cosmos is a 5-color cool palette: #B7CEFF (Night Snow), #43B94A (Intoxicate), #9E7F00 (Captain Kirk), #335EBA (Blasphemous Blue), #4A0F4D (Velvet Cosmos). It mixes blue, green, yellow, purple tones and feels cool overall. The strongest text pairing is #B7CEFF on #4A0F4D with a contrast ratio of 9.06:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Night Snow	rgb(183, 206, 255)	hsl(221, 100%, 86%)
Intoxicate	rgb(67, 185, 74)	hsl(124, 47%, 49%)
Captain Kirk	rgb(158, 127, 0)	hsl(48, 100%, 31%)
Blasphemous Blue	rgb(51, 94, 186)	hsl(221, 57%, 46%)
Velvet Cosmos	rgb(74, 15, 77)	hsl(297, 67%, 18%)

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.

Aa9.06:1 Very good#B7CEFF on #4A0F4D
Aa9.06:1 Very good#4A0F4D on #B7CEFF
Aa5.64:1 Good#43B94A on #4A0F4D
Aa5.64:1 Good#4A0F4D on #43B94A
Aa3.85:1 Poor#B7CEFF on #335EBA
Aa3.85:1 Poor#335EBA on #B7CEFF
Aa3.74:1 Poor#9E7F00 on #4A0F4D
Aa3.74:1 Poor#4A0F4D on #9E7F00

Color blindness preview

CSS variables

/* Night Snow to Velvet Cosmos — https://swatchly.xyz/palette/b7ceff-43b94a-9e7f00-335eba-4a0f4d */
:root {
  --night-snow: #b7ceff;
  --intoxicate: #43b94a;
  --captain-kirk: #9e7f00;
  --blasphemous-blue: #335eba;
  --velvet-cosmos: #4a0f4d;
}

Tailwind CSS v4

/* Night Snow to Velvet Cosmos — https://swatchly.xyz/palette/b7ceff-43b94a-9e7f00-335eba-4a0f4d */
@theme {
  --color-night-snow: #b7ceff;
  --color-night-snow-50: #e7efff;
  --color-night-snow-100: #d6e3ff;
  --color-night-snow-200: #b7ceff;
  --color-night-snow-300: #a5b9e4;
  --color-night-snow-400: #869bc8;
  --color-night-snow-500: #6d81ae;
  --color-night-snow-600: #556893;
  --color-night-snow-700: #42537a;
  --color-night-snow-800: #324163;
  --color-night-snow-900: #25324f;
  --color-night-snow-950: #151f33;
  --color-intoxicate: #43b94a;
  --color-intoxicate-50: #dcffda;
  --color-intoxicate-100: #b8feb7;
  --color-intoxicate-200: #99ec99;
  --color-intoxicate-300: #76d778;
  --color-intoxicate-400: #43b94a;
  --color-intoxicate-500: #1d9d2c;
  --color-intoxicate-600: #008019;
  --color-intoxicate-700: #006612;
  --color-intoxicate-800: #00500c;
  --color-intoxicate-900: #003f07;
  --color-intoxicate-950: #002803;
  --color-captain-kirk: #9e7f00;
  --color-captain-kirk-50: #fff4d4;
  --color-captain-kirk-100: #fde9ae;
  --color-captain-kirk-200: #ecd48d;
  --color-captain-kirk-300: #d8bc69;
  --color-captain-kirk-400: #ba9b39;
  --color-captain-kirk-500: #9e7f00;
  --color-captain-kirk-600: #7f6600;
  --color-captain-kirk-700: #655100;
  --color-captain-kirk-800: #503f00;
  --color-captain-kirk-900: #3e3000;
  --color-captain-kirk-950: #271e00;
  --color-blasphemous-blue: #335eba;
  --color-blasphemous-blue-50: #f0f5ff;
  --color-blasphemous-blue-100: #dfeaff;
  --color-blasphemous-blue-200: #bfd5ff;
  --color-blasphemous-blue-300: #9abcff;
  --color-blasphemous-blue-400: #6a99f8;
  --color-blasphemous-blue-500: #4d7bda;
  --color-blasphemous-blue-600: #335eba;
  --color-blasphemous-blue-700: #244999;
  --color-blasphemous-blue-800: #18387e;
  --color-blasphemous-blue-900: #102a65;
  --color-blasphemous-blue-950: #071944;
  --color-velvet-cosmos: #4a0f4d;
  --color-velvet-cosmos-50: #ffefff;
  --color-velvet-cosmos-100: #ffdfff;
  --color-velvet-cosmos-200: #f6c4f7;
  --color-velvet-cosmos-300: #e3aae4;
  --color-velvet-cosmos-400: #c587c7;
  --color-velvet-cosmos-500: #a86aaa;
  --color-velvet-cosmos-600: #8b4f8d;
  --color-velvet-cosmos-700: #6f3a71;
  --color-velvet-cosmos-800: #572959;
  --color-velvet-cosmos-900: #4a0f4d;
  --color-velvet-cosmos-950: #2a0f2b;
}