PostSparrow

Html Code

<input type="color" id="colorpicker" name="color" class="select_color" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" value="#bada55"> 

<input type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" value="#bada55" id="hexcolor"></input>

Javascript Code

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

<script>
$('#colorpicker').on('input', function() {
  $('#hexcolor').val(this.value);
});
$('#hexcolor').on('input', function() {
  $('#colorpicker').val(this.value);
});
</script>