PHPackages itsjaviaguilar/bootstrap-colorpicker - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. itsjaviaguilar/bootstrap-colorpicker Abandoned → [itsjavi/bootstrap-colorpicker](/?search=itsjavi%2Fbootstrap-colorpicker)ArchivedLibrary[Utility & Helpers](/categories/utility) itsjaviaguilar/bootstrap-colorpicker ==================================== Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. 3.4.0(4y ago)1.4k6.2k362[11 issues](https://github.com/itsjavi/bootstrap-colorpicker/issues)[1 PRs](https://github.com/itsjavi/bootstrap-colorpicker/pulls)MITJavaScript Since Apr 1Pushed 4y ago60 watchersCompare [ Source](https://github.com/itsjavi/bootstrap-colorpicker)[ Packagist](https://packagist.org/packages/itsjaviaguilar/bootstrap-colorpicker)[ Docs](https://itsjavi.com/bootstrap-colorpicker/)[ Fund](https://www.paypal.me/metaunicorn/10)[ GitHub Sponsors](https://github.com/itsjavi)[ RSS](/packages/itsjaviaguilar-bootstrap-colorpicker/feed)WikiDiscussions master Synced 2mo ago READMEChangelog (10)Dependencies (2)Versions (34)Used By (0) Bootstrap Colorpicker ===================== [](#bootstrap-colorpicker) [Bootstrap Colorpicker](https://github.com/itsjavi/bootstrap-colorpicker/) is a modular color picker plugin for Bootstrap 4. [![Build Status](https://camo.githubusercontent.com/dd899f35d27e0322af07e0f1792897e3cef1dc915d15f3c38851af69a86530bd/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f6974736a6176692f626f6f7473747261702d636f6c6f727069636b65722f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/itsjavi/bootstrap-colorpicker)[![npm](https://camo.githubusercontent.com/7ea7e50df4f4d12d7ee1e7b860446394ccfb140f0318dc8b17f1953fba63bb8b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f626f6f7473747261702d636f6c6f727069636b65722e7376673f7374796c653d666c61742d737175617265)](https://www.npmjs.com/package/bootstrap-colorpicker) > 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](https://casesandberg.github.io/react-color/). You are still free to adapt this project and create forks and variants of it. Install ------- [](#install) You can get the latest version in many different ways: - Downloading the tarball from npm the registry: (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 -------- [](#versions) Colorpicker version Compatible Bootstrap version Dependencies [v2.x](https://github.com/itsjavi/bootstrap-colorpicker/tree/v2.x) [Documentation](https://itsjavi.com/bootstrap-colorpicker/v2) Bootstrap 3 or 4 - jQuery >= 1.10 - Bootstrap CSS (input addon) [v3.x](https://github.com/itsjavi/bootstrap-colorpicker) [Documentation](https://itsjavi.com/bootstrap-colorpicker) 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 -------- [](#examples) ### With Bootstrap [](#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. ``` > Bootstrap Colorpicker Demo (with Bootstrap) $(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()); }); }); ``` ### Without Bootstrap [](#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. ``` > Bootstrap Colorpicker Demo (without Bootstrap) $(function() { $('#demo').colorpicker({ popover: false, inline: true, container: '#demo' }); }); ``` Contributions ------------- [](#contributions) - [Issues](https://github.com/itsjavi/bootstrap-colorpicker/issues) - [Pull Requests](https://github.com/itsjavi/bootstrap-colorpicker/pulls) - [Milestones](https://github.com/itsjavi/bootstrap-colorpicker/milestones) This project exists thanks to all the [people who contribute](https://github.com/itsjavi/bootstrap-colorpicker/graphs/contributors). Please read [CONTRIBUTING](https://github.com/itsjavi/bootstrap-colorpicker/blob/master/.github/CONTRIBUTING.md)before sending a pull request or issue. License ------- [](#license) The MIT License (MIT). Please see the [License File](https://github.com/itsjavi/bootstrap-colorpicker/blob/master/LICENSE) for more information. Credits ------- [](#credits) Written and maintained by [Javi Aguilar](https://itsjavi.com) and all other contributors. *Based on Stefan Petre's color picker (2013).* *Thanks to JetBrains for supporting this project.* ### Health Score 46 — FairBetter than 93% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity46 Moderate usage in the ecosystem Community36 Small or concentrated contributor base Maturity74 Established project with proven stability Bus Factor1 Top contributor holds 65.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~70 days Recently: every ~189 days Total 33 Last Release 1804d ago Major Versions 2.5.2 → 3.0.0-beta.12018-03-29 2.5.3 → 3.0.0-beta.22018-07-22 v2.x-dev → 3.2.02019-12-04 ### Community Maintainers ![](https://www.gravatar.com/avatar/74f57f48921e5eed849f568af00641ec34f12b85fbf9fb6e92fcecdc9a4a15df?d=identicon)[itsjavi](/maintainers/itsjavi) --- Top Contributors [![itsjavi](https://avatars.githubusercontent.com/u/122741?v=4)](https://github.com/itsjavi "itsjavi (218 commits)")[![xaguilars](https://avatars.githubusercontent.com/u/18132022?v=4)](https://github.com/xaguilars "xaguilars (33 commits)")[![mjolnic](https://avatars.githubusercontent.com/u/22207619?v=4)](https://github.com/mjolnic "mjolnic (31 commits)")[![tanqhnguyen](https://avatars.githubusercontent.com/u/910024?v=4)](https://github.com/tanqhnguyen "tanqhnguyen (9 commits)")[![seiyria](https://avatars.githubusercontent.com/u/763609?v=4)](https://github.com/seiyria "seiyria (4 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (4 commits)")[![killthekitten](https://avatars.githubusercontent.com/u/1201569?v=4)](https://github.com/killthekitten "killthekitten (3 commits)")[![krk](https://avatars.githubusercontent.com/u/1447853?v=4)](https://github.com/krk "krk (2 commits)")[![codeodor](https://avatars.githubusercontent.com/u/23479?v=4)](https://github.com/codeodor "codeodor (2 commits)")[![duckzland](https://avatars.githubusercontent.com/u/1064954?v=4)](https://github.com/duckzland "duckzland (2 commits)")[![michaelbilcot](https://avatars.githubusercontent.com/u/2457050?v=4)](https://github.com/michaelbilcot "michaelbilcot (2 commits)")[![Craga89](https://avatars.githubusercontent.com/u/187963?v=4)](https://github.com/Craga89 "Craga89 (2 commits)")[![Ninir](https://avatars.githubusercontent.com/u/855022?v=4)](https://github.com/Ninir "Ninir (2 commits)")[![Jaza](https://avatars.githubusercontent.com/u/79373?v=4)](https://github.com/Jaza "Jaza (2 commits)")[![jetic83](https://avatars.githubusercontent.com/u/11157551?v=4)](https://github.com/jetic83 "jetic83 (2 commits)")[![will-moore](https://avatars.githubusercontent.com/u/900055?v=4)](https://github.com/will-moore "will-moore (2 commits)")[![mateuszjarzewski](https://avatars.githubusercontent.com/u/4510561?v=4)](https://github.com/mateuszjarzewski "mateuszjarzewski (1 commits)")[![Bitaru](https://avatars.githubusercontent.com/u/4517712?v=4)](https://github.com/Bitaru "Bitaru (1 commits)")[![Contagious06](https://avatars.githubusercontent.com/u/848426?v=4)](https://github.com/Contagious06 "Contagious06 (1 commits)")[![gergo85](https://avatars.githubusercontent.com/u/2959112?v=4)](https://github.com/gergo85 "gergo85 (1 commits)") --- Tags bootstrapbootstrap-colorpickerbootstrap-componentsbootstrap-pluginbootstrap3bootstrap4colorcolor-pickercolorpickerjquerytwitter-bootstrapbootstrapcolorpicker ### Embed Badge ![Health badge](/badges/itsjaviaguilar-bootstrap-colorpicker/health.svg) ``` [![Health](https://phpackages.com/badges/itsjaviaguilar-bootstrap-colorpicker/health.svg)](https://phpackages.com/packages/itsjaviaguilar-bootstrap-colorpicker) ``` ### Alternatives [eternicode/bootstrap-datepicker A datepicker for Bootstrap 12.7k543.8k6](/packages/eternicode-bootstrap-datepicker)[eonasdan/bootstrap-datetimepicker Date/time picker widget based on twitter bootstrap 7.2k492.4k9](/packages/eonasdan-bootstrap-datetimepicker)[serhioromano/bootstrap-calendar Bootstrap full view calendar. 3.0k5.9k2](/packages/serhioromano-bootstrap-calendar)[cwspear/bootstrap-hover-dropdown An unofficial Bootstrap plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience. 1.3k153.1k](/packages/cwspear-bootstrap-hover-dropdown)[patricktalmadge/bootstrapper Twitter Bootstrap markup generator 557407.2k4](/packages/patricktalmadge-bootstrapper)[tempusdominus/bootstrap-4 A date/time picker component designed to work with Bootstrap 4 and Momentjs. 6079.3k](/packages/tempusdominus-bootstrap-4) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)