Best jQuery Color Picker Plugins & Tutorials with Demo

Huebee : JavaScript One-click color picker

Huebee : JavaScript One-click color picker

Huebee is a JavaScript library for creating user-centric color pickers. Huebee displays a limited set of colors so users view all colors at a glance, make clear decisions, and select a color with a single click.

Color Picker plugin in pure JavaScript

Color Picker plugin in pure JavaScript

A simple color picker plugin in pure JavaScript, for modern browsers.

Colorpanel : jQuery CSS File Switcher

Colorpanel : jQuery CSS File Switcher

Simple jQuery plugin to switch css stylesheet skin theme on your template demo.

jQuery Palette Color Picker

jQuery Palette Color Picker

JS component to pick colors from a predefined / restricted palette.The name attribute is used to bind the color picker to the input, so its recommended to be unique if you have several inputs with the same name, all of them will change simultaneously when user picks a color.

Colorbrewer : jQuery Bootstrap Colour Picker

Colorbrewer : jQuery Bootstrap Colour Picker

A simple bootstrap colour picker utilising the colorbrewer scales.

dynamicColorPage : jQuery Plugin to Change Color of Your Page

dynamicColorPage : jQuery Plugin to Change Color of Your Page

dynamicColorChange is a small jQuery plugin to give your users the opportunity to style your page as they want. All you have to do, is, to define a couple of selectable colors and include a button with the class “color_changer-toggle” to toggle the color changer.

Bootstrap Colorpicker Plus : jQuery Plugin

Bootstrap Colorpicker Plus : jQuery Plugin

A Twitter Bootstrap component basically adds a color picker to a field or any other element, even embed to the page or dropdown menu.

  • common color panel
  • custom your favor color
  • the bootstrap-colorpicker integrated

Colorify.js : Tiny JavaScript Color Extractor

Colorify.js : Tiny JavaScript Color Extractor

Colorify is a script written in Javascript, that allows you to extract colors from images, and manipulates them. From a simple plain color, based on the dominant color, to a beautiful gradient based on the image edges colors, colorify.js will spice up your designs!

  • Extract the dominant color from an image
  • Generate gradients based on the images colors
  • Isolate colors and manipulates them everywhere in the page
  • Create a Lazy-revealer system for your images
  • Load image dynamically

Cohesive Colors Tool

Cohesive Colors Tool

A tool for creating more cohesive color schemes. Pick a bunch of random colors that you like and add a touch of magic.

Color Extraction Effect with CSS Filters

Color Extraction Effect with CSS Filters

Today we’d like to share a fun little color extraction experiment with you. The idea is to create a color palette from an image with a subtle effect on the image itself and some fanciness on the palette. We are using Vibrant.js by Jari Zwarts to extract the colors from the images, and CSS Filters to transition the image to a black and white version. We also implemented a simple slider with a special “curtain” effect.