Comfort Colors Swatches

comfort-colors-swatches.markdown

Comfort Colors Swatches

A Pen by Patrick Black on CodePen.

License.

index.html

<div class="container">
	<div class="row" id="app">
		<div class="row">
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box white"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-color-link-sub" href="#">White</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box burnt-orange"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-color-link-sub" href="#">Burnt Orange</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box butter"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-color-link-sub" href="#">Butter</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box lagoon-blue"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-color-link-sub" href="#">Lagoon Blue</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box midnight"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-color-link-sub" href="#">Midnight</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box sage"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">Sage</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box blue-jean"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">Blue Jean</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box crimson"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">Crimson</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box pepper"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">Pepper</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box paprika"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">Paprika</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box aloe"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">Aloe</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box chocolate"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">Chocolate</a>
				</div>
			</div>
		</div><!-- End of row -->
		<div class="row">
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box crunchberry"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">Crunchberry</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box seafoam"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">Seafoam</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box neon-blue"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">Neon Blue</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box neon-green"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">neon green</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box neon-pink"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">neon pink</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box sandstone"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">sandstone</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box neon-red-orange"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">Butter</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box khaki"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">khaki</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box neon-yellow"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">neon yellow</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box bay"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">bay</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box moss"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">moss</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box celery"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">celery</a>
				</div>
			</div>
		</div><!-- END OF ROW -->
		<div class="row">
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box graphite"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">graphite</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box watermelon"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">watermelon</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box citrus"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">citrus</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box celedon"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">celedon</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box cumin"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">cumin</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box mustard"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">mustard</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box denim"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">denim</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box hemp"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">hemp</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box emerald"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">emerald</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box grey"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">grey</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box light-green"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">light green</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box ice-blue"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">ice blue</a>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box bright-salmon"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">bright salmon</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box true-navy"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">true navy</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box washed-denim"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">washed denim</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box sea"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">sea</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box ivory"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">ivory</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box black"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">black</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box brick"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">brick</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box chili"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">chili</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box flo-blue"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">flo blue</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box royal-caribe"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">royal caribe</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box periwinkle"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">periwinkle</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box melon"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">melon</a>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box berry"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">berry</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box violet"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">violet</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box chambray"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">chambray</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box blue-spruce"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">blue spruce</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box blossom"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">blossom</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box sapphire"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">sapphire</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box grass"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">grass</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box willow"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">willow</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box mango"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">mango</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box yam"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">yam</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box lime"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">lime</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box grape"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">grape</a>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box banana"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">banana</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box purple"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">purple</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box chili-pepper"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">chili pepper</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box china-blue"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">china blue</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box granite"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">granite</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box red"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">red</a>
				</div>
			</div>
			<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
				<a class="pi-color-link" href="#">
				<div class="pi-color-box peony"></div></a>
				<div class="col-lg-12 text-center">
					<a class="pi-link-text-sub" href="#">peony</a>
				</div>
			</div>
		</div>
	</div>
</div>

script.js

