Start generating

Blue Velvet to Midnight Edition color palette

005F87Blue Velvet65B0D9Milky WavesBEE6FFBreaking the Ice0093D6Homeworld003C59Maniac Mansion001522Midnight Edition
Open in generator Export PNG, PDF, ASE…

About this palette

Blue Velvet to Midnight Edition is a 6-color cool, monochromatic palette: #005F87 (Blue Velvet), #65B0D9 (Milky Waves), #BEE6FF (Breaking the Ice), #0093D6 (Homeworld), #003C59 (Maniac Mansion), #001522 (Midnight Edition). It mixes blue, black tones and feels cool overall. The strongest text pairing is #BEE6FF on #001522 with a contrast ratio of 14.11:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Blue Velvetrgb(0, 95, 135)hsl(198, 100%, 26%)
Milky Wavesrgb(101, 176, 217)hsl(201, 60%, 62%)
Breaking the Icergb(190, 230, 255)hsl(203, 100%, 87%)
Homeworldrgb(0, 147, 214)hsl(199, 100%, 42%)
Maniac Mansionrgb(0, 60, 89)hsl(200, 100%, 17%)
Midnight Editionrgb(0, 21, 34)hsl(203, 100%, 7%)

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.

  • Aa14.11:1 Super#BEE6FF on #001522
  • Aa14.11:1 Super#001522 on #BEE6FF
  • Aa8.91:1 Very good#BEE6FF on #003C59
  • Aa8.91:1 Very good#003C59 on #BEE6FF
  • Aa7.75:1 Very good#65B0D9 on #001522
  • Aa7.75:1 Very good#001522 on #65B0D9
  • Aa5.44:1 Good#0093D6 on #001522
  • Aa5.44:1 Good#001522 on #0093D6

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Blue Velvet to Midnight Edition — https://swatchly.xyz/palette/005f87-65b0d9-bee6ff-0093d6-003c59-001522 */
:root {
  --blue-velvet: #005f87;
  --milky-waves: #65b0d9;
  --breaking-the-ice: #bee6ff;
  --homeworld: #0093d6;
  --maniac-mansion: #003c59;
  --midnight-edition: #001522;
}

Tailwind CSS v4

/* Blue Velvet to Midnight Edition — https://swatchly.xyz/palette/005f87-65b0d9-bee6ff-0093d6-003c59-001522 */
@theme {
  --color-blue-velvet: #005f87;
  --color-blue-velvet-50: #ebf7ff;
  --color-blue-velvet-100: #d7efff;
  --color-blue-velvet-200: #aee0ff;
  --color-blue-velvet-300: #8ccbf1;
  --color-blue-velvet-400: #65acd6;
  --color-blue-velvet-500: #4591bb;
  --color-blue-velvet-600: #29769f;
  --color-blue-velvet-700: #005f87;
  --color-blue-velvet-800: #004a6b;
  --color-blue-velvet-900: #003953;
  --color-blue-velvet-950: #002436;
  --color-milky-waves: #65b0d9;
  --color-milky-waves-50: #eef9ff;
  --color-milky-waves-100: #dbf1ff;
  --color-milky-waves-200: #b2e2ff;
  --color-milky-waves-300: #90cef1;
  --color-milky-waves-400: #65b0d9;
  --color-milky-waves-500: #4893bb;
  --color-milky-waves-600: #2a779d;
  --color-milky-waves-700: #125f81;
  --color-milky-waves-800: #004a68;
  --color-milky-waves-900: #003851;
  --color-milky-waves-950: #002333;
  --color-breaking-the-ice: #bee6ff;
  --color-breaking-the-ice-50: #f6fbff;
  --color-breaking-the-ice-100: #e5f5ff;
  --color-breaking-the-ice-200: #bee6ff;
  --color-breaking-the-ice-300: #adcde1;
  --color-breaking-the-ice-400: #88acc3;
  --color-breaking-the-ice-500: #6a8fa6;
  --color-breaking-the-ice-600: #4f7389;
  --color-breaking-the-ice-700: #3a5b6f;
  --color-breaking-the-ice-800: #294657;
  --color-breaking-the-ice-900: #1d3645;
  --color-breaking-the-ice-950: #10222c;
  --color-homeworld: #0093d6;
  --color-homeworld-50: #edf7ff;
  --color-homeworld-100: #dbf0ff;
  --color-homeworld-200: #b4e0ff;
  --color-homeworld-300: #82cdff;
  --color-homeworld-400: #42aff0;
  --color-homeworld-500: #0093d6;
  --color-homeworld-600: #0076ad;
  --color-homeworld-700: #005e8b;
  --color-homeworld-800: #00496d;
  --color-homeworld-900: #003855;
  --color-homeworld-950: #002337;
  --color-maniac-mansion: #003c59;
  --color-maniac-mansion-50: #ecf7ff;
  --color-maniac-mansion-100: #d8efff;
  --color-maniac-mansion-200: #b6def8;
  --color-maniac-mansion-300: #9bc8e6;
  --color-maniac-mansion-400: #77a9ca;
  --color-maniac-mansion-500: #5b8fb0;
  --color-maniac-mansion-600: #427594;
  --color-maniac-mansion-700: #2f5e7b;
  --color-maniac-mansion-800: #204b65;
  --color-maniac-mansion-900: #003c59;
  --color-maniac-mansion-950: #0a2636;
  --color-midnight-edition: #001522;
  --color-midnight-edition-50: #ebf7ff;
  --color-midnight-edition-100: #dceefa;
  --color-midnight-edition-200: #c6dbe9;
  --color-midnight-edition-300: #adc5d4;
  --color-midnight-edition-400: #8ba6b7;
  --color-midnight-edition-500: #6d8899;
  --color-midnight-edition-600: #516a7a;
  --color-midnight-edition-700: #3b515f;
  --color-midnight-edition-800: #293c47;
  --color-midnight-edition-900: #1b2a33;
  --color-midnight-edition-950: #001522;
}

Similar palettes