Occult to Pink Swirl Color Palette

About this palette

Occult to Pink Swirl is a 5-color cool palette: #511595 (Occult), #737D00 (Olive), #A66AFD (Orion Nebula), #00D1E4 (Sea Serpent), #FFE7E4 (Pink Swirl). It mixes purple, green, turquoise, white tones and feels cool overall. The strongest text pairing is #511595 on #FFE7E4 with a contrast ratio of 9.41:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Occult	rgb(81, 21, 149)	hsl(268, 75%, 33%)
Olive	rgb(115, 125, 0)	hsl(65, 100%, 25%)
Orion Nebula	rgb(166, 106, 253)	hsl(264, 97%, 70%)
Sea Serpent	rgb(0, 209, 228)	hsl(185, 100%, 45%)
Pink Swirl	rgb(255, 231, 228)	hsl(7, 100%, 95%)

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.41:1 Very good#511595 on #FFE7E4
Aa9.41:1 Very good#FFE7E4 on #511595
Aa5.94:1 Good#511595 on #00D1E4
Aa5.94:1 Good#00D1E4 on #511595
Aa3.82:1 Poor#737D00 on #FFE7E4
Aa3.82:1 Poor#FFE7E4 on #737D00
Aa3.23:1 Poor#511595 on #A66AFD
Aa3.23:1 Poor#A66AFD on #511595

Color blindness preview

CSS variables

/* Occult to Pink Swirl — https://swatchly.xyz/palette/511595-737d00-a66afd-00d1e4-ffe7e4 */
:root {
  --occult: #511595;
  --olive: #737d00;
  --orion-nebula: #a66afd;
  --sea-serpent: #00d1e4;
  --pink-swirl: #ffe7e4;
}

Tailwind CSS v4

/* Occult to Pink Swirl — https://swatchly.xyz/palette/511595-737d00-a66afd-00d1e4-ffe7e4 */
@theme {
  --color-occult: #511595;
  --color-occult-50: #f6f3ff;
  --color-occult-100: #ede7ff;
  --color-occult-200: #dccfff;
  --color-occult-300: #c8b2ff;
  --color-occult-400: #af86ff;
  --color-occult-500: #9467e5;
  --color-occult-600: #7a4bc5;
  --color-occult-700: #6235a6;
  --color-occult-800: #511595;
  --color-occult-900: #3d186d;
  --color-occult-950: #260c49;
  --color-olive: #737d00;
  --color-olive-50: #f3fcc6;
  --color-olive-100: #eaf4b9;
  --color-olive-200: #d8e39c;
  --color-olive-300: #c3cf7d;
  --color-olive-400: #a5b152;
  --color-olive-500: #8c972f;
  --color-olive-600: #737d00;
  --color-olive-700: #5b6300;
  --color-olive-800: #474d00;
  --color-olive-900: #363b00;
  --color-olive-950: #212500;
  --color-orion-nebula: #a66afd;
  --color-orion-nebula-50: #f8f5ff;
  --color-orion-nebula-100: #f1ecff;
  --color-orion-nebula-200: #e2d6ff;
  --color-orion-nebula-300: #d1bbff;
  --color-orion-nebula-400: #ba92ff;
  --color-orion-nebula-500: #a66afd;
  --color-orion-nebula-600: #894bdb;
  --color-orion-nebula-700: #6f31b9;
  --color-orion-nebula-800: #581e99;
  --color-orion-nebula-900: #45107a;
  --color-orion-nebula-950: #2b0451;
  --color-sea-serpent: #00d1e4;
  --color-sea-serpent-50: #d2faff;
  --color-sea-serpent-100: #a9f5ff;
  --color-sea-serpent-200: #74e5f3;
  --color-sea-serpent-300: #00d1e4;
  --color-sea-serpent-400: #00afc0;
  --color-sea-serpent-500: #0092a0;
  --color-sea-serpent-600: #007682;
  --color-sea-serpent-700: #005f68;
  --color-sea-serpent-800: #004b52;
  --color-sea-serpent-900: #003b41;
  --color-sea-serpent-950: #002529;
  --color-pink-swirl: #ffe7e4;
  --color-pink-swirl-50: #fff4f3;
  --color-pink-swirl-100: #ffe7e4;
  --color-pink-swirl-200: #e6d5d2;
  --color-pink-swirl-300: #d1bdbb;
  --color-pink-swirl-400: #b29d9a;
  --color-pink-swirl-500: #96817e;
  --color-pink-swirl-600: #7b6764;
  --color-pink-swirl-700: #62504e;
  --color-pink-swirl-800: #4e3e3c;
  --color-pink-swirl-900: #3c2f2e;
  --color-pink-swirl-950: #261d1b;
}