Hex value board - crstk

by rdenver6

HTML

<div style="display:none;">
<input id="tempInput" type="text">
</div>
<div id="container">
</div>

CSS

#container {
  display: flex;
  flex-wrap: wrap;
}

#container>div {
  font-size:12px;
  font-family: sans-serif;
  height: 50px;
  margin: 10px;
  width: 90px;
  border: 1px solid black;
}

#container>div>span {
  display: inline-block;
  font-size:16px;
  padding-top:10px;
}

JavaScript

var colors = {
  "themePrimary" : "#5486A6",
  "themeLighterAlt" : "#D8DFE1",
  "themeLighter" : "#DCDCDC",
  "themeLight" : "#7CA1A6",
  "themeTertiary" : "#F08621",
  "themeSecondary" : "#D7C926",
  "themeDarkAlt" : "#1E3040",
  "themeDark" : "#a51f15",
  "themeDarker" : "#791710",
  "neutralLighterAlt" : "#faf9f8",
  "neutralLighter" : "#f3f2f1",
  "neutralLight" : "#edebe9",
  "neutralQuaternaryAlt" : "#FAB68E",
  "neutralQuaternary" : "#d0d0d0",
  "neutralTertiaryAlt" : "#c8c6c4",
  "neutralTertiary" : "#cacccd",
  "neutralSecondary" : "#96999c",
  "neutralPrimaryAlt" : "#676b6d",
  "neutralPrimary" : "#1E3040",
  "neutralDark" : "#404244",
  "black" : "#2f3132",
  "white" : "#ffffff",
  "primaryBackground" : "#FFFFFF",
  "primaryText" : "#791710"
 }
var colorsPLD = {
  "themePrimary":"#008E5B",
  "themeLighterAlt":"#f3fcfc",
  "themeLighter":"#77B7E59A",
  "themeLight":"#affefe",
  "themeTertiary":"#ffffff",
  "themeSecondary":"#23B2A9",
  "themeDarkAlt":"#1B4D4A",
  "themeDark":"#009090",
  "themeDarker":"#005252",
  "neutralLighterAlt":"#f8f8f8",
  "neutralLighter":"#f4f4f4",
  "neutralLight":"#eaeaea",
  "neutralQuaternaryAlt":"#dadada",
  "neutralQuaternary":"#d0d0d0",
  "neutralTertiaryAlt":"#c8c8c8",
  "neutralTertiary":"#a6a6a6",
  "neutralSecondaryAlt":"#767676",
  "neutralSecondary":"#666666",
  "neutralPrimary":"#333",
  "neutralPrimaryAlt":"#3c3c3c",
  "neutralDark":"#212121",
  "black":"#000000",
  "white":"#fff",
  "primaryBackground":"#FFFFFF",
  "primaryText":"#1B4D4A",
 }
 var colors5 = {
  "themePrimary": "#5486A6",
  "themeLighterAlt": "#D8DFE1",
  "themeLighter": "#DCDCDC",
  "themeLight": "#F08621",
  "themeTertiary": "#1E3040",
  "themeSecondary": "#D7C926",
  "themeDarkAlt": "#c32519",
  "themeDark": "#a51f15",
  "themeDarker": "#791710",
  "neutralLighterAlt": "#faf9f8",
  "neutralLighter": "#f3f2f1",
  "neutralLight": "#7CA1A6",
  "neutralQuaternaryAlt": "#e1dfdd",
  "neutralQuaternary": "#d0d0d0",
  "neutralTertiaryAlt": "#c8c6c4",
...