Viola to Cloud Break color palette

9675B8Viola C19EE7Somewhere in a Fairytale 621F9EWild Violet 331452Fabric of Space F9F0FFCloud Break

Open in generator Export PNG, PDF, ASE…

About this palette

Viola to Cloud Break is a 5-color cool, monochromatic palette: #9675B8 (Viola), #C19EE7 (Somewhere in a Fairytale), #621F9E (Wild Violet), #331452 (Fabric of Space), #F9F0FF (Cloud Break). It mixes purple, white tones and feels cool overall. The strongest text pairing is #331452 on #F9F0FF with a contrast ratio of 13.90:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Viola	rgb(150, 117, 184)	hsl(270, 32%, 59%)
Somewhere in a Fairytale	rgb(193, 158, 231)	hsl(269, 60%, 76%)
Wild Violet	rgb(98, 31, 158)	hsl(272, 67%, 37%)
Fabric of Space	rgb(51, 20, 82)	hsl(270, 61%, 20%)
Cloud Break	rgb(249, 240, 255)	hsl(276, 100%, 97%)

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.

Aa13.90:1 Super#331452 on #F9F0FF
Aa13.90:1 Super#F9F0FF on #331452
Aa8.57:1 Very good#621F9E on #F9F0FF
Aa8.57:1 Very good#F9F0FF on #621F9E
Aa6.83:1 Good#C19EE7 on #331452
Aa6.83:1 Good#331452 on #C19EE7
Aa4.22:1 Poor#C19EE7 on #621F9E
Aa4.22:1 Poor#621F9E on #C19EE7

Color blindness preview

CSS variables

/* Viola to Cloud Break — https://swatchly.xyz/palette/9675b8-c19ee7-621f9e-331452-f9f0ff */
:root {
  --viola: #9675b8;
  --somewhere-in-a-fairytale: #c19ee7;
  --wild-violet: #621f9e;
  --fabric-of-space: #331452;
  --cloud-break: #f9f0ff;
}

Tailwind CSS v4

/* Viola to Cloud Break — https://swatchly.xyz/palette/9675b8-c19ee7-621f9e-331452-f9f0ff */
@theme {
  --color-viola: #9675b8;
  --color-viola-50: #f8f2ff;
  --color-viola-100: #f1e5ff;
  --color-viola-200: #e4cbff;
  --color-viola-300: #cfb2ef;
  --color-viola-400: #b191d3;
  --color-viola-500: #9675b8;
  --color-viola-600: #7b5b9b;
  --color-viola-700: #63467f;
  --color-viola-800: #4e3467;
  --color-viola-900: #3d2752;
  --color-viola-950: #261735;
  --color-somewhere-in-a-fairytale: #c19ee7;
  --color-somewhere-in-a-fairytale-50: #fcf9ff;
  --color-somewhere-in-a-fairytale-100: #f6efff;
  --color-somewhere-in-a-fairytale-200: #ead9ff;
  --color-somewhere-in-a-fairytale-300: #dbbffb;
  --color-somewhere-in-a-fairytale-400: #c19ee7;
  --color-somewhere-in-a-fairytale-500: #a280c6;
  --color-somewhere-in-a-fairytale-600: #8563a7;
  --color-somewhere-in-a-fairytale-700: #6a4b89;
  --color-somewhere-in-a-fairytale-800: #53376e;
  --color-somewhere-in-a-fairytale-900: #3f2856;
  --color-somewhere-in-a-fairytale-950: #271636;
  --color-wild-violet: #621f9e;
  --color-wild-violet-50: #f7f3ff;
  --color-wild-violet-100: #efe6ff;
  --color-wild-violet-200: #dfcbff;
  --color-wild-violet-300: #cdaaff;
  --color-wild-violet-400: #b37bf9;
  --color-wild-violet-500: #975cda;
  --color-wild-violet-600: #793fb8;
  --color-wild-violet-700: #621f9e;
  --color-wild-violet-800: #4c1b7a;
  --color-wild-violet-900: #3b1162;
  --color-wild-violet-950: #250741;
  --color-fabric-of-space: #331452;
  --color-fabric-of-space-50: #f7f3ff;
  --color-fabric-of-space-100: #efe6ff;
  --color-fabric-of-space-200: #e0cdff;
  --color-fabric-of-space-300: #ccb3f2;
  --color-fabric-of-space-400: #ae92d7;
  --color-fabric-of-space-500: #9577bd;
  --color-fabric-of-space-600: #7c5fa2;
  --color-fabric-of-space-700: #664b89;
  --color-fabric-of-space-800: #533a72;
  --color-fabric-of-space-900: #432e5f;
  --color-fabric-of-space-950: #331452;
  --color-cloud-break: #f9f0ff;
  --color-cloud-break-50: #f9f0ff;
  --color-cloud-break-100: #ede8f1;
  --color-cloud-break-200: #dad4df;
  --color-cloud-break-300: #c4bdc9;
  --color-cloud-break-400: #a69eab;
  --color-cloud-break-500: #8a8290;
  --color-cloud-break-600: #706875;
  --color-cloud-break-700: #59525e;
  --color-cloud-break-800: #46404a;
  --color-cloud-break-900: #363139;
  --color-cloud-break-950: #211e24;
}