A Pen by Andreas Borgen

Thumbnail
This awesome code was written by Sphinxxxx, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Sphinxxxx ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Andreas Borgen</title>
  
  
  
  
  
</head>

<body>

  Code golf: Color names serialization (see console for output)
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Sphinxxxx/a-pen-by-andreas-borgen-ZoVdrg */
console.clear();

const colors = {
  "aliceblue": "#f0f8ff",
  "antiquewhite": "#faebd7",
  "aqua": "#00ffff",
  "aquamarine": "#7fffd4",
  "azure": "#f0ffff",
  "beige": "#f5f5dc",
  "bisque": "#ffe4c4",
  "black": "#000000",
  "blanchedalmond": "#ffebcd",
  "blue": "#0000ff",
  "blueviolet": "#8a2be2",
  "brown": "#a52a2a",
  "burlywood": "#deb887",
  "cadetblue": "#5f9ea0",
  "chartreuse": "#7fff00",
  "chocolate": "#d2691e",
  "coral": "#ff7f50",
  "cornflowerblue": "#6495ed",
  "cornsilk": "#fff8dc",
  "crimson": "#dc143c",
  "cyan": "#00ffff",
  "darkblue": "#00008b",
  "darkcyan": "#008b8b",
  "darkgoldenrod": "#b8860b",
  "darkgray": "#a9a9a9",
  "darkgreen": "#006400",
  "darkgrey": "#a9a9a9",
  "darkkhaki": "#bdb76b",
  "darkmagenta": "#8b008b",
  "darkolivegreen": "#556b2f",
  "darkorange": "#ff8c00",
  "darkorchid": "#9932cc",
  "darkred": "#8b0000",
  "darksalmon": "#e9967a",
  "darkseagreen": "#8fbc8f",
  "darkslateblue": "#483d8b",
  "darkslategray": "#2f4f4f",
  "darkslategrey": "#2f4f4f",
  "darkturquoise": "#00ced1",
  "darkviolet": "#9400d3",
  "deeppink": "#ff1493",
  "deepskyblue": "#00bfff",
  "dimgray": "#696969",
  "dimgrey": "#696969",
  "dodgerblue": "#1e90ff",
  "firebrick": "#b22222",
  "floralwhite": "#fffaf0",
  "forestgreen": "#228b22",
  "fuchsia": "#ff00ff",
  "gainsboro": "#dcdcdc",
  "ghostwhite": "#f8f8ff",
  "gold": "#ffd700",
  "goldenrod": "#daa520",
  "gray": "#808080",
  "green": "#008000",
  "greenyellow": "#adff2f",
  "grey": "#808080",
  "honeydew": "#f0fff0",
  "hotpink": "#ff69b4",
  "indianred": "#cd5c5c",
  "indigo": "#4b0082",
  "ivory": "#fffff0",
  "khaki": "#f0e68c",
  "lavender": "#e6e6fa",
  "lavenderblush": "#fff0f5",
  "lawngreen": "#7cfc00",
  "lemonchiffon": "#fffacd",
  "lightblue": "#add8e6",
  "lightcoral": "#f08080",
  "lightcyan": "#e0ffff",
  "lightgoldenrodyellow": "#fafad2",
  "lightgray": "#d3d3d3",
  "lightgreen": "#90ee90",
  "lightgrey": "#d3d3d3",
  "lightpink": "#ffb6c1",
  "lightsalmon": "#ffa07a",
  "lightseagreen": "#20b2aa",
  "lightskyblue": "#87cefa",
  "lightslategray": "#778899",
  "lightslategrey": "#778899",
  "lightsteelblue": "#b0c4de",
  "lightyellow": "#ffffe0",
  "lime": "#00ff00",
  "limegreen": "#32cd32",
  "linen": "#faf0e6",
  "magenta": "#ff00ff",
  "maroon": "#800000",
  "mediumaquamarine": "#66cdaa",
  "mediumblue": "#0000cd",
  "mediumorchid": "#ba55d3",
  "mediumpurple": "#9370db",
  "mediumseagreen": "#3cb371",
  "mediumslateblue": "#7b68ee",
  "mediumspringgreen": "#00fa9a",
  "mediumturquoise": "#48d1cc",
  "mediumvioletred": "#c71585",
  "midnightblue": "#191970",
  "mintcream": "#f5fffa",
  "mistyrose": "#ffe4e1",
  "moccasin": "#ffe4b5",
  "navajowhite": "#ffdead",
  "navy": "#000080",
  "oldlace": "#fdf5e6",
  "olive": "#808000",
  "olivedrab": "#6b8e23",
  "orange": "#ffa500",
  "orangered": "#ff4500",
  "orchid": "#da70d6",
  "palegoldenrod": "#eee8aa",
  "palegreen": "#98fb98",
  "paleturquoise": "#afeeee",
  "palevioletred": "#db7093",
  "papayawhip": "#ffefd5",
  "peachpuff": "#ffdab9",
  "peru": "#cd853f",
  "pink": "#ffc0cb",
  "plum": "#dda0dd",
  "powderblue": "#b0e0e6",
  "purple": "#800080",
  "rebeccapurple": "#663399",
  "red": "#ff0000",
  "rosybrown": "#bc8f8f",
  "royalblue": "#4169e1",
  "saddlebrown": "#8b4513",
  "salmon": "#fa8072",
  "sandybrown": "#f4a460",
  "seagreen": "#2e8b57",
  "seashell": "#fff5ee",
  "sienna": "#a0522d",
  "silver": "#c0c0c0",
  "skyblue": "#87ceeb",
  "slateblue": "#6a5acd",
  "slategray": "#708090",
  "slategrey": "#708090",
  "snow": "#fffafa",
  "springgreen": "#00ff7f",
  "steelblue": "#4682b4",
  "tan": "#d2b48c",
  "teal": "#008080",
  "thistle": "#d8bfd8",
  "tomato": "#ff6347",
  "turquoise": "#40e0d0",
  "violet": "#ee82ee",
  "wheat": "#f5deb3",
  "white": "#ffffff",
  "whitesmoke": "#f5f5f5",
  "yellow": "#ffff00",
  "yellowgreen": "#9acd32"
};

