PHPackages webcito/bs-color-picker - 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. webcito/bs-color-picker ActiveLibrary[Utility & Helpers](/categories/utility) webcito/bs-color-picker ======================= description 1.0.3(11mo ago)014proprietary Since Apr 28Pushed 11mo ago1 watchersCompare [ Source](https://github.com/ThomasDev-de/bs-color-picker)[ Packagist](https://packagist.org/packages/webcito/bs-color-picker)[ RSS](/packages/webcito-bs-color-picker/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (4)Dependencies (3)Versions (5)Used By (0) Bootstrap Color Picker Plugin ============================= [](#bootstrap-color-picker-plugin) [![License](https://camo.githubusercontent.com/b5fceb73e35e5852780ae795d9f9206fad49642ba2fa7caf6930a46a4d2dbd8f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d69742d626c7565)](https://camo.githubusercontent.com/b5fceb73e35e5852780ae795d9f9206fad49642ba2fa7caf6930a46a4d2dbd8f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d69742d626c7565)[![Version](https://camo.githubusercontent.com/898acdccff35279368fa940cff2d39496aa631af812204c2a7d9db3200ae75f9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d312e302e302d677265656e)](https://camo.githubusercontent.com/898acdccff35279368fa940cff2d39496aa631af812204c2a7d9db3200ae75f9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d312e302e302d677265656e)[![Version](https://camo.githubusercontent.com/3f4ad7204eacc17e127cd899632cf8756aa55aa452e96c0ecc6c34250648c68d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f626f6f7473747261702d34253743352d6f72616e6765)](https://camo.githubusercontent.com/3f4ad7204eacc17e127cd899632cf8756aa55aa452e96c0ecc6c34250648c68d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f626f6f7473747261702d34253743352d6f72616e6765)[![Version](https://camo.githubusercontent.com/139386dc798ff78e7a08bf001cdcfdc0284a48d43831a9ed8ab2654b124174b9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646174652d323032352f30342f32342d79656c6c6f77)](https://camo.githubusercontent.com/139386dc798ff78e7a08bf001cdcfdc0284a48d43831a9ed8ab2654b124174b9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646174652d323032352f30342f32342d79656c6c6f77) A feature-rich and customizable color picker jQuery plugin that seamlessly integrates with Bootstrap 4 or 5. This plugin provides an intuitive interface for color selection with support for multiple color formats and transparency. [![](demo/img.png)](demo/img.png) Features -------- [](#features) - Full color spectrum selection with saturation and value controls - Interactive hue and opacity sliders - Multiple color format support (HEX, RGB, RGBA, HSL, HSLA, CMYK) - Real-time color preview - Customizable button styling - Bootstrap 4 and 5 compatible - Support for transparency/opacity - Responsive design - Touch-device friendly Dependencies ------------ [](#dependencies) - jQuery ^3 - Bootstrap ^4 | ^5 - Bootstrap Icons ^1 (optional) Installation ------------ [](#installation) 1. Install the package via Composer: ``` composer require webcito/bs-color-picker ``` 2Include the required dependencies in your HTML: ``` ``` 3Create an input element in your HTML: ``` ``` Usage ----- [](#usage) ### Basic Implementation [](#basic-implementation) ``` $('#colorPicker').bsColorPicker(); ``` Configuration Options --------------------- [](#configuration-options) ``` $('#colorPicker').bsColorPicker({ btnClass: 'btn-outline-secondary', // The classes for the dropdown button btnText: null, // Button-Text btnEmptyColor: 'rgba(0, 0, 0, 0.5)', // The color for the button when no active color is found. format: 'rgba', // The output format, which is to be transferred to the input element. hideInputs: false, // If set to true, the information and input fields for manual editing will not be generated.. disabled: false, // Set the dropdown enabled or disabled. buttons: { // Action buttons. If a button is null or false, it will not be displayed. check: {icon: 'bi bi-check-lg'}, // the color takes over from the picker to the element. reset: {icon: 'bi bi-arrow-clockwise'}, // reset the color to the condition when opening the dropdown close: {icon: 'bi bi-x-lg'}, // closes the color picker without a change empty: {icon: 'bi bi-trash3'} // Sets the color to null }, debug: false // Activates some useful debugion formations in the Windows.console }); ``` Global Methods -------------- [](#global-methods) ``` // Set default options for all instances: $.bsColorPicker.setDefaults({ btnClass: 'btn-primary', format: 'hex', ... }); // Gives back the current default options for the color-picker. $.bsColorPicker.getDefaults(); // :object // Gives the permitted format back $.bsColorPicker.utils.getValidOutputFormates(); // :array // Check a format for validity $.bsColorPicker.utils.isValidOutputFormat('rgb'); // :boolean // Formats a color string in the possible color formats as an object $.bsColorPicker.utils.convertColorFormats('red'); // :array // Check whether a value is empty $.bsColorPicker.utils.isValueEmpty(null); // :boolean // Gives back an object with all the color names $.bsColorPicker.utils.getColorNames(); // :object {{'colorName': 'hexValue'}, ...} // gibt die Farbe im Format hex zurück $.bsColorPicker.utils.colorNameToHex('red'); // :null|string p.e. #ff0000 ``` Plugin methods -------------- [](#plugin-methods) ``` $('#colorPicker').bsColorPicker('val'); // get the value in output format -> #ff0000 $('#colorPicker').bsColorPicker('val', 'red'); // set a color $('#colorPicker').bsColorPicker('getColor'); // return a set of colors for the selected color $('#colorPicker').bsColorPicker('updateOptions', { btnText: 'beautiful color :)'}); // update options $('#colorPicker').bsColorPicker('destroy'); // destroy the picker ``` Events ------ [](#events) The plugin triggers the following events: ``` $('#colorPicker') .on('change.bs.colorPicker', function (e, data) { // Fires when the value of the input changes. // Data is the selected color in the output format as a string or null if no color is present }) .on('update.bs.colorPicker', function (e, data) { // Fires at every color change in the color picker. // Data is an object with all available color formats of the current color. }) .on('all.bs.colorPicker', function () { // Fires additionally at every event }) .on('error.bs.colorPicker', function (e, data) { logEvent('error.bs.colorPicker', data); }) .on('init.bs.colorPicker', function () { logEvent('init.bs.colorPicker'); }) .on('show.bs.colorPicker', function () { logEvent('show.bs.colorPicker'); }) .on('shown.bs.colorPicker', function () { logEvent('shown.bs.colorPicker'); }) .on('hide.bs.colorPicker', function () { logEvent('hide.bs.colorPicker'); }) .on('hidden.bs.colorPicker', function () { logEvent('hidden.bs.colorPicker'); }) .on('reset.bs.colorPicker', function (e, data) { logEvent('reset.bs.colorPicker', 'details on console'); if (data) { setBodyGradient(data.rgba); } console.log('reset.bs.colorPicker', data); }) .on('cancel.bs.colorPicker', function (e, data) { logEvent('cancel.bs.colorPicker', 'details on console'); const colorSet = colorPicker.bsColorPicker('getColor'); console.log('cancel.bs.colorPicker', data); setBodyGradient(colorSet ? colorSet.rgba : null); }) .on('empty.bs.colorPicker', function (e, data) { logEvent('empty.bs.colorPicker', data); setBodyGradient(null); }); ``` Browser Support --------------- [](#browser-support) - Chrome (latest) - Firefox (latest) - Safari (latest) - Edge (latest) - Opera (latest) Contributing ------------ [](#contributing) As this is a proprietary plugin, please contact the project maintainers for information about contributing. License ------- [](#license) This project is proprietary software. All rights reserved. Support ------- [](#support) For support, feature requests, or bug reports, please contact the development team. ### Health Score 28 — LowBetter than 54% of packages Maintenance51 Moderate activity, may be stable Popularity6 Limited adoption so far Community7 Small or concentrated contributor base Maturity40 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~12 days Total 4 Last Release 343d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81) --- Top Contributors [![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (35 commits)") ### Embed Badge ![Health badge](/badges/webcito-bs-color-picker/health.svg) ``` [![Health](https://phpackages.com/badges/webcito-bs-color-picker/health.svg)](https://phpackages.com/packages/webcito-bs-color-picker) ``` ### Alternatives [serhioromano/bootstrap-calendar Bootstrap full view calendar. 3.0k5.9k2](/packages/serhioromano-bootstrap-calendar)[mapbender/mapbender Mapbender library 10117.4k5](/packages/mapbender-mapbender) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)