Black Velvet to Icy Breeze color palette

242131Black Velvet 2F384FMediaeval Blue 516B99Queen Blue 6793A8Treasure Map Waters B5B0F3Purple Illusion C4EFFFIcy Breeze

Open in generator Export PNG, PDF, ASE…

About this palette

Black Velvet to Icy Breeze is a 6-color muted, cool, gradient palette: #242131 (Black Velvet), #2F384F (Mediaeval Blue), #516B99 (Queen Blue), #6793A8 (Treasure Map Waters), #B5B0F3 (Purple Illusion), #C4EFFF (Icy Breeze). It mixes gray, blue, purple tones and feels cool overall. The strongest text pairing is #242131 on #C4EFFF with a contrast ratio of 12.82:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Velvet	rgb(36, 33, 49)	hsl(251, 20%, 16%)
Mediaeval Blue	rgb(47, 56, 79)	hsl(223, 25%, 25%)
Queen Blue	rgb(81, 107, 153)	hsl(218, 31%, 46%)
Treasure Map Waters	rgb(103, 147, 168)	hsl(199, 27%, 53%)
Purple Illusion	rgb(181, 176, 243)	hsl(244, 74%, 82%)
Icy Breeze	rgb(196, 239, 255)	hsl(196, 100%, 88%)

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.

Aa12.82:1 Super#242131 on #C4EFFF
Aa12.82:1 Super#C4EFFF on #242131
Aa9.52:1 Very good#2F384F on #C4EFFF
Aa9.52:1 Very good#C4EFFF on #2F384F
Aa7.83:1 Very good#242131 on #B5B0F3
Aa7.83:1 Very good#B5B0F3 on #242131
Aa5.82:1 Good#2F384F on #B5B0F3
Aa5.82:1 Good#B5B0F3 on #2F384F

Color blindness preview

CSS variables

/* Black Velvet to Icy Breeze — https://swatchly.xyz/palette/242131-2f384f-516b99-6793a8-b5b0f3-c4efff */
:root {
  --black-velvet: #242131;
  --mediaeval-blue: #2f384f;
  --queen-blue: #516b99;
  --treasure-map-waters: #6793a8;
  --purple-illusion: #b5b0f3;
  --icy-breeze: #c4efff;
}

Tailwind CSS v4

/* Black Velvet to Icy Breeze — https://swatchly.xyz/palette/242131-2f384f-516b99-6793a8-b5b0f3-c4efff */
@theme {
  --color-black-velvet: #242131;
  --color-black-velvet-50: #f5f3ff;
  --color-black-velvet-100: #ebe9f7;
  --color-black-velvet-200: #d7d5e5;
  --color-black-velvet-300: #c1bed0;
  --color-black-velvet-400: #a29fb2;
  --color-black-velvet-500: #878498;
  --color-black-velvet-600: #6e6b7e;
  --color-black-velvet-700: #585566;
  --color-black-velvet-800: #464353;
  --color-black-velvet-900: #373542;
  --color-black-velvet-950: #242131;
  --color-mediaeval-blue: #2f384f;
  --color-mediaeval-blue-50: #f1f5ff;
  --color-mediaeval-blue-100: #e3ebfd;
  --color-mediaeval-blue-200: #ced7ed;
  --color-mediaeval-blue-300: #b7c1d9;
  --color-mediaeval-blue-400: #98a2bd;
  --color-mediaeval-blue-500: #7d88a3;
  --color-mediaeval-blue-600: #646f88;
  --color-mediaeval-blue-700: #505970;
  --color-mediaeval-blue-800: #3f475c;
  --color-mediaeval-blue-900: #2f384f;
  --color-mediaeval-blue-950: #1e2331;
  --color-queen-blue: #516b99;
  --color-queen-blue-50: #f0f5ff;
  --color-queen-blue-100: #e0ecff;
  --color-queen-blue-200: #c2d8ff;
  --color-queen-blue-300: #a8c1ed;
  --color-queen-blue-400: #86a2d1;
  --color-queen-blue-500: #6b86b6;
  --color-queen-blue-600: #516b99;
  --color-queen-blue-700: #3d547d;
  --color-queen-blue-800: #2e4265;
  --color-queen-blue-900: #213250;
  --color-queen-blue-950: #131f34;
  --color-treasure-map-waters: #6793a8;
  --color-treasure-map-waters-50: #ecf9ff;
  --color-treasure-map-waters-100: #d8f2ff;
  --color-treasure-map-waters-200: #c0e1f1;
  --color-treasure-map-waters-300: #a6ccde;
  --color-treasure-map-waters-400: #83aec2;
  --color-treasure-map-waters-500: #6793a8;
  --color-treasure-map-waters-600: #4c778b;
  --color-treasure-map-waters-700: #375f71;
  --color-treasure-map-waters-800: #274a5a;
  --color-treasure-map-waters-900: #1b3946;
  --color-treasure-map-waters-950: #0d232d;
  --color-purple-illusion: #b5b0f3;
  --color-purple-illusion-50: #f0efff;
  --color-purple-illusion-100: #e4e2ff;
  --color-purple-illusion-200: #cdcaff;
  --color-purple-illusion-300: #b5b0f3;
  --color-purple-illusion-400: #9792d2;
  --color-purple-illusion-500: #7e78b7;
  --color-purple-illusion-600: #655f9b;
  --color-purple-illusion-700: #514b80;
  --color-purple-illusion-800: #3f3a69;
  --color-purple-illusion-900: #312c54;
  --color-purple-illusion-950: #1e1a37;
  --color-icy-breeze: #c4efff;
  --color-icy-breeze-50: #dff6ff;
  --color-icy-breeze-100: #c4efff;
  --color-icy-breeze-200: #badae6;
  --color-icy-breeze-300: #a1c5d2;
  --color-icy-breeze-400: #7fa7b5;
  --color-icy-breeze-500: #648c9a;
  --color-icy-breeze-600: #4b7280;
  --color-icy-breeze-700: #385b68;
  --color-icy-breeze-800: #284752;
  --color-icy-breeze-900: #1c3740;
  --color-icy-breeze-950: #0f2229;
}