const c2 = { };
for(var c in colors) {
    const name = c,
          hex = colors[c].match(/\w+/)[0],
          int = parseInt(hex, 16);
    //console.log('c', name, int, '\t//'+hex);
    c2[name] = int;
}
//console.log(Object.keys(c2).map(k => k + ':' + c2[k]).join(','));


//Source:
//  https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript-jquery
const hashers = [
    //function(name, base) {
    //    return name.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0).toString(base);
    //},
    function(name, base) {
        return [].reduce.call(name.replace('ey','ay'), (p, c) => (p << 2) + c.charCodeAt(0), 0).toString(base);
    },
    //function(name, base) {
    //    return name.split('').map(v=>v.charCodeAt(0)).reduce((a,v)=>a+((a<<7)+(a<<3))^v).toString(base);
    //},
    //function(name, base) {
    //    return (function(x) {
    //        var hash = 5381, i = x.length;
    //        while(i)
    //            hash = (hash * 33) ^ x.charCodeAt(--i)
    //        return hash >>> 0;
    //    })(name).toString(base);
    //},
    //function hashFnv32a(str, base) {
    //    var i, l,
    //        hval = 0x811c9dc5;
    //
    //    for (i = 0, l = str.length; i < l; i++) {
    //        hval ^= str.charCodeAt(i);
    //        hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24);
    //    }
    //    return (hval >>> 0).toString(base);
    //},
];
/*
hashers.forEach(hasher => {
    console.log(hasher('apekatt', 36));
    console.log(hasher('iskrem', 36));
});
hashers.forEach((hasher, hi) => {
    for(let b=2; b<=36; b++) {
        for(let s=-12; s<=12; s++) {

            let c3 = {}, coll = false;

            for(var c in colors) {
                const name = c,
                      hex = colors[c].match(/\w+/)[0];

                let hash = hasher(name, b);

                //Inspiration: https://codegolf.stackexchange.com/a/90178/29305
                hash = (hash).substr(s,3);

                const existing = c3[hash];
                if(existing && (existing.hex !== hex)) {
                    //console.log(`collision: ${hash}  (${existing.name} ${existing.hex}, ${name} ${hex})`);
                    coll = true;
                }

                c3[hash] = {
                    name: name,
                    hex: hex,
                }
            }
            
            //console.log('Collisions', coll);
            if(!coll) {
                console.log('!c', hi, b, s);
            }

        }
    }
});
//*/


