Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A tiny script which can be pasted into the console at https://coolers.co to create a listing of all the generated color shades.
let allColors = [[], [], [], [], []]
$('.palette-shades-row').each((i, thisRow) => {
$(thisRow)
.find('.palette-shades-col')
.each((j, thisCol) => {
allColors[j].push('#' + $(thisCol).data('color'))
})
})
allColors.map((thisArray, i) => {
const colorInfo = $('#colors')
.find('.color')
.eq(i)
.find('.color-info')
const name = colorInfo.find('.color-info-name').html()
const rgb = colorInfo.find('.color-info-rgb').html()
const hsv = colorInfo.find('.color-info-hsv').html()
const cmyk = colorInfo.find('.color-info-cmyk').html()
const hex = colorInfo
.parent()
.find('.hex input')
.val()
let thisColorTicker = -10
console.groupCollapsed(
'%c' + name + ': ' + hex,
'background-color: ' +
hex +
'; color: white; text-shadow: 1px 1px 0 black, 1px 1px 0 white; padding: 3px 5px;'
)
console.log('(RGB): ' + rgb)
console.log('(HSV): ' + hsv)
console.log('(CMYK): ' + cmyk)
console.log('====================')
console.group(name + ' Shades');
thisArray.map((thisColor, j) => {
console.log(
thisColor + ': %c %c (' + thisColorTicker + ')',
'background-color: ' +
thisColor +
'; color: white; text-shadow: 1px 1px 0 black, 1px 1px 0 white; padding: 2px;',
''
)
thisColorTicker++
})
console.groupEnd();
console.groupEnd()
})
let allColors=[[],[],[],[],[]];$(".palette-shades-row").each((o,l)=>{$(l).find(".palette-shades-col").each((o,l)=>{allColors[o].push("#"+$(l).data("color"))})}),allColors.map((o,l)=>{const c=$("#colors").find(".color").eq(l).find(".color-info"),n=c.find(".color-info-name").html(),e=c.find(".color-info-rgb").html(),a=c.find(".color-info-hsv").html(),p=c.find(".color-info-cmyk").html(),r=c.parent().find(".hex input").val();let s=-10;console.groupCollapsed("%c"+n+": "+r,"background-color: "+r+"; color: white; text-shadow: 1px 1px 0 black, 1px 1px 0 white; padding: 3px 5px;"),console.log("(RGB): "+e),console.log("(HSV): "+a),console.log("(CMYK): "+p),console.log("===================="),console.group(n+" Shades"),o.map((o,l)=>{console.log(o+": %c %c ("+s+")","background-color: "+o+"; color: white; text-shadow: 1px 1px 0 black, 1px 1px 0 white; padding: 2px;",""),s++}),console.groupEnd(),console.groupEnd()});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment