Midnight Velvet to Halo color palette

2B2743Midnight Velvet 553D1BPineapple 4A6B4FToad King 6F8C61Kashmir A2A5E2Cold Lips D9C292Halo

About this palette

Midnight Velvet to Halo is a 6-color cool, earthy palette: #2B2743 (Midnight Velvet), #553D1B (Pineapple), #4A6B4F (Toad King), #6F8C61 (Kashmir), #A2A5E2 (Cold Lips), #D9C292 (Halo). It mixes purple, brown, green, yellow tones and feels cool overall. The strongest text pairing is #2B2743 on #D9C292 with a contrast ratio of 8.20:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Velvet	rgb(43, 39, 67)	hsl(249, 26%, 21%)
Pineapple	rgb(85, 61, 27)	hsl(35, 52%, 22%)
Toad King	rgb(74, 107, 79)	hsl(129, 18%, 35%)
Kashmir	rgb(111, 140, 97)	hsl(100, 18%, 46%)
Cold Lips	rgb(162, 165, 226)	hsl(237, 52%, 76%)
Halo	rgb(217, 194, 146)	hsl(41, 48%, 71%)

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.

Aa8.20:1 Very good#2B2743 on #D9C292
Aa8.20:1 Very good#D9C292 on #2B2743
Aa6.12:1 Good#2B2743 on #A2A5E2
Aa6.12:1 Good#A2A5E2 on #2B2743
Aa5.84:1 Good#553D1B on #D9C292
Aa5.84:1 Good#D9C292 on #553D1B
Aa4.36:1 Poor#553D1B on #A2A5E2
Aa4.36:1 Poor#A2A5E2 on #553D1B

Color blindness preview

CSS variables

/* Midnight Velvet to Halo — https://swatchly.xyz/palette/2b2743-553d1b-4a6b4f-6f8c61-a2a5e2-d9c292 */
:root {
  --midnight-velvet: #2b2743;
  --pineapple: #553d1b;
  --toad-king: #4a6b4f;
  --kashmir: #6f8c61;
  --cold-lips: #a2a5e2;
  --halo: #d9c292;
}

Tailwind CSS v4

/* Midnight Velvet to Halo — https://swatchly.xyz/palette/2b2743-553d1b-4a6b4f-6f8c61-a2a5e2-d9c292 */
@theme {
  --color-midnight-velvet: #2b2743;
  --color-midnight-velvet-50: #f4f4ff;
  --color-midnight-velvet-100: #eae8ff;
  --color-midnight-velvet-200: #d6d4ef;
  --color-midnight-velvet-300: #c0bddc;
  --color-midnight-velvet-400: #9f9bbd;
  --color-midnight-velvet-500: #827fa0;
  --color-midnight-velvet-600: #676383;
  --color-midnight-velvet-700: #4f4c68;
  --color-midnight-velvet-800: #3b3950;
  --color-midnight-velvet-900: #2b2743;
  --color-midnight-velvet-950: #191825;
  --color-pineapple: #553d1b;
  --color-pineapple-50: #fff3e4;
  --color-pineapple-100: #fae8d1;
  --color-pineapple-200: #e9d4b8;
  --color-pineapple-300: #d5bd9d;
  --color-pineapple-400: #b79d7a;
  --color-pineapple-500: #9c815e;
  --color-pineapple-600: #806745;
  --color-pineapple-700: #685032;
  --color-pineapple-800: #553d1b;
  --color-pineapple-900: #402f18;
  --color-pineapple-950: #291d0c;
  --color-toad-king: #4a6b4f;
  --color-toad-king-50: #e7fce9;
  --color-toad-king-100: #d9f1dc;
  --color-toad-king-200: #c0dcc4;
  --color-toad-king-300: #a5c5a9;
  --color-toad-king-400: #82a487;
  --color-toad-king-500: #65876a;
  --color-toad-king-600: #4a6b4f;
  --color-toad-king-700: #39553d;
  --color-toad-king-800: #2a432e;
  --color-toad-king-900: #1f3423;
  --color-toad-king-950: #122114;
  --color-kashmir: #6f8c61;
  --color-kashmir-50: #e9fbe1;
  --color-kashmir-100: #ddf1d3;
  --color-kashmir-200: #c6debb;
  --color-kashmir-300: #adc8a0;
  --color-kashmir-400: #8ba87d;
  --color-kashmir-500: #6f8c61;
  --color-kashmir-600: #567249;
  --color-kashmir-700: #425b36;
  --color-kashmir-800: #324827;
  --color-kashmir-900: #25381c;
  --color-kashmir-950: #16230f;
  --color-cold-lips: #a2a5e2;
  --color-cold-lips-50: #f7f8ff;
  --color-cold-lips-100: #eeefff;
  --color-cold-lips-200: #d8dbff;
  --color-cold-lips-300: #c1c4f8;
  --color-cold-lips-400: #a2a5e2;
  --color-cold-lips-500: #8588c2;
  --color-cold-lips-600: #6a6ba4;
  --color-cold-lips-700: #525387;
  --color-cold-lips-800: #3f3f6c;
  --color-cold-lips-900: #2f2f55;
  --color-cold-lips-950: #1c1c36;
  --color-halo: #d9c292;
  --color-halo-50: #fff6e4;
  --color-halo-100: #faeccf;
  --color-halo-200: #ead9b6;
  --color-halo-300: #d9c292;
  --color-halo-400: #b7a275;
  --color-halo-500: #9b8658;
  --color-halo-600: #7f6b3e;
  --color-halo-700: #66542a;
  --color-halo-800: #51401c;
  --color-halo-900: #3f3111;
  --color-halo-950: #281e07;
}