let c3 = {};
for(var c in colors) {
    const name = c,
          hex = colors[c].match(/\w+/)[0];
    
    //const hashname = name.replace('dark', 'D').replace('light', 'L').replace('medium', 'M').replace('pale', 'P'),
    //      hash = hashname[0] + hashname[1] + hashname[hashname.length-1] + name.length.toString(36);
    const hash = [].reduce.call(name.replace('ey','ay'), (p, c) => (p << 2) + c.charCodeAt(0), 0)
                            .toString(36).slice(-3);
    
    const existing = c3[hash];
    if(existing && (existing.hex !== hex)) {
        console.log(`collision: ${hash}  (${existing.name} ${existing.hex}, ${name} ${hex})`);
    }

    c3[hash] = {
        name: name,
        hex: hex,
    }
}
console.log('hs', /*JSON.stringify*/(c3));
const stored3 = Object.keys(c3).map(k => {
    const hash = k,
          hex = c3[k].hex,
          //hexSer = ('    ' + parseInt(hex, 16).toString(36)).substr(-5);
          hexSer = btoa( hex.match(/../g).map(x => String.fromCharCode(parseInt(x, 16))).join('') );
    return hash +''+ hexSer;
}).join('');
console.log('s3', Object.keys(c3).length, stored3.length, stored3);


//function parseColor() {

