मैं उपयोगकर्ता इनपुट टेक्स्ट को उनके द्वारा चुने गए रंग में कैसे प्रदर्शित करूं?

// Always useful to cache the elements first
const message = document.querySelector('#message');
const button = document.querySelector('button');
const color = document.querySelector('#color');
const userSign = document.querySelector('#user-sign');

// Add a listener to the button
button.addEventListener('click', changeColor, false);

// Add the value of the message as text to the user-sign
// div, and then change the colour
function changeColor() {
  userSign.textContent = message.value;
  userSign.style.color = color.value;
}

input { display: block; margin-bottom: 1em; }

<label for="message">Message</label>
<input type="text" id="message" />

<label for="color">Color: </label>
<input type="color" id="color" />

<button>Make a change</button>

<p id="user-sign"></p>

// Declare your DOM variables just once.
let message = document.getElementById('message');
let sign = document.getElementById('user-sign');

// Wire up events using .addEventListener(), not legacy event properties.
document.getElementById('button').addEventListener("click", function (){
    // Don't use .innerHTML when there is no HTML in the string
    sign.textContent = message.value;
});

// When the color input value changes....
document.getElementById("color").addEventListener("change", function(){
  // Change the color of the input
  message.style.backgroundColor = this.value;
});

<label for="message"></label>
    <input type="text" class="message" id="message">

    <label for="color">Color: </label>
    <input type="color" class="color" id="color">

    <input type="button" id="button" value="Make a change">

    <p class="user-sign" id="user-sign"></p>