color sampler

used to demo some colors

by Daniel Latimer

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="flexParent" id="colors"></div>

SCSS

$itemMargin: 10px;
$itemWidth: calc(15vw - #{$itemMargin});

.flexParent {
  display: flex;
  flex-wrap: wrap;
}

.flexChild {
  display: flex;
  justify-content: center;
  align-items: center;
  width: $itemWidth;
  height: 20vw;
  margin-left: $itemMargin;
  margin-bottom: $itemMargin;
}

.text {
  font-size: calc(#{$itemWidth} - 6vw);
  font-family: sans-serif;
  color: white;
  opacity: 0.5;
}

JavaScript

const colors = {
  pastelRed: '#ff6b6b',
  amour: '#ee5253',
  casandoraYellow: '#feca57',
  doubleDragonSkin: '#ff9f43',
  cyanite: '#0abde3',
  aquaVelvet: '#01a3a4',
  darkMountainMeadow: '#10ac84',
  jigglypuff: '#ff9ff3',
  blueBell: '#341f97',
  stormPetrel: '#8395a7',
  blueDeFrance: '#2e86de',
  jadeDust: '#00d2d3',
}

const colorCodes = [
  colors.jadeDust,
  colors.casandoraYellow,
  colors.pastelRed,
	colors.darkMountainMeadow,
	colors.doubleDragonSkin,
  colors.blueBell,
  colors.jigglypuff,
  colors.blueDeFrance,
  colors.stormPetrel,
  colors.amour,
	colors.aquaVelvet,
  colors.cyanite,
];
  
const $colorsDiv = $('#colors');
colorCodes.forEach((color, index) => 
	$colorsDiv.append(`<div class="flexChild" style="background: ${color}"><div class="text">${index + 1}</div></div>`));