Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Overview

Bootstrap Colorpicker

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4.

Build Status npm

THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10 years, it won't receive any further update. I recommend you using more modern solutions like React Color. You are still free to adapt this project and create forks and variants of it.

Install

You can get the latest version in many different ways:

  • Downloading the tarball from npm the registry: https://registry.npmjs.org/bootstrap-colorpicker/-/bootstrap-colorpicker-3.4.0.tgz (you can change the version in the url to any released tag)
  • Cloning using Git: git clone https://github.com/itsjavi/bootstrap-colorpicker.git
  • Installing via NPM: npm install bootstrap-colorpicker
  • Installing via Yarn: yarn add bootstrap-colorpicker
  • Installing via Composer: composer require itsjavi/bootstrap-colorpicker

Note that the dist files are only distributed via the NPM and Yarn installations.

For the rest methods, you will need to generate the files initializing the project with yarn install and then building the code using npm run build.

Versions

Colorpicker version Compatible Bootstrap version Dependencies
v2.x
Documentation
Bootstrap 3 or 4
  • jQuery >= 1.10
  • Bootstrap CSS (input addon)
v3.x
Documentation
Bootstrap 4 or without Bootstrap
  • jQuery >= 2.1.0
  • Bootstrap CSS (input addon, popover)
  • Bootstrap JS Bundle (popover)

Note that the plugin may work without Bootstrap if your code is not using any of the mentioned Bootstrap dependencies.

Examples

With Bootstrap

The Bootstrap JS dependency is optional and it is mainly needed for the popover support. No Bootstrap CSS is required for the plugin to work.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
  <div class="demo">
      <h1>Bootstrap Colorpicker Demo (with Bootstrap)</h1>
      <input id="demo-input" type="text" value="rgb(255, 128, 0)" />
  </div>
  <script src="//code.jquery.com/jquery-3.4.1.js"></script>
  <script src="//unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="dist/js/bootstrap-colorpicker.js"></script>
  <script>
    $(function () {
      // Basic instantiation:
      $('#demo-input').colorpicker();
      
      // Example using an event, to change the color of the #demo div background:
      $('#demo-input').on('colorpickerChange', function(event) {
        $('#demo').css('background-color', event.color.toString());
      });
    });
  </script>
</body>

Without Bootstrap

To use the plugin without Bootstrap, the popover option should be set to false or null and, depending on your implementation, you will usually need to set inline to true and a container selector option.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
  <div id="demo">
      <h1>Bootstrap Colorpicker Demo (without Bootstrap)</h1>
    <input type="text" value="rgb(255, 128, 0)" />
  </div>
  <script src="//code.jquery.com/jquery-3.4.1.js"></script>
  <script src="dist/js/bootstrap-colorpicker.js"></script>
  <script>
    $(function() {
      $('#demo').colorpicker({
        popover: false,
        inline: true,
        container: '#demo'
      });
    });
  </script>
</body>

Contributions

This project exists thanks to all the people who contribute.

Please read CONTRIBUTING before sending a pull request or issue.

License

The MIT License (MIT). Please see the License File for more information.

Credits

Written and maintained by Javi Aguilar and all other contributors.

Based on Stefan Petre's color picker (2013).

Thanks to JetBrains for supporting this project.

