Drupal 8 CSS file for Paragraphs customized for Width and Background color fields.

bootstrap-paragraphs-colors.css

/* RGBA Colors from http://mdbootstrap.com/css/colors/#rgba-colors */

.paragraph--color--rgba-blue-light {
  background: rgba(3, 169, 244, 0.3);
}

.paragraph--color--rgba-red-light {
  background: rgba(244, 67, 54, 0.3);
}

.paragraph--color--rgba-pink-light {
  background: rgba(233, 30, 99, 0.3);
}

.paragraph--color--rgba-purple-light {
  background: rgba(156, 39, 176, 0.3);
}

.paragraph--color--rgba-indigo-light {
  background: rgba(63, 81, 181, 0.3);
}

.paragraph--color--rgba-cyan-light {
  background: rgba(0, 188, 212, 0.3);
}

.paragraph--color--rgba-teal-light {
  background: rgba(0, 150, 136, 0.3);
}

.paragraph--color--rgba-green-light {
  background: rgba(76, 175, 80, 0.3);
}

.paragraph--color--rgba-lime-light {
  background: rgba(205, 220, 57, 0.3);
}

.paragraph--color--rgba-yellow-light {
  background: rgba(255, 235, 59, 0.3);
}

.paragraph--color--rgba-orange-light {
  background: rgba(255, 152, 0, 0.3);
}

.paragraph--color--rgba-brown-light {
  background: rgba(121, 85, 72, 0.3);
}

.paragraph--color--rgba-grey-light {
  background: rgba(158, 158, 158, 0.3);
}

.paragraph--color--rgba-bluegrey-light {
  background: rgba(96, 125, 139, 0.3);
}

.paragraph--color--rgba-black-light {
  background: rgba(0, 0, 0, 0.3);
}

.paragraph--color--rgba-stylish-light {
  background: rgba(62, 69, 81, 0.3);
}

.paragraph--color--rgba-white-light {
  background: rgba(255, 255, 255, 0.3);
}

.paragraph--color--rgba-blue-strong {
  background: rgba(3, 169, 244, 0.7);
}

.paragraph--color--rgba-red-strong {
  background: rgba(244, 67, 54, 0.7);
}

.paragraph--color--rgba-pink-strong {
  background: rgba(233, 30, 99, 0.7);
}

.paragraph--color--rgba-purple-strong {
  background: rgba(156, 39, 176, 0.7);
}

.paragraph--color--rgba-indigo-strong {
  background: rgba(63, 81, 181, 0.7);
}

.paragraph--color--rgba-cyan-strong {
  background: rgba(0, 188, 212, 0.7);
}

.paragraph--color--rgba-teal-strong {
  background: rgba(0, 150, 136, 0.7);
}

.paragraph--color--rgba-green-strong {
  background: rgba(76, 175, 80, 0.7);
}

.paragraph--color--rgba-lime-strong {
  background: rgba(205, 220, 57, 0.7);
}

.paragraph--color--rgba-yellow-strong {
  background: rgba(255, 235, 59, 0.7);
}

.paragraph--color--rgba-orange-strong {
  background: rgba(255, 152, 0, 0.7);
}

.paragraph--color--rgba-brown-strong {
  background: rgba(121, 85, 72, 0.7);
}

.paragraph--color--rgba-grey-strong {
  background: rgba(158, 158, 158, 0.7);
}

.paragraph--color--rgba-bluegrey-strong {
  background: rgba(96, 125, 139, 0.7);
}

.paragraph--color--rgba-black-strong {
  background: rgba(0, 0, 0, 0.7);
}

.paragraph--color--rgba-stylish-strong {
  background: rgba(62, 69, 81, 0.7);
}

.paragraph--color--rgba-white-strong {
  background: rgba(255, 255, 255, 0.7);
}

.paragraph--color--rgba-blue-slight {
  background: rgba(3, 169, 244, 0.1);
}

.paragraph--color--rgba-red-slight {
  background: rgba(244, 67, 54, 0.1);
}

.paragraph--color--rgba-pink-slight {
  background: rgba(233, 30, 99, 0.1);
}

.paragraph--color--rgba-purple-slight {
  background: rgba(156, 39, 176, 0.1);
}

.paragraph--color--rgba-indigo-slight {
  background: rgba(63, 81, 181, 0.1);
}

.paragraph--color--rgba-cyan-slight {
  background: rgba(0, 188, 212, 0.1);
}

.paragraph--color--rgba-teal-slight {
  background: rgba(0, 150, 136, 0.1);
}

.paragraph--color--rgba-green-slight {
  background: rgba(76, 175, 80, 0.1);
}

.paragraph--color--rgba-lime-slight {
  background: rgba(205, 220, 57, 0.1);
}

.paragraph--color--rgba-yellow-slight {
  background: rgba(255, 235, 59, 0.1);
}

.paragraph--color--rgba-orange-slight {
  background: rgba(255, 152, 0, 0.1);
}

.paragraph--color--rgba-brown-slight {
  background: rgba(121, 85, 72, 0.1);
}

.paragraph--color--rgba-grey-slight {
  background: rgba(158, 158, 158, 0.1);
}

.paragraph--color--rgba-bluegrey-slight {
  background: rgba(96, 125, 139, 0.1);
}

.paragraph--color--rgba-black-slight {
  background: rgba(0, 0, 0, 0.1);
}

.paragraph--color--rgba-stylish-slight {
  background: rgba(62, 69, 81, 0.1);
}

.paragraph--color--rgba-white-slight {
  background: rgba(255, 255, 255, 0.1);
}

.paragraph--color--transparent {
  background: transparent;
}

/* Override these in your site's CSS file for complete customization. */
.paragraph--color--primary,
.paragraph--color--secondary,
.paragraph--color--success,
.paragraph--color--info,
.paragraph--color--warning,
.paragraph--color--danger {
  background: transparent;
}