Midnight Escapade to Blossom color palette

2A3450Midnight Escapade 7B4E1BMilk Chocolate 4B9EA6Atlas Cedar 9AC7D7Airborne FFE7D9Blossom

About this palette

Midnight Escapade to Blossom is a 5-color cool palette: #2A3450 (Midnight Escapade), #7B4E1B (Milk Chocolate), #4B9EA6 (Atlas Cedar), #9AC7D7 (Airborne), #FFE7D9 (Blossom). It mixes blue, brown, turquoise, white tones and feels cool overall. The strongest text pairing is #2A3450 on #FFE7D9 with a contrast ratio of 10.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Escapade	rgb(42, 52, 80)	hsl(224, 31%, 24%)
Milk Chocolate	rgb(123, 78, 27)	hsl(32, 64%, 29%)
Atlas Cedar	rgb(75, 158, 166)	hsl(185, 38%, 47%)
Airborne	rgb(154, 199, 215)	hsl(196, 43%, 72%)
Blossom	rgb(255, 231, 217)	hsl(22, 100%, 93%)

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.37:1 Very good#2A3450 on #FFE7D9
Aa10.37:1 Very good#FFE7D9 on #2A3450
Aa6.76:1 Good#2A3450 on #9AC7D7
Aa6.76:1 Good#9AC7D7 on #2A3450
Aa6.00:1 Good#7B4E1B on #FFE7D9
Aa6.00:1 Good#FFE7D9 on #7B4E1B
Aa3.95:1 Poor#2A3450 on #4B9EA6
Aa3.95:1 Poor#4B9EA6 on #2A3450

Color blindness preview

CSS variables

/* Midnight Escapade to Blossom — https://swatchly.xyz/palette/2a3450-7b4e1b-4b9ea6-9ac7d7-ffe7d9 */
:root {
  --midnight-escapade: #2a3450;
  --milk-chocolate: #7b4e1b;
  --atlas-cedar: #4b9ea6;
  --airborne: #9ac7d7;
  --blossom: #ffe7d9;
}

Tailwind CSS v4

/* Midnight Escapade to Blossom — https://swatchly.xyz/palette/2a3450-7b4e1b-4b9ea6-9ac7d7-ffe7d9 */
@theme {
  --color-midnight-escapade: #2a3450;
  --color-midnight-escapade-50: #f1f5ff;
  --color-midnight-escapade-100: #e3ebff;
  --color-midnight-escapade-200: #cdd7f2;
  --color-midnight-escapade-300: #b5c0de;
  --color-midnight-escapade-400: #95a1c2;
  --color-midnight-escapade-500: #7a86a7;
  --color-midnight-escapade-600: #616c8b;
  --color-midnight-escapade-700: #4c5672;
  --color-midnight-escapade-800: #3a445c;
  --color-midnight-escapade-900: #2a3450;
  --color-midnight-escapade-950: #1b2130;
  --color-milk-chocolate: #7b4e1b;
  --color-milk-chocolate-50: #fff3e7;
  --color-milk-chocolate-100: #ffe6cf;
  --color-milk-chocolate-200: #f7d0ac;
  --color-milk-chocolate-300: #e5b98f;
  --color-milk-chocolate-400: #c9996a;
  --color-milk-chocolate-500: #ae7e4d;
  --color-milk-chocolate-600: #926434;
  --color-milk-chocolate-700: #7b4e1b;
  --color-milk-chocolate-800: #613c12;
  --color-milk-chocolate-900: #4d2d08;
  --color-milk-chocolate-950: #321b02;
  --color-atlas-cedar: #4b9ea6;
  --color-atlas-cedar-50: #e3fdff;
  --color-atlas-cedar-100: #caf9fd;
  --color-atlas-cedar-200: #b0e8ee;
  --color-atlas-cedar-300: #93d5db;
  --color-atlas-cedar-400: #6cb8bf;
  --color-atlas-cedar-500: #4b9ea6;
  --color-atlas-cedar-600: #2b8189;
  --color-atlas-cedar-700: #0e676f;
  --color-atlas-cedar-800: #005157;
  --color-atlas-cedar-900: #003e43;
  --color-atlas-cedar-950: #00262a;
  --color-airborne: #9ac7d7;
  --color-airborne-50: #e4f8ff;
  --color-airborne-100: #d3effa;
  --color-airborne-200: #badce8;
  --color-airborne-300: #9ac7d7;
  --color-airborne-400: #7da7b6;
  --color-airborne-500: #618c9b;
  --color-airborne-600: #487280;
  --color-airborne-700: #355b68;
  --color-airborne-800: #264753;
  --color-airborne-900: #1a3741;
  --color-airborne-950: #0d2229;
  --color-blossom: #ffe7d9;
  --color-blossom-50: #fff4ed;
  --color-blossom-100: #ffe7d9;
  --color-blossom-200: #e6d5ca;
  --color-blossom-300: #d1bdb2;
  --color-blossom-400: #b39d91;
  --color-blossom-500: #978275;
  --color-blossom-600: #7b675b;
  --color-blossom-700: #635146;
  --color-blossom-800: #4e3f35;
  --color-blossom-900: #3d3028;
  --color-blossom-950: #271d17;
}