Haunted Candelabra to Bubblegum Crisis Color Palette

About this palette

Haunted Candelabra to Bubblegum Crisis is a 5-color cool palette: #574169 (Haunted Candelabra), #006B6B (Aqua Obscura), #009997 (Java), #D28F43 (Cognac), #E1D2FC (Bubblegum Crisis). It mixes purple, turquoise, orange tones and feels cool overall. The strongest text pairing is #574169 on #E1D2FC with a contrast ratio of 6.27:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Haunted Candelabra	rgb(87, 65, 105)	hsl(273, 24%, 33%)
Aqua Obscura	rgb(0, 107, 107)	hsl(180, 100%, 21%)
Java	rgb(0, 153, 151)	hsl(179, 100%, 30%)
Cognac	rgb(210, 143, 67)	hsl(32, 61%, 54%)
Bubblegum Crisis	rgb(225, 210, 252)	hsl(261, 88%, 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.

Aa6.27:1 Good#574169 on #E1D2FC
Aa6.27:1 Good#E1D2FC on #574169
Aa4.47:1 Poor#006B6B on #E1D2FC
Aa4.47:1 Poor#E1D2FC on #006B6B
Aa3.28:1 Poor#574169 on #D28F43
Aa3.28:1 Poor#D28F43 on #574169

Color blindness preview

CSS variables

/* Haunted Candelabra to Bubblegum Crisis — https://swatchly.xyz/palette/574169-006b6b-009997-d28f43-e1d2fc */
:root {
  --haunted-candelabra: #574169;
  --aqua-obscura: #006b6b;
  --java: #009997;
  --cognac: #d28f43;
  --bubblegum-crisis: #e1d2fc;
}

Tailwind CSS v4

/* Haunted Candelabra to Bubblegum Crisis — https://swatchly.xyz/palette/574169-006b6b-009997-d28f43-e1d2fc */
@theme {
  --color-haunted-candelabra: #574169;
  --color-haunted-candelabra-50: #f9f2ff;
  --color-haunted-candelabra-100: #f2e5ff;
  --color-haunted-candelabra-200: #e0cdf1;
  --color-haunted-candelabra-300: #c9b3dc;
  --color-haunted-candelabra-400: #a891bd;
  --color-haunted-candelabra-500: #8c74a0;
  --color-haunted-candelabra-600: #6f5981;
  --color-haunted-candelabra-700: #574169;
  --color-haunted-candelabra-800: #433351;
  --color-haunted-candelabra-900: #342640;
  --color-haunted-candelabra-950: #201628;
  --color-aqua-obscura: #006b6b;
  --color-aqua-obscura-50: #d4fffe;
  --color-aqua-obscura-100: #c5f6f5;
  --color-aqua-obscura-200: #abe6e5;
  --color-aqua-obscura-300: #8ed2d1;
  --color-aqua-obscura-400: #67b5b5;
  --color-aqua-obscura-500: #479b9b;
  --color-aqua-obscura-600: #2a8181;
  --color-aqua-obscura-700: #006b6b;
  --color-aqua-obscura-800: #005454;
  --color-aqua-obscura-900: #004141;
  --color-aqua-obscura-950: #002929;
  --color-java: #009997;
  --color-java-50: #d4fffd;
  --color-java-100: #b8faf7;
  --color-java-200: #98e8e5;
  --color-java-300: #74d3d0;
  --color-java-400: #42b5b2;
  --color-java-500: #009997;
  --color-java-600: #007b7a;
  --color-java-700: #006261;
  --color-java-800: #004d4c;
  --color-java-900: #003b3a;
  --color-java-950: #002525;
  --color-cognac: #d28f43;
  --color-cognac-50: #fff2e5;
  --color-cognac-100: #ffe5cb;
  --color-cognac-200: #ffcb96;
  --color-cognac-300: #edb273;
  --color-cognac-400: #d28f43;
  --color-cognac-500: #b57423;
  --color-cognac-600: #965b00;
  --color-cognac-700: #784700;
  --color-cognac-800: #5f3700;
  --color-cognac-900: #4a2a00;
  --color-cognac-950: #301900;
  --color-bubblegum-crisis: #e1d2fc;
  --color-bubblegum-crisis-50: #f9f5ff;
  --color-bubblegum-crisis-100: #f1e9ff;
  --color-bubblegum-crisis-200: #e1d2fc;
  --color-bubblegum-crisis-300: #c9bcdf;
  --color-bubblegum-crisis-400: #a99cc2;
  --color-bubblegum-crisis-500: #8e80a6;
  --color-bubblegum-crisis-600: #726589;
  --color-bubblegum-crisis-700: #5b4f6f;
  --color-bubblegum-crisis-800: #473c59;
  --color-bubblegum-crisis-900: #372d46;
  --color-bubblegum-crisis-950: #221b2d;
}