---json { "canonical": ":color:generator", "description": "A attractive color generator to pimp your design", "page_id": "aq2hq481vt52d737j80b4", "title": "Attractive Color generator" } --- ====== ComboStrap Styling - Color Generator ====== ===== About ===== While styling your design, the choice of [[color|colors]] is always primordial. This color generator will pimp your design by generating random attractive color based on [[https://randomcolor.lllllllllllllllll.com/|random Color]] ===== Generator =====


.swatch {
            display: inline-flex;
            border-radius: 50%;
            margin: 1rem;
            padding: 1rem;
            height: 5rem;
}

.text {
            display: flex;
            margin: auto;
            align-self: center;
}


let generateColors = function (event) {
    // to stop the submit process and to not get a 404
    event.preventDefault();
    // debugger;
    // delete the content
    let output = document.querySelector("output");
    while (output.firstChild) {
        output.firstChild.remove()
    }
    let form = event.target;

    // https://github.com/davidmerfield/randomColor#options
    let hue = form.hue.value;
    let count = form.count.value;
    let luminosity = form.luminosity.value;
    let seed = form.seed.value;
    let format = form.format.value;
    let alpha = form.alpha.value;
    let config = {
        hue: hue,
        count: count,
        luminosity: luminosity,
        seed: seed,
        format: format,
        alpha: alpha,
    };
    output.insertAdjacentHTML("beforeend",
        `The colors were generated with the following parameters:

Hue ${hue} Luminosity ${luminosity}
Count ${count} Seed ${seed}
Format ${format} Alpha ${alpha}
`
    );
    randomColor(config).forEach(color => {
        output
            .insertAdjacentHTML(
                'beforeend',
                '' + color + ''
            );
    });
}


window.onload = function () {

    // Submit with default value to see the color colors
    document.forms[0].requestSubmit();

    // Attach change event on radio button
    document.getElementsByName("hue-type").forEach(
        element => {
            element.addEventListener("click", function (event) {
                let value = event.target.value;
                let select = document.getElementById("color-hue-name");
                let hex = document.getElementById("color-hue-hex");
                switch (value) {
                    case "name":
                        select.parentElement.className = "dropdown bootstrap-select align-self-center d-flex";
                        select.setAttribute("form","color-generator");
                        hex.className = "d-none";
                        hex.removeAttribute("form");
                        break;
                    case "hex":
                        select.parentElement.className = "d-none";
                        select.removeAttribute("form");
                        hex.className = "align-self-center d-flex p-0 m-0";
                        hex.setAttribute("form","color-generator");
                        break;
                }
            })
        }

    );
};

Hue	${hue}	Luminosity	${luminosity}
Count	${count}	Seed	${seed}
Format	${format}	Alpha	${alpha}


    
        
            Color Value
            
                
                Name (Color Name)
            
            
                
                Hex (Hexadecimal Color, ex #00FFFF)
            
        
        
            
            
        
    
    
        
            Color Luminosity
            
                
            
        
        
            Color Count
            
                
            
        
        
            Random Seed (Integer or string)
            
                
            
        
        
            
                
                    Color Alpha 

                    (A decimal between 0 and 1)
                
            
            
                
            
        
        
            Color Format Output

===== Documentation / Reference ===== * The color generation engine is [[https://github.com/davidmerfield/randomColor|randomColor generator]]