//const ser = 'ale99ehhbanec9sgk7aqa4 1ekfaqea4zsnoaze59eiv3bee59lhp8bie69zg04blk5    0blde9zhe5ble4   73blta5e31ebrn56g016bud98ouivcae93qba8chea4zshsche987k0ucol59yvyocoee3xaelcok89zjz0crn78l4xocyn4 1ekfDbe8   3vDcn8  rkbDgdd776yzDgy86mbhlDgn9  jr4Dki97ehkbDmab5f91nDone3bzfzDoea9yygwDoda5z6x8Drd75f8xsDsna9441mDsnc5lwgfDsed2th1nDsyd1ugcvDted 14upDvta5rw7ndek89yavndeeb 11xbdiy7442g9doea16xoffik96y7tufleb9zkdsfonb1cisifua79y70fgao98m8kcghea9pq0vgod49zda8god98j4f4gry450i2ogrn5  pa8grwb6senjhow89eiuohok79yrp0ind980gnwino62xcoyivy59zldckhi59edu4lar890c8qlahd9zietlan94vk74lenc9zkctLbe96s73aLcla9dtogLcn98s1rzLgwk9sjiqLgy989jo3Lgna5nkwgLpk99z6wxLsnb9z2iiLsnd19xgqLsec5arjuLsye4nwk9Lsee6wau6Lywb9zlcwlie4 1edclin91zcxelin59shk6maa79y70fman64zsowMaeg40ejuMbea   5pModc79qkzMpec5r3rvMsne2d9ipMsef4tckuMsnh 1di2Mtef2uabwMvdf7rn9hmiec z980mim99ljp6mie99zg0xmon89zfzpnaeb9zestnay4   3kole79wq92ole550hz4olb9472ubore69z3eoord99ykg0ord68iu3aPgdd9bl4aPgn95yw0oPted6v4kuPvdd8k8lvpapa9zi6tpef99ze0ppeu480oqnpik49z8wbplm48nba5poea6wgdipue64zssgreed3zk49red39y6tcron97cv4froe92jvttsanb5fmkzsan69rvcisana9jn1csen81tdnbsel89zje6sia66973hsir67ir40ske75arjfsle945e4tsly94e100snw49zke2spnb 1egvste92r1kktan387yx8tel4  pdsthe78ggk8too69yqfbtue92j4r4vit69b10uwht59ld4jwhe59zldrwhea9lhpxyew69zl6oyenb61fzm';
//const ser = 'ale98Pj/anec+uvXaqa4AP//aqeaf//Uaze58P//bee59fXcbie6/+TEblk5AAAAblde/+vNble4AAD/bltaiivibrn5pSoqbud93riHcae9X56gcheaf/8Ache90mkecol5/39QcoeeZJXtcok8//jccrn73BQ8cyn4AP//Dbe8AACLDcn8AIuLDgdduIYLDgy8qampDgn9AGQADki9vbdrDmabiwCLDoneVWsvDoea/4wADodamTLMDrd7iwAADsna6ZZ6Dsncj7yPDsedSD2LDsydL09PDtedAM7RDvtalADTdek8/xSTdeebAL//diy7aWlpdoeaHpD/fik9siIifleb//rwfonbIosifua7/wD/gao93Nzcghea+Pj/god4/9cAgod92qUggry4gICAgrn5AIAAgrwbrf8vhow88P/whok7/2m0ind9zVxcino6SwCCivy5///wkhi58OaMlar85ub6lahd//D1lan9fPwAlenc//rNLbe9rdjmLcla8ICALcn94P//Lgwk+vrSLgy909PTLgnakO6QLpk9/7bBLsnb/6B6LsndILKqLsech876Lsyed4iZLseesMTeLywb///glie4AP8Alin9Ms0ylin5+vDmmaa7/wD/man6gAAAMaegZs2qMbeaAADNModculXTMpeck3DbMsnePLNxMsefe2juMsnhAPqaMtefSNHMMvdfxxWFmiecGRlwmim99f/6mie9/+Thmon8/+S1naeb/96tnay4AACAole7/fXmole5gIAAolb9a44jore6/6UAord9/0UAord62nDWPgdd7uiqPgn9mPuYPtedr+7uPvdd23CTpapa/+/Vpef9/9q5peu4zYU/pik4/8DLplm43aDdpoeasODmpue6gACAreedZjOZred3/wAAron9vI+Proe9QWnhsanbi0UTsan6+oBysana9KRgsen8LotXsel8//Xusia6oFItsir6wMDAske7h87rsle9alrNsly9cICQsnw4//r6spnbAP9/ste9RoK0tan30rSMtel4AICAthe72L/Ytoo6/2NHtue9QODQvit67oLuwht59d6zwhe5////whea9fX1yew6//8Ayenbms0y';
const ser = '735AACA770//Xub218Pj/mo5+uvX6mdAP//gtpf//Ur258P//q1d9fXcxop/+TEq9zAAAAqfg/+vN6m1AAD/ngoiiviqt6pSoqzyo3riHxvdX56grk1f/8Aax10mkeqts/39QxbtZJXttkb//jcyxm3BQ86rmAP//wl5AACLwqqAIuL3y8uIYLwv1qampniqAGQAwvhqampns5vbdrmohiwCLw5uVWsvsdd/4wAsegmTLMqagiwAAsqi6ZZ6uz6j7yPxtzSD2Lxk3L09PxjnL09PudbAM7RwsolADT0kz/xSTfuhAL//vfhaWlpvfxaWlpyuxHpD/43rsiIiwn9//rw39uIosi9bp/wD/6w73Nzc9s5+Pj/6v8/9cA3b42qUg6vxgICArmaAIAAtdfrf8v6wdgICAg238P/wek3/2m0xnczVxc3bvSwCCsdt///wrvp8OaMs5i5ub6iyk//D1e8ifPwAoui//rNpyxrdjmw9c8ICAq4i4P//mx9+vrSq8t09PTx1ukO6Qq9909PTqlv/7bBuuy/6B690uILKqpfdh876sd9d4iZsdpd4iZnehsMTe0dv///g71lAP8A4nmMs0ys9u+vDmg9d/wD/4pmgAAAcurZs2qzllAADN4lkulXT6txk3Db66qPLNxozre2juokuAPqalj3SNHMgdkxxWF60pGRlwxfl9f/6hr5/+Thx6q/+S1m85/96tutd/fXmszxgIAAe4ma44j8rl/6UAmu0/0UA8so2nDWji87uiqumqmPuY9xbr+7u4rs23CTsb8/+/V95a/9q577xzYU/78z/8DL7b53aDdsu1sODmb11gACAy5nZjOZ1so/wAAlvevI+Pn09QWnhm7ui0UT94q+oBy7ei9KRg5aqLotXad5oFItasmwMDAaihh87r9fdalrN9p9cICQ9ppcICQ7gz//r6k5uAP9/4qhRoK01te0rSM7cwAICA91x2L/Yclr/2NHcw1QODQd6w7oLuua09d6zudh////t359fX1enn//8Ao0ims0y';
let  deser;
function parseColor(name) {
    if(!deser) {
        deser = {};
        //ser.match(/.{9}/g).forEach(x => deser[x.slice(0, 4)] = ('00000' + parseInt(x.slice(-5), 36).toString(16)).slice(-6));
        //ser.match(/.{8}/g).forEach(x => deser[x.slice(0, 4)] = atob(x.slice(-4)).split('').map(b => ('0' + b.charCodeAt(0).toString(16)).slice(-2)).join(''));
        ser.match(/.{7}/g).forEach(x => deser[x.slice(0, 3)] = atob(x.slice(-4)).split('').map(b => ('0' + b.charCodeAt(0).toString(16)).slice(-2)).join(''));
    }
    let hash = [].reduce.call(name, (p, c) => (p << 2) + c.charCodeAt(0), 0)
                            .toString(36).slice(-3);
    return deser[hash];
}

//return parseColor;}


/* Test the final parser */
for(var c in colors) {
    const parsed = parseColor(c),
          real = colors[c];
    if(('#'+parsed) !== real) {
        console.log(parsed, real, c);
    }
}

Comments