HTML Demo: <input type="color">

<fieldset>
    <legend>Choose some monster colors</legend>

    <div>
        <input type="color" id="head" name="color"
               value="#e66465" />
        <label for="head">Head</label>
    </div>

    <div>
        <input type="color" id="body" name="color"
               value="#f6b73c" />
        <label for="body">Body</label>
    </div>

    <div>
        <input type="color" id="feet" name="color"
               value="#3f87a6" />
        <label for="feet">Feet</label>
    </div>

</fieldset>

legend {
    background-color: #000;
    color: #fff;
    padding: 3px 6px;
}

.output {
    font: 1rem 'Fira Sans', sans-serif;
}

input {
    margin: .4rem;
}

Output