Pale Whale to Midnight Velvet Color Palette

About this palette

Pale Whale to Midnight Velvet is a 5-color cool, vintage palette: #AED4E2 (Pale Whale), #499FC0 (Laguna), #836540 (Autumn Gold), #836F42 (Mossy), #2B233B (Midnight Velvet). It mixes blue, brown, yellow, purple tones and feels cool overall. The strongest text pairing is #AED4E2 on #2B233B with a contrast ratio of 9.47:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pale Whale	rgb(174, 212, 226)	hsl(196, 47%, 78%)
Laguna	rgb(73, 159, 192)	hsl(197, 49%, 52%)
Autumn Gold	rgb(131, 101, 64)	hsl(33, 34%, 38%)
Mossy	rgb(131, 111, 66)	hsl(42, 33%, 39%)
Midnight Velvet	rgb(43, 35, 59)	hsl(260, 26%, 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.47:1 Very good#AED4E2 on #2B233B
Aa9.47:1 Very good#2B233B on #AED4E2
Aa4.98:1 Good#499FC0 on #2B233B
Aa4.98:1 Good#2B233B on #499FC0
Aa3.41:1 Poor#AED4E2 on #836540
Aa3.41:1 Poor#836540 on #AED4E2
Aa3.08:1 Poor#AED4E2 on #836F42
Aa3.08:1 Poor#836F42 on #AED4E2

Color blindness preview

CSS variables

/* Pale Whale to Midnight Velvet — https://swatchly.xyz/palette/aed4e2-499fc0-836540-836f42-2b233b */
:root {
  --pale-whale: #aed4e2;
  --laguna: #499fc0;
  --autumn-gold: #836540;
  --mossy: #836f42;
  --midnight-velvet: #2b233b;
}

Tailwind CSS v4

/* Pale Whale to Midnight Velvet — https://swatchly.xyz/palette/aed4e2-499fc0-836540-836f42-2b233b */
@theme {
  --color-pale-whale: #aed4e2;
  --color-pale-whale-50: #dbf2fb;
  --color-pale-whale-100: #cde7f1;
  --color-pale-whale-200: #aed4e2;
  --color-pale-whale-300: #9dbecb;
  --color-pale-whale-400: #7ea1ae;
  --color-pale-whale-500: #648895;
  --color-pale-whale-600: #4c6f7b;
  --color-pale-whale-700: #3a5964;
  --color-pale-whale-800: #2b4751;
  --color-pale-whale-900: #1f373f;
  --color-pale-whale-950: #112228;
  --color-laguna: #499fc0;
  --color-laguna-50: #eefaff;
  --color-laguna-100: #ddf4ff;
  --color-laguna-200: #b2e8ff;
  --color-laguna-300: #93d5f1;
  --color-laguna-400: #6bb8d8;
  --color-laguna-500: #499fc0;
  --color-laguna-600: #2781a1;
  --color-laguna-700: #036784;
  --color-laguna-800: #005068;
  --color-laguna-900: #003d50;
  --color-laguna-950: #002532;
  --color-autumn-gold: #836540;
  --color-autumn-gold-50: #fff3e5;
  --color-autumn-gold-100: #fde7ce;
  --color-autumn-gold-200: #ecd3b5;
  --color-autumn-gold-300: #d8bb9a;
  --color-autumn-gold-400: #ba9b76;
  --color-autumn-gold-500: #9f7f5a;
  --color-autumn-gold-600: #836540;
  --color-autumn-gold-700: #6a4f2e;
  --color-autumn-gold-800: #543d20;
  --color-autumn-gold-900: #422e15;
  --color-autumn-gold-950: #2a1c0a;
  --color-mossy: #836f42;
  --color-mossy-50: #fff4dd;
  --color-mossy-100: #f9ebce;
  --color-mossy-200: #e8d8b5;
  --color-mossy-300: #d4c29b;
  --color-mossy-400: #b7a377;
  --color-mossy-500: #9d895b;
  --color-mossy-600: #836f42;
  --color-mossy-700: #6a572e;
  --color-mossy-800: #54441f;
  --color-mossy-900: #413313;
  --color-mossy-950: #291f08;
  --color-midnight-velvet: #2b233b;
  --color-midnight-velvet-50: #f6f3ff;
  --color-midnight-velvet-100: #ede8fc;
  --color-midnight-velvet-200: #dad3eb;
  --color-midnight-velvet-300: #c4bcd7;
  --color-midnight-velvet-400: #a59cb9;
  --color-midnight-velvet-500: #8b82a0;
  --color-midnight-velvet-600: #726a86;
  --color-midnight-velvet-700: #5d556f;
  --color-midnight-velvet-800: #4c445b;
  --color-midnight-velvet-900: #3d374b;
  --color-midnight-velvet-950: #2b233b;
}