Banner/styles.css

.banner-wrapper {
	position: relative;
	display: inline-block;
	width: 21px;
	height: 41px;
	image-rendering: crisp-edges;
}

.banner-wrapper p {
	line-height: 0;
	margin: 0;
}

.banner-wrapper .banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.banner-color-white {
	/*filter: hue-rotate(169.992deg) saturate(0.0235) brightness(3.5);*/
	filter: invert(17%) sepia(86%) saturate(8%) hue-rotate(118deg) brightness(98%) contrast(101%);
}
.banner-color-orange {
	/*filter: hue-rotate(27deg) saturate(0.8835) brightness(4.4765);*/
	filter: invert(48%) sepia(34%) saturate(1665%) hue-rotate(351deg) brightness(89%) contrast(92%);
}
.banner-color-magenta {
	/*filter: hue-rotate(304.956deg) saturate(0.608) brightness(4.2805);*/
	filter: invert(50%) sepia(62%) saturate(4945%) hue-rotate(277deg) brightness(74%) contrast(78%);
}
.banner-color-light_blue {
	/*filter: hue-rotate(194.616deg) saturate(0.7339) brightness(4.3549);*/
	filter: invert(48%) sepia(26%) saturate(1057%) hue-rotate(148deg) brightness(100%) contrast(91%);
}
.banner-color-yellow {
	/*filter: hue-rotate(48.204deg) saturate(0.7598) brightness(4.4961);*/
	filter: invert(23%) sepia(80%) saturate(388%) hue-rotate(4deg) brightness(94%) contrast(93%);
}
.banner-color-lime {
	/*filter: hue-rotate(85.356deg) saturate(0.8442) brightness(4.2804);*/
	filter: invert(41%) sepia(97%) saturate(434%) hue-rotate(42deg) brightness(90%) contrast(79%);
}
.banner-color-pink {
	/*filter: hue-rotate(342.108deg) saturate(0.428) brightness(4.6529);*/
	filter: invert(45%) sepia(71%) saturate(298%) hue-rotate(291deg) brightness(92%) contrast(85%);
}
.banner-color-gray {
	/*filter: hue-rotate(196.38deg) saturate(0.1341) brightness(1.3216);*/
	filter: invert(82%) sepia(8%) saturate(496%) hue-rotate(153deg) brightness(94%) contrast(92%);
}
.banner-color-light_gray {
	/*filter: hue-rotate(60.012deg) saturate(0.0382) brightness(3.1157);*/
	filter: invert(41%) sepia(5%) saturate(240%) hue-rotate(22deg) brightness(95%) contrast(86%);
}
.banner-color-cyan {
	/*filter: hue-rotate(180deg) saturate(0.859) brightness(2.1118);*/
	filter: invert(61%) sepia(11%) saturate(6484%) hue-rotate(145deg) brightness(88%) contrast(85%);
}
.banner-color-purple {
	/*filter: hue-rotate(278.964deg) saturate(0.7283) brightness(1.7216);*/
	filter: invert(88%) sepia(25%) saturate(6120%) hue-rotate(264deg) brightness(93%) contrast(94%);
}
.banner-color-blue {
	/*filter: hue-rotate(235.62deg) saturate(0.6471) brightness(1.6667);*/
	filter: invert(92%) sepia(79%) saturate(1770%) hue-rotate(223deg) brightness(92%) contrast(91%);
}
.banner-color-brown {
	/*filter: hue-rotate(25.2deg) saturate(0.6183) brightness(1.2137);*/
	filter: invert(78%) sepia(59%) saturate(408%) hue-rotate(343deg) brightness(95%) contrast(97%);
}
.banner-color-green {
	/*filter: hue-rotate(77.652deg) saturate(0.8226) brightness(2.4863);*/
	filter: invert(70%) sepia(72%) saturate(433%) hue-rotate(36deg) brightness(94%) contrast(98%);
}
.banner-color-red {
	/*filter: hue-rotate(3.492deg) saturate(0.7841) brightness(1.1902);*/
	filter: invert(91%) sepia(81%) saturate(1441%) hue-rotate(336deg) brightness(100%) contrast(101%);
}
.banner-color-black {
	/*filter: hue-rotate(240.012deg) saturate(0.1212) brightness(0.6294);*/
	filter: invert(99%) sepia(1%) saturate(2881%) hue-rotate(202deg) brightness(103%) contrast(108%);
}