Start generating

Innocent Snowdrop to Blueberry color palette

CBCCFFInnocent Snowdrop8C99FFCold Lips6E76C4Flood4B5191Twilight3C3C6BStorm Is Coming3C3F8DBlueberry
Open in generator Export PNG, PDF, ASE…

About this palette

Innocent Snowdrop to Blueberry is a 6-color cool, monochromatic palette: #CBCCFF (Innocent Snowdrop), #8C99FF (Cold Lips), #6E76C4 (Flood), #4B5191 (Twilight), #3C3C6B (Storm Is Coming), #3C3F8D (Blueberry). It mixes purple tones and feels cool overall. The strongest text pairing is #CBCCFF on #3C3C6B with a contrast ratio of 6.64:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Innocent Snowdroprgb(203, 204, 255)hsl(239, 100%, 90%)
Cold Lipsrgb(140, 153, 255)hsl(233, 100%, 77%)
Floodrgb(110, 118, 196)hsl(234, 42%, 60%)
Twilightrgb(75, 81, 145)hsl(235, 32%, 43%)
Storm Is Comingrgb(60, 60, 107)hsl(240, 28%, 33%)
Blueberryrgb(60, 63, 141)hsl(238, 40%, 39%)

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.64:1 Good#CBCCFF on #3C3C6B
  • Aa6.64:1 Good#3C3C6B on #CBCCFF
  • Aa5.95:1 Good#CBCCFF on #3C3F8D
  • Aa5.95:1 Good#3C3F8D on #CBCCFF
  • Aa4.72:1 Good#CBCCFF on #4B5191
  • Aa4.72:1 Good#4B5191 on #CBCCFF
  • Aa3.96:1 Poor#8C99FF on #3C3C6B
  • Aa3.96:1 Poor#3C3C6B on #8C99FF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Innocent Snowdrop to Blueberry — https://swatchly.xyz/palette/cbccff-8c99ff-6e76c4-4b5191-3c3c6b-3c3f8d */
:root {
  --innocent-snowdrop: #cbccff;
  --cold-lips: #8c99ff;
  --flood: #6e76c4;
  --twilight: #4b5191;
  --storm-is-coming: #3c3c6b;
  --blueberry: #3c3f8d;
}

Tailwind CSS v4

/* Innocent Snowdrop to Blueberry — https://swatchly.xyz/palette/cbccff-8c99ff-6e76c4-4b5191-3c3c6b-3c3f8d */
@theme {
  --color-innocent-snowdrop: #cbccff;
  --color-innocent-snowdrop-50: #efefff;
  --color-innocent-snowdrop-100: #e2e3ff;
  --color-innocent-snowdrop-200: #cbccff;
  --color-innocent-snowdrop-300: #b6b7e3;
  --color-innocent-snowdrop-400: #9898c7;
  --color-innocent-snowdrop-500: #7e7ead;
  --color-innocent-snowdrop-600: #656591;
  --color-innocent-snowdrop-700: #504f77;
  --color-innocent-snowdrop-800: #3e3e61;
  --color-innocent-snowdrop-900: #302f4d;
  --color-innocent-snowdrop-950: #1d1c32;
  --color-cold-lips: #8c99ff;
  --color-cold-lips-50: #f3f5ff;
  --color-cold-lips-100: #e7ebff;
  --color-cold-lips-200: #ced6ff;
  --color-cold-lips-300: #b2beff;
  --color-cold-lips-400: #8c99ff;
  --color-cold-lips-500: #727de0;
  --color-cold-lips-600: #5961c0;
  --color-cold-lips-700: #444aa1;
  --color-cold-lips-800: #343884;
  --color-cold-lips-900: #27296a;
  --color-cold-lips-950: #161846;
  --color-flood: #6e76c4;
  --color-flood-50: #f1f3ff;
  --color-flood-100: #e2e7ff;
  --color-flood-200: #c8d0ff;
  --color-flood-300: #abb5fe;
  --color-flood-400: #8a93e2;
  --color-flood-500: #6e76c4;
  --color-flood-600: #575da6;
  --color-flood-700: #43488a;
  --color-flood-800: #343771;
  --color-flood-900: #272a5b;
  --color-flood-950: #18193d;
  --color-twilight: #4b5191;
  --color-twilight-50: #f2f4ff;
  --color-twilight-100: #e6eaff;
  --color-twilight-200: #ced5ff;
  --color-twilight-300: #b4bdfb;
  --color-twilight-400: #949de1;
  --color-twilight-500: #7982c6;
  --color-twilight-600: #6068a9;
  --color-twilight-700: #4b5191;
  --color-twilight-800: #3a3f73;
  --color-twilight-900: #2c2f5c;
  --color-twilight-950: #1a1d3d;
  --color-storm-is-coming: #3c3c6b;
  --color-storm-is-coming-50: #f3f4ff;
  --color-storm-is-coming-100: #e7e9ff;
  --color-storm-is-coming-200: #d1d4fe;
  --color-storm-is-coming-300: #b9bcec;
  --color-storm-is-coming-400: #999cd0;
  --color-storm-is-coming-500: #7e80b5;
  --color-storm-is-coming-600: #646698;
  --color-storm-is-coming-700: #4f507d;
  --color-storm-is-coming-800: #3c3c6b;
  --color-storm-is-coming-900: #2e2f50;
  --color-storm-is-coming-950: #1c1c34;
  --color-blueberry: #3c3f8d;
  --color-blueberry-50: #f2f4ff;
  --color-blueberry-100: #e6eaff;
  --color-blueberry-200: #cdd5ff;
  --color-blueberry-300: #b3bdff;
  --color-blueberry-400: #929def;
  --color-blueberry-500: #7982d6;
  --color-blueberry-600: #6168b9;
  --color-blueberry-700: #4d539e;
  --color-blueberry-800: #3c3f8d;
  --color-blueberry-900: #2e316b;
  --color-blueberry-950: #1c1e49;
}

Similar palettes