How to Change Element Color Based on Color Picker Value?

Last Updated : 10 Oct, 2024

Changing an element's color based on the color picker's value involves using a color input element to select a color, and then, upon clicking a button or triggering an event, updating the target element's background or text color to match the selected color.

Approach

HTML Structure:
- Structure: Includes a color input and paragraphs to change text color dynamically using JavaScript.
- Color Picker: The <input type="color"> element allows selecting colors, with an initial default value.
JavaScript Logic
- Initialization: On page load, set up the color picker and add event listeners for changes.
- Update Single Element: updateFirst changes the first paragraph's color based on the color picker's value.
- Update All Elements: updateAll changes all paragraphs' colors when the color value changes.

Example: Here we are following above-explained approach.

html

<!DOCTYPE html> <html> <head> <title> change an element color based on value </title> </head> <body> <p>GeeksforGeeks</p> <label for="colors">Color:</label> <input type="color" value="#ff0000" id="colors" /> <p>A Computer Science Portal For Geeks.</p> <script>  let colors;  let defaultColor = "#0000ff";  window.addEventListener("load", startup, false);  function startup() {  colors = document.querySelector("#colors");  colors.value = defaultColor;  colors.addEventListener("input", updateFirst, false);  colors.addEventListener("change", updateAll, false);  colors.select();  }  function updateFirst(event) {  let p = document.querySelector("p");  if (p) {  p.style.color = event.target.value;  }  }  function updateAll(event) {  document.querySelectorAll("p").forEach(function (p) {  p.style.color = event.target.value;  });  }  </script> </body> </html>