Stormy Night to Coral Kiss Color Palette

About this palette

Stormy Night to Coral Kiss is a 5-color cool, vintage palette: #3D2752 (Stormy Night), #007E76 (Wizards Orb), #C47700 (Caramel Coating), #BEA5F9 (Diva), #FFDFC8 (Coral Kiss). It mixes purple, turquoise, orange tones and feels cool overall. The strongest text pairing is #3D2752 on #FFDFC8 with a contrast ratio of 10.33:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Stormy Night	rgb(61, 39, 82)	hsl(271, 36%, 24%)
Wizards Orb	rgb(0, 126, 118)	hsl(176, 100%, 25%)
Caramel Coating	rgb(196, 119, 0)	hsl(36, 100%, 38%)
Diva	rgb(190, 165, 249)	hsl(258, 87%, 81%)
Coral Kiss	rgb(255, 223, 200)	hsl(25, 100%, 89%)

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.33:1 Very good#3D2752 on #FFDFC8
Aa10.33:1 Very good#FFDFC8 on #3D2752
Aa6.17:1 Good#3D2752 on #BEA5F9
Aa6.17:1 Good#BEA5F9 on #3D2752
Aa3.92:1 Poor#007E76 on #FFDFC8
Aa3.92:1 Poor#FFDFC8 on #007E76
Aa3.72:1 Poor#3D2752 on #C47700
Aa3.72:1 Poor#C47700 on #3D2752

Color blindness preview

CSS variables

/* Stormy Night to Coral Kiss — https://swatchly.xyz/palette/3d2752-007e76-c47700-bea5f9-ffdfc8 */
:root {
  --stormy-night: #3d2752;
  --wizards-orb: #007e76;
  --caramel-coating: #c47700;
  --diva: #bea5f9;
  --coral-kiss: #ffdfc8;
}

Tailwind CSS v4

/* Stormy Night to Coral Kiss — https://swatchly.xyz/palette/3d2752-007e76-c47700-bea5f9-ffdfc8 */
@theme {
  --color-stormy-night: #3d2752;
  --color-stormy-night-50: #f8f2ff;
  --color-stormy-night-100: #f1e5ff;
  --color-stormy-night-200: #e1cef6;
  --color-stormy-night-300: #cbb6e4;
  --color-stormy-night-400: #ad96c7;
  --color-stormy-night-500: #927aac;
  --color-stormy-night-600: #77608f;
  --color-stormy-night-700: #5f4b75;
  --color-stormy-night-800: #4b395e;
  --color-stormy-night-900: #3d2752;
  --color-stormy-night-950: #251930;
  --color-wizards-orb: #007e76;
  --color-wizards-orb-50: #d6fffa;
  --color-wizards-orb-100: #c0f9f2;
  --color-wizards-orb-200: #a3e7df;
  --color-wizards-orb-300: #83d3ca;
  --color-wizards-orb-400: #58b5ac;
  --color-wizards-orb-500: #339991;
  --color-wizards-orb-600: #007e76;
  --color-wizards-orb-700: #00645e;
  --color-wizards-orb-800: #004e49;
  --color-wizards-orb-900: #003c38;
  --color-wizards-orb-950: #002623;
  --color-caramel-coating: #c47700;
  --color-caramel-coating-50: #fff4ea;
  --color-caramel-coating-100: #ffe9d4;
  --color-caramel-coating-200: #ffd1a3;
  --color-caramel-coating-300: #f9b56d;
  --color-caramel-coating-400: #de933d;
  --color-caramel-coating-500: #c47700;
  --color-caramel-coating-600: #9e5f00;
  --color-caramel-coating-700: #7e4b00;
  --color-caramel-coating-800: #633a00;
  --color-caramel-coating-900: #4d2b00;
  --color-caramel-coating-950: #311a00;
  --color-diva: #bea5f9;
  --color-diva-50: #f1ecff;
  --color-diva-100: #e6deff;
  --color-diva-200: #d3c3ff;
  --color-diva-300: #bea5f9;
  --color-diva-400: #a088d8;
  --color-diva-500: #876ebe;
  --color-diva-600: #6f56a1;
  --color-diva-700: #594386;
  --color-diva-800: #47336e;
  --color-diva-900: #38275a;
  --color-diva-950: #23163b;
  --color-coral-kiss: #ffdfc8;
  --color-coral-kiss-50: #ffede0;
  --color-coral-kiss-100: #ffdfc8;
  --color-coral-kiss-200: #e6cebd;
  --color-coral-kiss-300: #d2b8a4;
  --color-coral-kiss-400: #b59984;
  --color-coral-kiss-500: #9b7e69;
  --color-coral-kiss-600: #806551;
  --color-coral-kiss-700: #684f3d;
  --color-coral-kiss-800: #533d2d;
  --color-coral-kiss-900: #402e21;
  --color-coral-kiss-950: #291c12;
}