Start generating

Midnight Masquerade to Veiling Waterfalls color palette

262F4BMidnight Masquerade50432ETurtle5F7499Misty HarbourB2925DVeranda GoldDCC37FSunspillD0E5FFVeiling Waterfalls
Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Masquerade to Veiling Waterfalls is a 6-color vintage palette: #262F4B (Midnight Masquerade), #50432E (Turtle), #5F7499 (Misty Harbour), #B2925D (Veranda Gold), #DCC37F (Sunspill), #D0E5FF (Veiling Waterfalls). It mixes blue, brown, yellow tones and feels balanced overall. The strongest text pairing is #262F4B on #D0E5FF with a contrast ratio of 10.27:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Midnight Masqueradergb(38, 47, 75)hsl(225, 33%, 22%)
Turtlergb(80, 67, 46)hsl(37, 27%, 25%)
Misty Harbourrgb(95, 116, 153)hsl(218, 23%, 49%)
Veranda Goldrgb(178, 146, 93)hsl(37, 36%, 53%)
Sunspillrgb(220, 195, 127)hsl(44, 57%, 68%)
Veiling Waterfallsrgb(208, 229, 255)hsl(213, 100%, 91%)

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.27:1 Very good#262F4B on #D0E5FF
  • Aa10.27:1 Very good#D0E5FF on #262F4B
  • Aa7.64:1 Very good#262F4B on #DCC37F
  • Aa7.64:1 Very good#DCC37F on #262F4B
  • Aa7.48:1 Very good#50432E on #D0E5FF
  • Aa7.48:1 Very good#D0E5FF on #50432E
  • Aa5.57:1 Good#50432E on #DCC37F
  • Aa5.57:1 Good#DCC37F on #50432E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Midnight Masquerade to Veiling Waterfalls — https://swatchly.xyz/palette/262f4b-50432e-5f7499-b2925d-dcc37f-d0e5ff */
:root {
  --midnight-masquerade: #262f4b;
  --turtle: #50432e;
  --misty-harbour: #5f7499;
  --veranda-gold: #b2925d;
  --sunspill: #dcc37f;
  --veiling-waterfalls: #d0e5ff;
}

Tailwind CSS v4

/* Midnight Masquerade to Veiling Waterfalls — https://swatchly.xyz/palette/262f4b-50432e-5f7499-b2925d-dcc37f-d0e5ff */
@theme {
  --color-midnight-masquerade: #262f4b;
  --color-midnight-masquerade-50: #f1f5ff;
  --color-midnight-masquerade-100: #e3ebff;
  --color-midnight-masquerade-200: #cdd7f2;
  --color-midnight-masquerade-300: #b5c0df;
  --color-midnight-masquerade-400: #94a0c1;
  --color-midnight-masquerade-500: #7984a5;
  --color-midnight-masquerade-600: #5f6989;
  --color-midnight-masquerade-700: #49536f;
  --color-midnight-masquerade-800: #373f58;
  --color-midnight-masquerade-900: #262f4b;
  --color-midnight-masquerade-950: #181d2b;
  --color-turtle: #50432e;
  --color-turtle-50: #fdf4e6;
  --color-turtle-100: #f4eada;
  --color-turtle-200: #e1d6c4;
  --color-turtle-300: #cdc0ab;
  --color-turtle-400: #afa08a;
  --color-turtle-500: #94866f;
  --color-turtle-600: #796c56;
  --color-turtle-700: #625642;
  --color-turtle-800: #50432e;
  --color-turtle-900: #3d3424;
  --color-turtle-950: #272015;
  --color-misty-harbour: #5f7499;
  --color-misty-harbour-50: #f0f5ff;
  --color-misty-harbour-100: #e3edff;
  --color-misty-harbour-200: #cadbf9;
  --color-misty-harbour-300: #b3c6e8;
  --color-misty-harbour-400: #92a8cd;
  --color-misty-harbour-500: #788eb4;
  --color-misty-harbour-600: #5f7499;
  --color-misty-harbour-700: #495c7d;
  --color-misty-harbour-800: #374765;
  --color-misty-harbour-900: #28364f;
  --color-misty-harbour-950: #172133;
  --color-veranda-gold: #b2925d;
  --color-veranda-gold-50: #ffefd7;
  --color-veranda-gold-100: #f9e3bf;
  --color-veranda-gold-200: #e7cca3;
  --color-veranda-gold-300: #d1b484;
  --color-veranda-gold-400: #b2925d;
  --color-veranda-gold-500: #987944;
  --color-veranda-gold-600: #7d602d;
  --color-veranda-gold-700: #664c1c;
  --color-veranda-gold-800: #523b10;
  --color-veranda-gold-900: #412d08;
  --color-veranda-gold-950: #2b1c03;
  --color-sunspill: #dcc37f;
  --color-sunspill-50: #fff7e1;
  --color-sunspill-100: #fcedc5;
  --color-sunspill-200: #ecdaaa;
  --color-sunspill-300: #dcc37f;
  --color-sunspill-400: #baa363;
  --color-sunspill-500: #9e8643;
  --color-sunspill-600: #826b27;
  --color-sunspill-700: #695412;
  --color-sunspill-800: #534002;
  --color-sunspill-900: #403100;
  --color-sunspill-950: #281e00;
  --color-veiling-waterfalls: #d0e5ff;
  --color-veiling-waterfalls-50: #e3efff;
  --color-veiling-waterfalls-100: #d0e5ff;
  --color-veiling-waterfalls-200: #c2d2e6;
  --color-veiling-waterfalls-300: #acbdd3;
  --color-veiling-waterfalls-400: #8c9fb7;
  --color-veiling-waterfalls-500: #72859d;
  --color-veiling-waterfalls-600: #5a6c82;
  --color-veiling-waterfalls-700: #46576b;
  --color-veiling-waterfalls-800: #354455;
  --color-veiling-waterfalls-900: #283443;
  --color-veiling-waterfalls-950: #17202b;
}

Similar palettes