Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }
        input[type="color"] {
	        -webkit-appearance: none;
	        border: none;
	        width: 64px;
	        height: 64px;
        }
    </style>
    <title>Document</title>
    <script>
        function sum() {
            let first = document.getElementById("c1").value.substring(1);
            let second = document.getElementById("c2").value.substring(1);
            document.getElementById("c3").value = "#"+addHexColor(first,second);
        }
        function addHexColor(c1, c2) {
            let first = parseInt(c1,16);
            let second = parseInt(c2,16);
            var hexStr = (first+second).toString(16);
            while (hexStr.length < 6) { hexStr = '0' + hexStr; } // Zero pad.
            return hexStr;
        }
    </script>
</head>

<body>
    <input name="Color Picker" type="color" id="c1">
    +
    <input name="Color Picker" type="color" id="c2">
    =
    <input name="Color Picker" type="color" id="c3">
    <input type="button" onclick="sum()" value="calc">
</body>

</html>