jQuery.fn.capitalise = function() {
	return this.each(function() {
		var $this = $(this),
			text = $this.text(),
			split = text.split(" "),
			res = [],
			i,
			len,
			component;
		for (i = 0, len = split.length; i < len; i++) {
			component = split[i];
			res.push(component.substring(0, 1).toUpperCase());
			res.push(component.substring(1).toLowerCase());
			res.push(" "); // put space back in
		}
		$this.text(res.join(""));
	});
};
$(document).ready(function() {
	$(".pi-link-text-sub").capitalise();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.stylus

white = #F3F3F3
burnt-orange = #EA7639
butter = #F9D790
lagoon-blue = #66CEE9
midnight = #313854
sage = #787B6A
blue-jean = #5C728A
crimson = #6B292D
pepper = #5D5854
paprika = #D53C50
aloe = #B0D085
chocolate = #3B2E25
crunchberry = #EF6C98
seafoam = #5A9A9A
neon-blue = #5170B1
neon-green = #4DB866
neon-pink = #EA639B
sandstone = #C1B4A4
neon-red-orange = #F87F88
khaki = #B29881
neon-yellow = #FAD36A
bay = #7D98A9
moss = #6C765E
celery = #C4DFB6
graphite = #3A353B
watermelon = #F17F7F
citrus = #FEC657
celedon = #B8C37F
cumin = #B65159
mustard = #C18D41
denim = #2C3848
hemp = #45402D
emerald = #426770
kiwi = #BAD473
grey = #86817D
light-green = #69897E
ice-blue = #8293A7
bright-salmon = #EE6E61
true-navy = #455D77
washed-denim = #464D60
sea = #479B9B
ivory = #F6EADA
black = #363233
brick = #A2424E
chili = #455D77
flo-blue = #6882B3
royal-caribe = #4180B3
periwinkle = #5665A8
melon = #F69159
berry = #8E5870
violet = #786FA6
chambray = #BEDCE7
blue-spruce = #457278
blossom = #FEC8E0
sapphire = #0084B4
grass = #037C5D
willow = #4D544C
mango = #F78E55
yam = #B5633E
lime = #8FC567
grape = #535089
banana = #F7E9C4
purple = #50538A
chili-pepper = #9D3246
china-blue = #32425C
granite = #777C80
red = #C5343B
peony = #E97991

.pi-color-box {
  width: 100%;
  height: 5em;
}
.pi-color-link {
  text-align: center;
  padding-top: 40%;
}
a.pi-color-link-sub {
  text-transform: capitalize;
  overflow: hidden;
}
.white {
  background-color: white;
  color: invert(white);
}
.burnt-orange {
  background-color: burnt-orange;
  color: invert(burnt-orange);
}
.butter {
  background-color: butter;
  color: invert(burnt-orange);
}
.lagoon-blue {
  background-color: lagoon-blue;
}
.midnight {
  background-color: midnight;
}
.sage {
  background-color: sage;
}
.blue-jean {
  background-color: blue-jean;
}
.crimson {
  background-color: crimson;
}
.pepper {
  background-color: pepper;
}
.paprika {
  background-color: paprika;
}
.aloe {
  background-color: aloe;
}
.chocolate {
  background-color: chocolate;
}
.crunchberry {
  background-color crunchberry
}
.seafoam {
  background-color seafoam
}
.neon-blue {
  background-color neon-blue
}
.neon-green {
  background-color neon-green
}
.neon-pink {
  background-color neon-pink
}
.sandstone {
  background-color sandstone
}
.neon-red-orange {
  background-color neon-red-orange
}
.khaki {
  background-color khaki
}
.neon-yellow {
  background-color neon-yellow
}
.bay {
  background-color bay
}
.moss {
  background-color moss
}
.celery {
  background-color celery
}
.graphite {
  background-color graphite
}
.watermelon {
  background-color watermelon
}
.citrus {
  background-color citrus
}
.celedon {
  background-color celery
}
.cumin {
  background-color cumin
}
.mustard {
  background-color mustard
}
.denim {
  background-color denim
}
.hemp {
  background-color hemp
}
.emerald {
  background-color emerald
}
.kiwi {
  background-color kiwi
}
.grey {
  background-color grey
}
.light-green {
  background-color light-green
}
.ice-blue {
  background-color ice-blue
}
.bright-salmon {
  background-color bright-salmon
}
.true-navy {
  background-color #455D77
}
.washed-denim {
  background-color washed-denim
}
.sea {
  background-color sea
}
.ivory {
  background-color ivory
}
.black {
  background-color black
}
.brick {
  background-color brick
}
.chili {
  background-color chili
}
.flo-blue {
  background-color flo-blue
}
.royal-caribe {
  background-color royal-caribe
}
.periwinkle {
  background-color periwinkle
}
.melon {
  background-color melon
}
.violet {
  background-color violet
}
.chambray {
  background-color chambray
}
.berry {
  background-color berry
}
.blue-spruce {
  background-color blue-spruce
}
.blossom {
  background-color melon
}
.sapphire {
  background-color sapphire
}
.grass {
  background-color grass
}
.willow {
  background-color willow
}
.mango {
  background-color mango
}
.yam {
  background-color yam
}
.lime {
  background-color lime
}
.grape {
  background-color grape
}
.banana {
  background-color banana
}
.purple {
  background-color purple
}
.chili-pepper {
  background-color chili-pepper
}
.china-blue {
  background-color china-blue
}
.granite {
  background-color granite
}
.red {
  background-color red
}
.peony {
  background-color peony
}

styles

<link href="https://www.perfectimprints.com/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://www.perfectimprints.com/assets/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://www.perfectimprints.com/assets/css/webjaguar.css" rel="stylesheet" />
<link href="https://www.perfectimprints.com/assets/css/main.css" rel="stylesheet" />