In web forms, allowing users to select a color is common in design tools or customization interfaces. However, manually entering hexadecimal color codes isn’t intuitive for users.
This is where a color picker UI becomes useful. It significantly improves usability by enabling users to visually select colors.
In this article, we’ll show you how to display a color picker in an input field using the lightweight and simple jQuery plugin “farbtastic.js”. We’ll explain how to implement it step-by-step with actual HTML, CSS, and JavaScript code examples, making it easy for beginners to follow.
CSS to Display a Color Picker in an Input Field
*Prepare the images for the color picker (wheel.png, marker.png, mask.png) under .farbtastic .wheel, .farbtastic .overlay, and .farbtastic .marker. Adjust as needed.
<style type="text/css">
...
</style>
JavaScript to Display a Color Picker in an Input Field Using farbtastic.js
*Load the jquery.js and farbtastic.js files. Use $(‘color picker area’).farbtastic(‘hex color input field’) to link the selected hex color to the input field.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="farbtastic.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#picker').farbtastic('#color');
});
</script>
HTML to Display a Color Picker in an Input Field
*Prepare a color picker area (id=”picker”) and a hex color input field (id=”color”). Adjust as needed.
<h1>Display a color picker in an input field using farbtastic.js.<br>Click and drag on the color picker below.</h1>
<div class="cbox">
<div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div>
</div>
Demo Page: Color Picker in Input Field Using farbtastic.js
Demo Page: Color Picker in Input Field Using farbtastic.js
Source: Farbtastic Color Picker
Here is the original source:
Farbtastic Color Picker
Summary
In this article, we introduced how to display a color picker in an input field using farbtastic.js.
- Define the display area and styles with CSS
- Place an input field linked to the color picker in HTML
- Initialize farbtastic with JavaScript and link selected colors to the input
By following these steps, you can easily add an intuitive color picker UI with minimal code.
farbtastic.js is simple to configure, lightweight, and highly functional, making it ideal for small websites and customization screens.
Try using it as an interface to enhance your design flexibility!
*If you reuse the code, please do so at your own risk.
Do not copy the Google Analytics tag in the head section of the demo page.
