Dynamically Change Background Color Based On User Input - colorField.js

colorfield.js is a jQuery plugin that automatically changes the background color of a color block or the input field itself based on the color code entered by the user in the input field.

Supports HEX, RGB(a), and HSL(a) color formats. Dual licensed under the GPL and MIT.

How to use it:

1. Download and place the JavaScript file jquery.colorfield.js after jQuery library.

<script src="jquery.min.js"></script>
<script src="jquery.colorfield.js"></script>

2. Create a color input and define the init color in the value attribute.

<input id="color" type="text" name="color" value="#222" />

3. Initialize the plugin on the color input and done. This will generate a block element that automatically changes the background color based on the user input.

$(function(){
  $("#color").colorfield();
});

4. Determine whether to show the color block on init. Default: false.

$(function(){
  $("#color").colorfield({
    autoInit: true
  });
});

5. Style the color block whatever you like.

span.hasColorField{
  padding: 0px 10px 0px 10px;
  margin: 2px;
}

6. Enable the plugin to automatically change the background color of the input field based on the user input.

$(function(){
  $("#color").colorfield({
    showColor: false, 
    colorField: true
  });
});

---

This awesome jQuery plugin is developed by marcusbecker. For more Advanced Usages, please check the demo page or visit the official website.