LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html {
  overflow: hidden;
}

body, html {
  margin: 0;
  height: 100%;
}

body {
  background-color: #222;
}

#colors {
  display: table;
  width: 100%;
  height: 100%;
}

.color-row {
  display: table-row;
}

.color {
  display: table-cell;
  color: white;
  box-sizing: border-box;
  padding: 8px;
  font-weight: 100;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
  cursor: pointer;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  font-size: 16px;
  text-transform: uppercase;
  vertical-align: bottom;
  text-align: right;
  letter-spacing: 1px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.color:hover {
  opacity: 0.9;
}
.color .input {
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  width: 100%;
  box-sizing: border-box;
  outline: none;
  -webkit-user-select: all;
     -moz-user-select: all;
      -ms-user-select: all;
          user-select: all;
}
.color .input::-moz-selection {
  background-color: rgba(0, 0, 0, 0.9);
}
.color .input::selection {
  background-color: rgba(0, 0, 0, 0.9);
}
.color .input::-moz-selection {
  background-color: rgba(0, 0, 0, 0.9);
}
JS
# how many columns do you want?
cols = 5

# modify with your color list
colors = [
  ["Turquoise",     "#1abc9c"]
  ["Emerald",       "#2ecc71"]
  ["Peter River",   "#3498db"]
  ["Amethyst",      "#9b59b6"]
  ["Wet Asphalt",   "#34495e"]
  ["Green Sea",     "#16a085"]
  ["Nephritis",     "#27ae60"]
  ["Belize Hole",   "#2980b9"]
  ["Wisteria",      "#8e44ad"]
  ["Midnight Blue", "#2c3e50"]
  ["Sun Flower",    "#f1c40f"]
  ["Carrot",        "#e67e22"]
  ["Alizarin",      "#e74c3c"]
  ["Clouds",        "#ecf0f1"]
  ["Concrete",      "#95a5a6"]
  ["Orange",        "#f39c12"]
  ["Pumpkin",       "#d35400"]
  ["Pomegranate",   "#c0392b"]
  ["Silver",        "#bdc3c7"]
  ["Asbestos",      "#7f8c8d"]
]


#
# the actual stuff (dont need to edit):
#

# column width %
col_width = 100 / cols + '%'
# how many colors
color_count = colors.length
# how many rows
row_count = Math.ceil(color_count / cols)
# how tall the rows will be
row_height = 100 / row_count + '%'

# empty html string to add to dom
html = ''

# for each color
for color, i in colors
  # start row if first
  html += if (i == 0) then '
' else '' # add color html += '
'+color[0]+'
'+ '
'+ color[1]+'
'+ '
' # close row if end of row or last html += if ((i+1) % cols == 0) then '
' else if ((i+1) == color_count) then '
' else '' # add html to dom $('#colors').append html # select contents of each color on click $('.color').each -> $(this).click -> selectText $(this).find('.input') # select text from http://stackoverflow.com/questions/8802857/select-all-contents-of-a-div selectText = (element) -> doc = document text = $(element)[0] if doc.body.createTextRange range = document.body.createTextRange() range.moveToElementText text range.select() else if window.getSelection selection = window.getSelection() range = document.createRange() range.selectNodeContents text selection.removeAllRanges() selection.addRange range return
Host Instantly Drag and Drop Website Builder

 

Description

I've been seeing so many damn color scheme grids lately. Here is a generator that takes color/name pairs and spits out a grid. Touching the grid items will select their hex code for easy copying.
Term
Mon, 11/27/2017 - 22:03

Related Codes

Pen ID
Pen ID
Pen ID