Collection of free jQuery color picker code examples

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

ColorsPicker

ColorsPicker

Author:
Armin Mehraeen | January 31, 2021
Made with:
HTML / CSS / JS

About a code

Amazing colors picker using HTML, CSS, jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Color Picker

Author:
Oleg Frolov | August 15, 2016
Made with:
HTML (Pug) / CSS (Stylus) / JS (CoffeeScript)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Color Picker Web App Design

Author:
Anthony DAlessio | January 19, 2014
Made with:
HTML / CSS / JS

About a code

Simple color picking web app in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css

Color Picker

Author:
Dmitri Voronianski | June 21, 2012
Made with:
HTML / CSS / JS

About a code

Easy color picker with jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Very Simple jQuery Color Picker

Very Simple jQuery Color Picker

Author:
Tanguy Krotoff | August 10, 2008
Made with:
374 stars24 watchers

About a code

Yet another jQuery color picker. This plugin is unobtrusive and integrates well with Twitter Bootstrap (it works just fine without). The source code only requires jQuery and is about 200 lines of JavaScript and 100 lines of CSS.

Colpick Color Picker

Colpick Color Picker

Author:
Jose Vargas | August 27, 2013
Made with:
287 stars22 watchers

About a code

Colpick is a simple Photoshop-style color picker jQuery plugin. It's interface is familiar for most users and it's also very lightweight loading less than 30 KB to the browser.

Pick-a-Color: A jQuery Color Picker For Twitter Bootstrap

Pick-a-Color: A jQuery Color Picker For Twitter Bootstrap

Author:
Lauren | November 22, 2012
Made with:
245 stars23 watchers

About a code

There are some great color picker plugins out there, but most cater to the needs of techies and designers, providing complicated controls to access every color imaginable.

About a code

Pick-a-Color is designed to be easy for anyone to use. The interface is based on Twitter Bootstrap styles so it looks lovely with the styles of almost any site.

TinyColorPicker

TinyColorPicker

Author:
Peter Dematté | February 2, 2015
Made with:
236 stars15 watchers

About a code

Looking for mobile first, tiny foot print, fast, scaleable, flexible, pluggable and a rich color model... This small (5.07KB gZip, 11.39KB minified, no extra HTML, images or css needed) HSB colorpicker is based on a subset of colors.js from it's big brother colorPicker for a precise and rich color model, supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins or extend the UI.

Really Simple Color Picker

Really Simple Color Picker

Author:
Lakshan Perera | October 27, 2008
Made with:
177 stars11 watchers

About a code

This is a very minimal, yet robust color picker based on jQuery.

JQuery Palette Color Picker

JQuery Palette Color Picker

Author:
Carlos Cabo | January 3, 2016
Made with:
60 stars7 watchers

About a code

JS component to pick colors from a predefined/restricted palette.

Small Color Picker

Small Color Picker

Author:
antelle | May 18, 2013
Made with:
15 stars3 watchers

About a code

SmallColorPicker is a tiny jQuery color picker. Also the project includes buttons styles for color selection.

ColorPick.js

ColorPick.js

Author:
Phil Zet | January 21, 2017
Made with:
8 stars2 watchers

About a code

ColorPick.js is a simple and minimal jQuery color picker plugin for the modern web.

Video Color Picker

Video Color Picker

Author:
wendychengc | November 23, 2017
Made with:
1 stars1 watchers

About a code

A tool to pick up the Color Value within any frame from a HTML5 Video. Support both Vue.js and jQuery.

About a code

Noticed that your video resource host need to allow CORS, otherwise you cannot use getPixelColor on your canvas, and the project won't work.

Colpick RemiX

Colpick RemiX

Author:
Salvatore Peluso | October 4, 2017
Made with:
1 stars0 watchers

About a code

Photoshop-like jQuery color picker plugin with various skins and layouts, touch, and responsive.

Colorpickle

Colorpickle

Author:
Hape Haavikko | April 21, 2017
Made with:
0 stars0 watchers

About a code

Colorpickle is a free color picker plugin for jQuery. While the support for color input type is getting better all the time, not all browsers support it and most native browser and OS color pickers are pretty crappy. Colorpickle to the rescue!

Purty Picker

Purty Picker

About a code

A super lightweight visual HSL, RGB and hex color picker with a responsive, touch-friendly and customizable UI. Compatible with jQuery or Zepto.

Wheel Color Picker Plugin For jQuery

Wheel Color Picker Plugin For jQuery

About a code

The Wheel Color Picker plugin adds color picker functionality to HTML input element in round color wheel style. The Wheel Color Picker can be displayed as a popup dialog as users focus the input, or embedded inline.

jQuery asColorPicker

jQuery asColorPicker

About a code

A jQuery plugin that convent input into color picker.

wColorPicker.js

wColorPicker.js

About a code

A jQuery color picker plugin with various effects for showing and hiding the color picker. Also comes with an option to set a clickable button to trigger effects.

Simple Color Picker

Simple Color Picker

About a code

A simple color picker jQuery plugin that appears as the user focuses the input.

jQuery Simple Color

jQuery Simple Color

About a code

jQuery Simple Color is a very simple color-picker plugin that displays a square grid of selectable colors. I found a lot of the other color-picker plugins quite heavy, so I ended up writing this to provide a dead-simple alternative. The list of colors it uses can be customized, and the layout size etc can be configured to a certain extent.

Colorwheel

Colorwheel

About a code

A JavaScript color picker. The wheel is drawn using the Raphael.js library. jQuery is used to assist with events. The wheel size is set on creation. It supports a small set of callbacks and touch events.

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