Comments
  • webpack error due to

    webpack error due to "jQuery" not being all lowercase

    require("jQuery") should be require("jquery")

    When using "jQuery" webpack throws the following error: "There are multiple modules with names that only differ in casing"

    This error occurs when you require other modules which also utilize jquery (i.e. jquery-ui)

    bug help wanted 
    opened by mikembm 32
  • Sliders not usable when color is black/white/gray/transparent

    Sliders not usable when color is black/white/gray/transparent

    When the initial (or user-selected) colour is black, white or grey the vertical colour slider does not work. It shows no current position, and clicking or dragging on it has no effect.

    This can be reproduced on the home page by entering "#000000" or "#FFFFFF" into one of the example fields: https://itsjavi.com/bootstrap-colorpicker/

    colorpicker-bug

    bug help wanted 
    opened by alexandervlpl 26
  • Remove # completely (input/output)

    Remove # completely (input/output)

    Hi there,

    Im building a phpBB theme with bootstrap and want to use this colorpicker, because its awesome :)

    The problem: phpBB outputs the hex value without the # and also expects the value to be 00000 instead of #00000.

    So is there any possibility?

    Thank you Zoker

    opened by TheZoker 18
  • Add typescript typings

    Add typescript typings

    opened by akankov 13
  • Do not update input field if user types in it

    Do not update input field if user types in it

    Description

    {Please write here}

    Context

    bootstrap-colorpicker version: 3.0.3

    Options: { format: 'hex', autoInputFallback: false }

    Expected behavior

    When I type a color, it should not update it at all. Input field should be updated only if I select a color with my mouse from the popup window.

    Actual behavior

    If I start typing #AAA it is replaced with #AAAAAA. If I try to push backspace to correct it, it always writes back a character.

    Live Example

    You can use your jsfiddle to check, replace the options with the above.

    feature request stale 
    opened by balazs-zsoldos 9
  • v3.0.0/colors (deprecated)

    v3.0.0/colors (deprecated)

    IMPORTANT: This Pull Request is deprecated, please use https://github.com/mjolnic/bootstrap-colorpicker/pull/158

    The next major release will be only compatible with Bootstrap 3.x and ECMAScript 5 browsers. It will integrate new features like palettes (with some useful predefined) and the fantastic TinyColor plugin that have a powerful color parser and generator. Take a look at the tinycolor branch.

    Features

    • TinyColor integration
    • Bootstrap Popover compatibility
    • No external background images are required (all UI use gradients for resize support)
    • Fully customizable LESS file
    • Palettes, with some useful predefined ones (triad', tetrad, monochromatic, analogous, complementary, lightness, lighten, darken, brighten, saturate, desaturate, mixed, or your custom colors array)
    • More reliable: v2 uses a 100px areas which cause some colors not to be selectable with enough precision, v3 uses 256px (the large version is a 65536 colors matrix, like photoshop) or 128px by default.

    TO-DO

    Re adapt v2 api:

    • [x] integrate bootstrap-popover-picker API
    • [x] Mouse events
    • [x] Input events / behaviours
    • [x] Picker events
    • [x] Inline mode
    • [x] Vertical mode
    • [x] Component mode
    • [x] Arrow position as an option
    • [x] Resolve opened issues for v2

    Other ideas

    • [x] Optional alpha bar? This may cause width issues with palettes.
    • [x] Vertical palette? Ability to replace the alpha bar with a palette?
    • [x] Implement optional ok/cancel buttons? This would be placed in the bottom as an horz. bar.
    • [x] Implement optional color preview (current/new)? (In the same bar as ok/cancel)

    Preview

    Here is a screenschot of the WIP development of Bootrstrap Colorpicker 3 ;)

    bootstrap-colorpicker 3 preview

    This pull request is related to #78

    feature request help wanted 
    opened by itsjavi 9
  • Add align option

    Add align option

    image

    It'd be nice to change the default alignment so that the color picker doesn't go offscreen if the element is aligned to the right edge of the browser (pictured above).

    feature request 
    opened by greypants 9
  • Allow users to manually type in values?

    Allow users to manually type in values?

    Am I missing something or does the latest version of the color picker not allow the user to manually type in a color value?

    It looks like this was allowed in older versions but now if I try to manually type in a hex value, the input field just immediately sets the value to what it was previously. I think this could be frustrating for users to be honest. Is there a setting to to disable this feature?

    won't fix 
    opened by unicornsoftwareinc 8
  • Nugget installation

    Nugget installation

    Hi Javier,

    First thanks for this great work ! Do you plan to provide an installation via Nugget ? There is one (https://www.nuget.org/packages/bootstrap-colorpicker/) but with a dependency on bootstrap ≥ 3.3.5 unlike your plugin which works with BS v2.

    Thanks in advance for your answer Lanz

    opened by LanzFR 8
  • With Bootstrap usage doesn't work with Bootstrap 5

    With Bootstrap usage doesn't work with Bootstrap 5

    Here's a minimal example, adapted from https://github.com/itsjavi/bootstrap-colorpicker#with-bootstrap, which yields the following error:

    https://codepen.io/cpsievert/pen/yLgzxqL

    Uncaught TypeError: Cannot read property 'tip' of undefined
        at PopupHandler.createPopover (PopupHandler.js:237)
        at PopupHandler.bind (PopupHandler.js:117)
        at Colorpicker.init (Colorpicker.js:200)
        at new Colorpicker (Colorpicker.js:161)
        at HTMLInputElement.<anonymous> (plugin.js:31)
        at Function.each (jquery-3.4.1.js:367)
        at jQuery.fn.init.each (jquery-3.4.1.js:202)
        at jQuery.fn.init._jquery2.default.fn.<computed> [as colorpicker] (plugin.js:24)
        at HTMLDocument.<anonymous> (yLgzxqL:55)
        at mightThrow (jquery-3.4.1.js:3557)
    

    (If you replace //unpkg.com/[email protected]/dist/js/bootstrap.bundle.js with //unpkg.com/[email protected]/dist/js/bootstrap.bundle.js in that codepen, things work fine)

    bug help wanted 
    opened by cpsievert 7
  • Fix https://github.com/farbelous/bootstrap-colorpicker/issues/272

    Fix https://github.com/farbelous/bootstrap-colorpicker/issues/272

    Description

    Change how jQuery is imported by webpack to fix https://github.com/farbelous/bootstrap-colorpicker/issues/272

    Check list

    Please fill this check list before submitting a pull request:

    • [x] The build process has been run (npm run build) and does not contain any errors.
    • [x] All tests are green after running npm run test.
    • [x] New tests have been added or modified for the introduced changes. (No test added, only an error on npm compilation have been fixed)
    • [x] New examples have been added for the newly introduced features. (No examples needed, only an error on npm compilation have been fixed)
    • [x] All the examples are still working as expected compared to the official website.
    • [x] This PR follows all other CONTRIBUTING.md guidelines for Pull Requests.
    opened by alfredopenaalonso 7
  • Fix deprecated division

    Fix deprecated division

    Description

    Fix deprecated division #336

    Check list

    Please fill this check list before submitting a pull request:

    • [x] The build process has been run (npm run build) and does not contain any errors.
    • [x] All tests are green after running npm run test.
    • [ ] New tests have been added or modified for the introduced changes.
    • [x] New examples have been added for the newly introduced features.
    • [x] All the examples are still working as expected compared to the official website.
    • [x] This PR follows all other CONTRIBUTING.md guidelines for Pull Requests.
    opened by simonschaufi 0
  •  [BUG] Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

    [BUG] Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

    Description

    Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
    
    Recommendation: math.div($size, 2) or calc($size / 2)
    
    More info and automated migrator: https://sass-lang.com/d/slash-div
    
       ╷
    13 │   background-position: 0 0, $size/2 $size/2;
       │                                     ^^^^^^^
       ╵
        node_modules/bootstrap-colorpicker/src/sass/colorpicker.scss 13:37  bgCheckerBox()
        node_modules/bootstrap-colorpicker/src/sass/colorpicker.scss 213:3  @import
    

    Context

    • bootstrap-colorpicker version: 2.4.0

    Expected behavior

    No deprecation warning

    Use instead

    Recommendation: math.div($size, 2) or calc($size / 2)

    bug 
    opened by simonschaufi 0
  • If, Browser window if zoom to 125% the colour picker doesn't work properly

    If, Browser window if zoom to 125% the colour picker doesn't work properly

    Hello

    I am facing a weird issue. I am using colour picker (v3.2.0) in my application which is build using Blazor Server. Its working fine but there is a specific case, when browser is zoomed to 125%, it somehow stops working. Kindly see the screen shots below.

    Zoom: 100% (Works fine) image

    Zoom: 125% (Selector gets stuck on upper left corner) image

    Zoom: 150% (Starts working again) image

    I am not able to understand why this is happening. Can you please help me with it.

    Regards Saad

    opened by saadsaeed01 0
  • Having the input hex value in lower case does not set the picker color

    Having the input hex value in lower case does not set the picker color

    Having the input hex value in lower case does not set the picker color

    • bootstrap-colorpicker version: 3.4.0
    • bootstrap version: 4.6
    • jQuery version: 3.5.1
    • Browser name and version: Any but tested in Chrome
    • Operative System name and version: Windows

    Expected behavior

    Color to match value in any case

    Actual behavior

    Color is #000000

    Now I understand I could force the case to upper before setting the input... but figure why since case is not an issue in hex colors on any browser

    bug 
    opened by johnreaume 0
  •  [BUG] popper.js deprecated

    [BUG] popper.js deprecated

    $ npm i bootstrap-colorpicker
    npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
    
    bug 
    opened by LocalHeroPro 0
Releases(3.4.0)
  • 3.4.0(Jun 4, 2021)

  • 3.3.0(Apr 23, 2021)

  • 3.2.0(Dec 4, 2019)

  • 3.1.2(May 10, 2019)

  • 3.1.1(Apr 2, 2019)

  • 3.0.3(Jul 27, 2018)

    • Improved guides UI
    • fix: colorpicker not working after emptying the input
    • improved preview extension UI
    • preview extension has text enabled by default
    Source code(tar.gz)
    Source code(zip)
  • 3.0.2(Jul 27, 2018)

    Changed from v3.0.0:

    • Fixes:
      • Fix documentation for old browsers (IE10, 11)
      • Fix Show/Hide behavior and event management
      • Fix Disable/Enable behavior
    • Changes:
      • Add explicit Bootstrap 4 dependency
      • Add support for custom color formulas on the $.colorpicker.Color.generate method
      • Add support for custom extensions via $.colorpicker.extensions
      • $.colorpicker.Color.api now returns the Qix Color object if no arguments are provided
      • Add validation and string conversion in $.colorpicker.Color.HSVAColor class
    • Documentation
      • Better documented code
      • Improved documentation template
      • Added more examples and descriptions
    Source code(tar.gz)
    Source code(zip)
  • 3.0.0(Jul 25, 2018)

    🎉🎉Lots of improvements and Bootstrap 4 support 🎉🎉

    • List of commits:https://github.com/farbelous/bootstrap-colorpicker/compare/2.5.3...93cb6a1
    • Changes: https://github.com/farbelous/bootstrap-colorpicker/issues/241
    Source code(tar.gz)
    Source code(zip)
  • 3.0.0-beta.5(Jul 24, 2018)

    • fix: format will be always recalculated by default #259
    • change: use own addon class instead of a BS specific one
    • refactor slider and popover handlers into separated classes
    • change: addon focus/tab support
    • change: Bootstrap 4 Popover support (enabled by default, will require Bootstrap CSS and JS loaded)
    • ui: Revamped CSS styles to be more consistent with Bootstrap 4 Popover.
    • ui: Improved SASS code to use variables and calculations to easily change the sizes and margins of every element.
    screen shot 2018-07-24 at 05 28 32 screen shot 2018-07-24 at 05 28 43 Source code(tar.gz)
    Source code(zip)
  • 3.0.0-beta.4(Jul 22, 2018)

  • 3.0.0-beta.3(Jul 22, 2018)

  • 2.5.3(Jul 22, 2018)

  • 2.5.0(Feb 2, 2017)

    • Bootstrap is no longer a dependency
    • Fix: Use mousedown to prevent a focusout firing before click is handled #198
    • Fix: Webpack support #199 (plugin factory refactoring)
    • Fix: Trigger change event when color picked #192
    • Feature: new option hexNumberSignPrefix to allow hex color without initial hash #191
    Source code(tar.gz)
    Source code(zip)
  • 2.4.0(Dec 29, 2016)

    Lots of bug fixes and improvements:

    • Bootstrap is no longer a bower dependency
    • Fixed some demos and updated docs with new options
    • Fixed color selectos display problem
    • Added some useful rules for visibility classes
    • Is now possible to initialize the plugin using another parent than main window
    • Fixed cancellation of input change event and colorpicker child element events
    • New options for setting the fallback color and format (before it was always black and hex)
    • Fixed click/tap on mobile devices
    • Other UI fixes and improvements (like saturation disappearing)

    This fixes #161, fixes #186, fixes #184, fixes #183, fixes #182, closes #180, fixes #178, closes #172, fixes #87, fixes #127, closes #157, fixes #162, fixes #168, closes #153 and fixes #140 .

    Happy Holidays! 🎄

    Source code(tar.gz)
    Source code(zip)
  • 2.3.5(Sep 16, 2016)

    API Improvements

    Now it's possible to use the full Colorpicker class API, using the jQuery plugin API. Examples:

    // Get the format property of the instance
    var format = $('.colorpicker-element:first').colorpicker('format');
    console.log(format); // "hex"
    
    // Getting values only works for single elements, otherwise a jQuery object will be returned.
    var format = $('.colorpicker-element').colorpicker('format');
    console.log(format); // jQuery object
    var value = $('.colorpicker-element').colorpicker('getValue');
    console.log(value); // jQuery object
    
    // Show all colorpickers (calls show() for all color pickers)
    $('.colorpicker-element').colorpicker('show');
    
    // Change color of all colorpickers to red (calls setValue('red') for all color pickers)
    $('.colorpicker-element').colorpicker('setValue', 'red');
    
    
    
    Source code(tar.gz)
    Source code(zip)
  • 2.3.0(Aug 11, 2015)

    • Custom color selectors with aliases
    • Browserify support
    • Fixes:
      • Paste color code
      • setValue will update the color properly
    • other minor changes
    Source code(tar.gz)
    Source code(zip)
  • 2.2.0(Jun 21, 2015)

    • Improved project metadata
    • Make jshint pass
    • .editorconfig support and changed coding style
    • Combined doc files into one (index.html)
    • jQuery 2.x compatibility
    Source code(tar.gz)
    Source code(zip)
  • 2.1.2(May 20, 2015)

    • Custom widget size support (see the documentation demos)
    • Added custom class option
    • Fixed and updated bower, package and dist files
    • Fixes #84 and #111
    Source code(tar.gz)
    Source code(zip)
  • 2.1.1(Apr 1, 2015)

  • 2.1.0(Feb 18, 2015)

    • Support of 'transparent' color value
    • Updated docs
    • Colorpicker will no longer change the selector and component color if the input is empty
    • Bower will no longer prompt for the bootstrap version
    • disable and enable events now trigger properly
    • Fix in the string parsers #104
    Source code(tar.gz)
    Source code(zip)
  • 2.0.0(Jun 14, 2014)

  • v1.0.0(Nov 24, 2013)

Owner
Javi Aguilar
Software Engineer and hobbyist game developer based in Berlin. PHP / NodeJS / React / Go / Unity C# / Godot 🌈
Javi Aguilar
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
Flat and simple color-picker library. No dependencies, no jquery.

Flat and simple color-picker Fully Featured demo Features Simple: The interface is straight forward and easy to use. Practical: Multiple color represe

Ivan Matveev 15 Nov 14, 2022
🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library.

?? Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!

Simon 3.9k Nov 24, 2022
A simple color picker application written in pure JavaScript, for modern browsers.

Color Picker A simple color picker application written in pure JavaScript, for modern browsers. Has support for touch events. Touchy… touchy… Demo and

Taufik Nurrohman 207 Nov 15, 2022
Change the color of an image to a specific color you have in mind.

image-recolor Run it: https://image-recolor.vercel.app/ image.recolor.mov Acknowledgments Daniel Büchele for the algorithm: https://twitter.com/daniel

Christopher Chedeau 21 Oct 25, 2022
A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

Hey Palette So you've got a color palette in Figma and you've used the Figma Tokens plugin to export that palette to JSON. Let's say you have a color

Kalo Pilato 5 Nov 15, 2022
A NodeJS package to convert any RGB color to HEX color or viceversa. Also supports HSL conversion.

Unhex ?? A NodeJS package to convert any RGB color to HEX, HSL color or viceversa. Example div { color: #fff; background-color: #0070f3; } After r

Arnau Espin 2 Oct 1, 2022
A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js, that is based on Dan Grossman's bootstrap-daterangepicker.

vanilla-datetimerange-picker Overview. A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js,

null 21 Nov 22, 2022
Bootstrap Persian/Gregorian Date Time Picker

MD.BootstrapPersianDateTimePicker Bootstrap 5+ Persian And Gregorian Date Time Picker Major changes: Using Bootstrap 5 jQuery Removed Rewrite all code

Mohammad Dayyan 305 Nov 23, 2022
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 137 Oct 28, 2022
An obsidian plugin allowing you to register and view different file extensions in a modular manner.

Obsidian Custom File Extensions Plugin This is a plugin for Obsidian to allow associaton of file type extensions with different in-app views via setti

null 5 Nov 18, 2022
A super-lightweight, highly configurable, cross-browser date / time picker jQuery plugin

Zebra Datepicker A super-lightweight, highly configurable, cross-browser date/time picker jQuery plugin Zebra_Datepicker is a small yet and highly con

Stefan Gabos 389 Nov 14, 2022
jQuery plugin for color manipulation and animation support.

jQuery Color Supported jQuery versions: 1.8+ Browser Support jQuery Color 3.x supports the following browsers: Desktop: Chrome: (Current - 1) and Curr

jQuery 1.6k Nov 22, 2022
Plugin for the Steam Deck, to adjust color settings, like saturation or gamma

vibrantDeck A Steam Deck plugin (for Decky Loader) to adjust screen saturation / vibrancy. Build instrutions Clone the repository to use as an example

libvibrant 31 Nov 13, 2022
Kuldeep 2 Jun 21, 2022