Hello.
1. Add an option with option type INPUT and initial value #ffffff
2. Create an HTML block with the next code and add it to the Footer Top section of the Product Page Layout
<script type="text/javascript">
$( window ).on( "load", function() {
$('input[type=text][value^="#"]').each(function() {
$(this).prop('type', 'color');
})});</script>