xrZBGQ

index.html

<div id="colorbars"></div>

script.babel

const bgcolors = [
  [
    '#0000cc',
    '#0000ff',
    '#0066ff',
    '#3399ff',
    '#66ccff'
  ],
  [
    '#800000',
    '#ff0000',
    '#ff6600',
    '#ff751a',
    '#ff8533'    
  ],
  [
    '#003300',
    '#006600',
    '#009900',
    '#00cc00',
    '#00ff00'
  ]
];

const createElem = (elemName) => {
    return document.createElement(elemName);
};

const createColumn = () => {
  return createElem('span');
};
  
const createRow = () => {
  return createElem('div');
}

const setupRows = ({columnElement, bgColor}) => {
  const rowElement = createRow();
  rowElement.style.backgroundColor = bgColor;
  rowElement.className = 'rowitem';
  columnElement.appendChild(rowElement);
};

const setupCols = (colData) => {
  const colorbarsDiv = document.querySelector('#colorbars');
  const columnElement = createColumn();
  columnElement.className = 'colitem';
  colorbarsDiv.appendChild(columnElement);
  _.forEach(colData, (bgColor) => {
    setupRows({ columnElement, bgColor });
  });
};

const setupGrid = () => {
  _.forEach(bgcolors, setupCols);
};

setupGrid();

scripts

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

style.css

#colorbars {
  margin-top: 1%;
  margin-left: 5%;
  width: 600px;
  height: 250px;
  display: flex;
  flex-direction: row;
}

.colitem {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-left: 5%;
}

.rowitem {
  flex-grow: 1;
}

xrzbgq.markdown

xrZBGQ

A Pen by Joe Graham on CodePen.

License.