Digital Lavender to Purple Haze color palette

C0C1E8Digital Lavender 142A49Midnight Ocean 635170Your Majesty 85A4C6High Tide 80739APurple Haze

About this palette

Digital Lavender to Purple Haze is a 5-color muted, cool palette: #C0C1E8 (Digital Lavender), #142A49 (Midnight Ocean), #635170 (Your Majesty), #85A4C6 (High Tide), #80739A (Purple Haze). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #C0C1E8 on #142A49 with a contrast ratio of 8.26:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Digital Lavender	rgb(192, 193, 232)	hsl(238, 47%, 83%)
Midnight Ocean	rgb(20, 42, 73)	hsl(215, 57%, 18%)
Your Majesty	rgb(99, 81, 112)	hsl(275, 16%, 38%)
High Tide	rgb(133, 164, 198)	hsl(211, 36%, 65%)
Purple Haze	rgb(128, 115, 154)	hsl(260, 16%, 53%)

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.26:1 Very good#C0C1E8 on #142A49
Aa8.26:1 Very good#142A49 on #C0C1E8
Aa5.57:1 Good#142A49 on #85A4C6
Aa5.57:1 Good#85A4C6 on #142A49
Aa4.09:1 Poor#C0C1E8 on #635170
Aa4.09:1 Poor#635170 on #C0C1E8
Aa3.32:1 Poor#142A49 on #80739A
Aa3.32:1 Poor#80739A on #142A49

Color blindness preview

CSS variables

/* Digital Lavender to Purple Haze — https://swatchly.xyz/palette/c0c1e8-142a49-635170-85a4c6-80739a */
:root {
  --digital-lavender: #c0c1e8;
  --midnight-ocean: #142a49;
  --your-majesty: #635170;
  --high-tide: #85a4c6;
  --purple-haze: #80739a;
}

Tailwind CSS v4

/* Digital Lavender to Purple Haze — https://swatchly.xyz/palette/c0c1e8-142a49-635170-85a4c6-80739a */
@theme {
  --color-digital-lavender: #c0c1e8;
  --color-digital-lavender-50: #f6f6ff;
  --color-digital-lavender-100: #ebecff;
  --color-digital-lavender-200: #d7d8f5;
  --color-digital-lavender-300: #c0c1e8;
  --color-digital-lavender-400: #a0a1c5;
  --color-digital-lavender-500: #8485a9;
  --color-digital-lavender-600: #696a8c;
  --color-digital-lavender-700: #535372;
  --color-digital-lavender-800: #40405b;
  --color-digital-lavender-900: #303047;
  --color-digital-lavender-950: #1d1d2e;
  --color-midnight-ocean: #142a49;
  --color-midnight-ocean-50: #eff6ff;
  --color-midnight-ocean-100: #dfecff;
  --color-midnight-ocean-200: #c4d9f7;
  --color-midnight-ocean-300: #abc3e5;
  --color-midnight-ocean-400: #88a1c6;
  --color-midnight-ocean-500: #6a84a9;
  --color-midnight-ocean-600: #50688a;
  --color-midnight-ocean-700: #3a506e;
  --color-midnight-ocean-800: #293b55;
  --color-midnight-ocean-900: #142a49;
  --color-midnight-ocean-950: #0f1927;
  --color-your-majesty: #635170;
  --color-your-majesty-50: #f9f2ff;
  --color-your-majesty-100: #f2e5fc;
  --color-your-majesty-200: #e1d1ec;
  --color-your-majesty-300: #ccbbd9;
  --color-your-majesty-400: #ae9bbc;
  --color-your-majesty-500: #9380a2;
  --color-your-majesty-600: #796787;
  --color-your-majesty-700: #635170;
  --color-your-majesty-800: #4e3f58;
  --color-your-majesty-900: #3c2f45;
  --color-your-majesty-950: #261d2c;
  --color-high-tide: #85a4c6;
  --color-high-tide-50: #eef6ff;
  --color-high-tide-100: #dcedff;
  --color-high-tide-200: #c2daf4;
  --color-high-tide-300: #a8c3e1;
  --color-high-tide-400: #85a4c6;
  --color-high-tide-500: #6a89a9;
  --color-high-tide-600: #516e8d;
  --color-high-tide-700: #3d5773;
  --color-high-tide-800: #2d445d;
  --color-high-tide-900: #213449;
  --color-high-tide-950: #12202f;
  --color-purple-haze: #80739a;
  --color-purple-haze-50: #f5f0ff;
  --color-purple-haze-100: #eae2fe;
  --color-purple-haze-200: #d5cbec;
  --color-purple-haze-300: #beb2d7;
  --color-purple-haze-400: #9d90b8;
  --color-purple-haze-500: #80739a;
  --color-purple-haze-600: #685b80;
  --color-purple-haze-700: #534868;
  --color-purple-haze-800: #413754;
  --color-purple-haze-900: #332b42;
  --color-purple-haze-950: #201a2b;
}