Blackberry to Cloud Break Color Palette

About this palette

Blackberry to Cloud Break is a 5-color cool, gradient palette: #401A32 (Blackberry), #474FBD (Blasphemous Blue), #8688C1 (Magic Carpet), #D19BF3 (Dream Vapour), #FAF2FF (Cloud Break). It mixes red, blue, purple, white tones and feels cool overall. The strongest text pairing is #401A32 on #FAF2FF with a contrast ratio of 13.61:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackberry	rgb(64, 26, 50)	hsl(322, 42%, 18%)
Blasphemous Blue	rgb(71, 79, 189)	hsl(236, 47%, 51%)
Magic Carpet	rgb(134, 136, 193)	hsl(238, 32%, 64%)
Dream Vapour	rgb(209, 155, 243)	hsl(277, 79%, 78%)
Cloud Break	rgb(250, 242, 255)	hsl(277, 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.61:1 Super#401A32 on #FAF2FF
Aa13.61:1 Super#FAF2FF on #401A32
Aa6.87:1 Good#401A32 on #D19BF3
Aa6.87:1 Good#D19BF3 on #401A32
Aa6.15:1 Good#474FBD on #FAF2FF
Aa6.15:1 Good#FAF2FF on #474FBD
Aa4.47:1 Poor#401A32 on #8688C1
Aa4.47:1 Poor#8688C1 on #401A32

Color blindness preview

CSS variables

/* Blackberry to Cloud Break — https://swatchly.xyz/palette/401a32-474fbd-8688c1-d19bf3-faf2ff */
:root {
  --blackberry: #401a32;
  --blasphemous-blue: #474fbd;
  --magic-carpet: #8688c1;
  --dream-vapour: #d19bf3;
  --cloud-break: #faf2ff;
}

Tailwind CSS v4

/* Blackberry to Cloud Break — https://swatchly.xyz/palette/401a32-474fbd-8688c1-d19bf3-faf2ff */
@theme {
  --color-blackberry: #401a32;
  --color-blackberry-50: #fff0f8;
  --color-blackberry-100: #ffe1f2;
  --color-blackberry-200: #f1cbe0;
  --color-blackberry-300: #ddb2ca;
  --color-blackberry-400: #be90aa;
  --color-blackberry-500: #a0728d;
  --color-blackberry-600: #825770;
  --color-blackberry-700: #664157;
  --color-blackberry-800: #4e2f41;
  --color-blackberry-900: #401a32;
  --color-blackberry-950: #23121c;
  --color-blasphemous-blue: #474fbd;
  --color-blasphemous-blue-50: #f2f5ff;
  --color-blasphemous-blue-100: #e5eaff;
  --color-blasphemous-blue-200: #ced7ff;
  --color-blasphemous-blue-300: #b3c1ff;
  --color-blasphemous-blue-400: #8e9eff;
  --color-blasphemous-blue-500: #7180f2;
  --color-blasphemous-blue-600: #5a66d6;
  --color-blasphemous-blue-700: #474fbd;
  --color-blasphemous-blue-800: #363c99;
  --color-blasphemous-blue-900: #282c7c;
  --color-blasphemous-blue-950: #181954;
  --color-magic-carpet: #8688c1;
  --color-magic-carpet-50: #f5f6ff;
  --color-magic-carpet-100: #ebedff;
  --color-magic-carpet-200: #d6d8ff;
  --color-magic-carpet-300: #bfc2f4;
  --color-magic-carpet-400: #a0a3da;
  --color-magic-carpet-500: #8688c1;
  --color-magic-carpet-600: #6b6ca2;
  --color-magic-carpet-700: #535486;
  --color-magic-carpet-800: #40406c;
  --color-magic-carpet-900: #303055;
  --color-magic-carpet-950: #1d1d37;
  --color-dream-vapour: #d19bf3;
  --color-dream-vapour-50: #f6e9ff;
  --color-dream-vapour-100: #efd9ff;
  --color-dream-vapour-200: #e4baff;
  --color-dream-vapour-300: #d19bf3;
  --color-dream-vapour-400: #b27fd2;
  --color-dream-vapour-500: #9965b8;
  --color-dream-vapour-600: #7f4d9c;
  --color-dream-vapour-700: #683a82;
  --color-dream-vapour-800: #542b6b;
  --color-dream-vapour-900: #432057;
  --color-dream-vapour-950: #2b1239;
  --color-cloud-break: #faf2ff;
  --color-cloud-break-50: #faf2ff;
  --color-cloud-break-100: #eee9f1;
  --color-cloud-break-200: #dbd5df;
  --color-cloud-break-300: #c5bec9;
  --color-cloud-break-400: #a69eaa;
  --color-cloud-break-500: #8a838f;
  --color-cloud-break-600: #706974;
  --color-cloud-break-700: #59535c;
  --color-cloud-break-800: #454049;
  --color-cloud-break-900: #353138;
  --color-cloud-break-950: #211e23;
}