Start generating

Dark Serpent to Cloudless color palette

113115Dark Serpent205D34Pine525B97Piccadilly PurpleC36956BarbecueF8AB92No Way RoséE0EAFFCloudless
Open in generator Export PNG, PDF, ASE…

About this palette

Dark Serpent to Cloudless is a 6-color palette: #113115 (Dark Serpent), #205D34 (Pine), #525B97 (Piccadilly Purple), #C36956 (Barbecue), #F8AB92 (No Way Rosé), #E0EAFF (Cloudless). It mixes green, purple, red, pink, white tones and feels cool overall. The strongest text pairing is #113115 on #E0EAFF with a contrast ratio of 11.79:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Dark Serpentrgb(17, 49, 21)hsl(128, 48%, 13%)
Pinergb(32, 93, 52)hsl(140, 49%, 25%)
Piccadilly Purplergb(82, 91, 151)hsl(232, 30%, 46%)
Barbecuergb(195, 105, 86)hsl(10, 48%, 55%)
No Way Rosérgb(248, 171, 146)hsl(15, 88%, 77%)
Cloudlessrgb(224, 234, 255)hsl(221, 100%, 94%)

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.

  • Aa11.79:1 Very good#113115 on #E0EAFF
  • Aa11.79:1 Very good#E0EAFF on #113115
  • Aa7.62:1 Very good#113115 on #F8AB92
  • Aa7.62:1 Very good#F8AB92 on #113115
  • Aa6.49:1 Good#205D34 on #E0EAFF
  • Aa6.49:1 Good#E0EAFF on #205D34
  • Aa5.26:1 Good#525B97 on #E0EAFF
  • Aa5.26:1 Good#E0EAFF on #525B97

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Dark Serpent to Cloudless — https://swatchly.xyz/palette/113115-205d34-525b97-c36956-f8ab92-e0eaff */
:root {
  --dark-serpent: #113115;
  --pine: #205d34;
  --piccadilly-purple: #525b97;
  --barbecue: #c36956;
  --no-way-ros: #f8ab92;
  --cloudless: #e0eaff;
}

Tailwind CSS v4

/* Dark Serpent to Cloudless — https://swatchly.xyz/palette/113115-205d34-525b97-c36956-f8ab92-e0eaff */
@theme {
  --color-dark-serpent: #113115;
  --color-dark-serpent-50: #e7fce8;
  --color-dark-serpent-100: #dbf3dc;
  --color-dark-serpent-200: #c5e0c6;
  --color-dark-serpent-300: #abcbad;
  --color-dark-serpent-400: #88aa89;
  --color-dark-serpent-500: #6a8d6c;
  --color-dark-serpent-600: #4f7051;
  --color-dark-serpent-700: #3a573b;
  --color-dark-serpent-800: #28412a;
  --color-dark-serpent-900: #113115;
  --color-dark-serpent-950: #0e1b0f;
  --color-pine: #205d34;
  --color-pine-50: #dfffe5;
  --color-pine-100: #d0f7d8;
  --color-pine-200: #b6e4c0;
  --color-pine-300: #99cea5;
  --color-pine-400: #74ae82;
  --color-pine-500: #569165;
  --color-pine-600: #3b754c;
  --color-pine-700: #205d34;
  --color-pine-800: #1a4828;
  --color-pine-900: #10381d;
  --color-pine-950: #072310;
  --color-piccadilly-purple: #525b97;
  --color-piccadilly-purple-50: #f2f5ff;
  --color-piccadilly-purple-100: #e3e8ff;
  --color-piccadilly-purple-200: #c7d0ff;
  --color-piccadilly-purple-300: #abb7f2;
  --color-piccadilly-purple-400: #8995d4;
  --color-piccadilly-purple-500: #6d77b6;
  --color-piccadilly-purple-600: #525b97;
  --color-piccadilly-purple-700: #40477b;
  --color-piccadilly-purple-800: #313763;
  --color-piccadilly-purple-900: #252a50;
  --color-piccadilly-purple-950: #161934;
  --color-barbecue: #c36956;
  --color-barbecue-50: #fff2ef;
  --color-barbecue-100: #ffe4de;
  --color-barbecue-200: #ffc9bd;
  --color-barbecue-300: #fba996;
  --color-barbecue-400: #df8673;
  --color-barbecue-500: #c36956;
  --color-barbecue-600: #a44f3d;
  --color-barbecue-700: #883a2a;
  --color-barbecue-800: #6e2a1c;
  --color-barbecue-900: #571e12;
  --color-barbecue-950: #391008;
  --color-no-way-ros: #f8ab92;
  --color-no-way-ros-50: #fff2ee;
  --color-no-way-ros-100: #ffe4dc;
  --color-no-way-ros-200: #ffc9b8;
  --color-no-way-ros-300: #f8ab92;
  --color-no-way-ros-400: #d48d76;
  --color-no-way-ros-500: #b87159;
  --color-no-way-ros-600: #9a5741;
  --color-no-way-ros-700: #7f422e;
  --color-no-way-ros-800: #66311f;
  --color-no-way-ros-900: #512415;
  --color-no-way-ros-950: #35140a;
  --color-cloudless: #e0eaff;
  --color-cloudless-50: #eff4ff;
  --color-cloudless-100: #e0eaff;
  --color-cloudless-200: #cfd6e6;
  --color-cloudless-300: #b8c0d2;
  --color-cloudless-400: #98a1b4;
  --color-cloudless-500: #7d8699;
  --color-cloudless-600: #636c7d;
  --color-cloudless-700: #4e5565;
  --color-cloudless-800: #3c4250;
  --color-cloudless-900: #2d333f;
  --color-cloudless-950: #1b1f28;
}

Similar palettes