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.
Modify the colors array and column count to customize to your heart's content.
Using the flatuicolors color scheme for this demo.
A Pen by Jake Albaugh on CodePen.
| #colors |
| # 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 '<div class="color-row" style="height:'+row_height+'">' else '' | |
| # add color | |
| html += '<div class="color" data-clipboard-text="'+color[1]+'" style="width: '+col_width+'; background-color:'+color[1]+'">'+color[0]+'<br>'+ | |
| '<div class="input" contenteditable>'+ color[1]+'</div>'+ | |
| '</div>' | |
| # close row if end of row or last | |
| html += if ((i+1) % cols == 0) then '</div><div class="color-row" style="height:'+row_height+'">' else if ((i+1) == color_count) then '</div>' 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 |
| 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 | |
| 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 | |
| user-select: none | |
| &:hover | |
| opacity: 0.9 | |
| .input | |
| text-shadow: 0px 0px 8px rgba(0,0,0,0.3) | |
| width: 100% | |
| box-sizing: border-box | |
| outline: none | |
| user-select: all | |
| &::selection | |
| background-color: rgba(0,0,0,0.9) | |
| &::-moz-selection | |
| background-color: rgba(0,0,0,0.9) |