{"id":29632770,"url":"https://github.com/thomasdev-de/bs-color-picker","last_synced_at":"2026-02-05T08:01:52.944Z","repository":{"id":296982821,"uuid":"968095630","full_name":"ThomasDev-de/bs-color-picker","owner":"ThomasDev-de","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-03T11:37:33.000Z","size":165,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-27T17:16:21.939Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ThomasDev-de.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-17T13:55:03.000Z","updated_at":"2025-08-02T11:11:45.000Z","dependencies_parsed_at":"2025-06-03T18:57:59.952Z","dependency_job_id":null,"html_url":"https://github.com/ThomasDev-de/bs-color-picker","commit_stats":null,"previous_names":["thomasdev-de/bs-color-picker"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/ThomasDev-de/bs-color-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-color-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-color-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-color-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-color-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThomasDev-de","download_url":"https://codeload.github.com/ThomasDev-de/bs-color-picker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-color-picker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29116450,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-05T05:31:32.482Z","status":"ssl_error","status_checked_at":"2026-02-05T05:31:29.075Z","response_time":65,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-21T13:03:40.921Z","updated_at":"2026-02-05T08:01:52.937Z","avatar_url":"https://github.com/ThomasDev-de.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap Color Picker Plugin\n\n![License](https://img.shields.io/badge/license-Mit-blue)\n![Version](https://img.shields.io/badge/version-1.0.0-green)\n![Version](https://img.shields.io/badge/bootstrap-4|5-orange)\n![Version](https://img.shields.io/badge/date-2025/04/24-yellow)\n\nA feature-rich and customizable color picker jQuery plugin that seamlessly integrates with Bootstrap 4 or 5.  \nThis plugin provides an intuitive interface for color selection with support for multiple color formats and\ntransparency.\n\n![](demo/img.png)\n\n## Features\n\n- Full color spectrum selection with saturation and value controls\n- Interactive hue and opacity sliders\n- Multiple color format support (HEX, RGB, RGBA, HSL, HSLA, CMYK)\n- Real-time color preview\n- Customizable button styling\n- Bootstrap 4 and 5 compatible\n- Support for transparency/opacity\n- Responsive design\n- Touch-device friendly\n\n## Dependencies\n\n- jQuery ^3\n- Bootstrap ^4 | ^5\n- Bootstrap Icons ^1 (optional)\n\n## Installation\n1. Install the package via Composer:\n\n```shell\ncomposer require webcito/bs-color-picker\n````\n2Include the required dependencies in your HTML:\n\n```html\n\u003c!-- Bootstrap CSS --\u003e\n\u003clink href=\"vendor/twbs/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- Bootstrap Icons --\u003e\n\u003clink href=\"vendor/twbs/bootstrap-icons/font/bootstrap-icons.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- jQuery --\u003e\n\u003cscript src=\"vendor/components/jquery/jquery.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Bootstrap JS --\u003e\n\u003cscript src=\"vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Bootstrap Color Picker --\u003e\n\u003cscript src=\"dist/bs-color-picker.min.js\"\u003e\u003c/script\u003e\n```\n\n3Create an input element in your HTML:\n\n```html\n\u003cinput type=\"text\" id=\"colorPicker\"\u003e\n```\n\n## Usage\n\n### Basic Implementation\n\n```javascript\n$('#colorPicker').bsColorPicker();\n```\n## Configuration Options\n\n```javascript\n$('#colorPicker').bsColorPicker({\n    btnClass: 'btn-outline-secondary', // The classes for the dropdown button\n    btnText: null, // Button-Text\n    btnEmptyColor: 'rgba(0, 0, 0, 0.5)', // The color for the button when no active color is found.\n    format: 'rgba', // The output format, which is to be transferred to the input element.\n    hideInputs: false, // If set to true, the information and input fields for manual editing will not be generated.. \n    disabled: false, // Set the dropdown enabled or disabled.\n    buttons: { // Action buttons. If a button is null or false, it will not be displayed.\n        check: {icon: 'bi bi-check-lg'}, // the color takes over from the picker to the element.\n        reset: {icon: 'bi bi-arrow-clockwise'}, // reset the color to the condition when opening the dropdown\n        close: {icon: 'bi bi-x-lg'}, // closes the color picker without a change\n        empty: {icon: 'bi bi-trash3'} // Sets the color to null\n    },\n    debug: false // Activates some useful debugion formations in the Windows.console\n});\n```\n\n## Global Methods\n\n```javascript\n// Set default options for all instances:\n$.bsColorPicker.setDefaults({\n    btnClass: 'btn-primary',\n    format: 'hex',\n    ...\n});\n// Gives back the current default options for the color-picker.\n$.bsColorPicker.getDefaults(); // :object\n// Gives the permitted format back\n$.bsColorPicker.utils.getValidOutputFormates(); // :array\n// Check a format for validity\n$.bsColorPicker.utils.isValidOutputFormat('rgb'); // :boolean\n// Formats a color string in the possible color formats as an object\n$.bsColorPicker.utils.convertColorFormats('red'); // :array\n// Check whether a value is empty\n$.bsColorPicker.utils.isValueEmpty(null); // :boolean\n// Gives back an object with all the color names\n$.bsColorPicker.utils.getColorNames(); // :object {{'colorName': 'hexValue'}, ...}\n// gibt die Farbe im Format hex zurück\n$.bsColorPicker.utils.colorNameToHex('red'); // :null|string p.e. #ff0000\n```\n\n## Plugin methods\n\n```javascript\n$('#colorPicker').bsColorPicker('val'); // get the value in output format -\u003e #ff0000\n$('#colorPicker').bsColorPicker('val', 'red'); // set a color\n$('#colorPicker').bsColorPicker('getColor'); // return a set of colors for the selected color\n$('#colorPicker').bsColorPicker('updateOptions', { btnText: 'beautiful color :)'}); // update options\n$('#colorPicker').bsColorPicker('destroy'); // destroy the picker\n```\n\n## Events\n\nThe plugin triggers the following events:\n\n```javascript\n$('#colorPicker')\n    .on('change.bs.colorPicker', function (e, data) {\n        // Fires when the value of the input changes.\n        // Data is the selected color in the output format as a string or null if no color is present\n    })\n    .on('update.bs.colorPicker', function (e, data) {\n        // Fires at every color change in the color picker.\n        // Data is an object with all available color formats of the current color.\n    })\n    .on('all.bs.colorPicker', function () {\n        // Fires additionally at every event\n    })\n    .on('error.bs.colorPicker', function (e, data) {\n        logEvent('error.bs.colorPicker', data);\n    })\n    .on('init.bs.colorPicker', function () {\n        logEvent('init.bs.colorPicker');\n    })\n    .on('show.bs.colorPicker', function () {\n        logEvent('show.bs.colorPicker');\n    })\n    .on('shown.bs.colorPicker', function () {\n        logEvent('shown.bs.colorPicker');\n    })\n    .on('hide.bs.colorPicker', function () {\n        logEvent('hide.bs.colorPicker');\n    })\n    .on('hidden.bs.colorPicker', function () {\n        logEvent('hidden.bs.colorPicker');\n    })\n    .on('reset.bs.colorPicker', function (e, data) {\n        logEvent('reset.bs.colorPicker', 'details on console');\n        if (data) {\n            setBodyGradient(data.rgba);\n        }\n        console.log('reset.bs.colorPicker', data);\n    })\n    .on('cancel.bs.colorPicker', function (e, data) {\n        logEvent('cancel.bs.colorPicker', 'details on console');\n        const colorSet = colorPicker.bsColorPicker('getColor');\n        console.log('cancel.bs.colorPicker', data);\n        setBodyGradient(colorSet ? colorSet.rgba : null);\n\n    })\n    .on('empty.bs.colorPicker', function (e, data) {\n        logEvent('empty.bs.colorPicker', data);\n        setBodyGradient(null);\n    });\n```\n\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n- Opera (latest)\n\n## Contributing\n\nAs this is a proprietary plugin, please contact the project maintainers for information about contributing.\n\n## License\n\nThis project is proprietary software. All rights reserved.\n\n## Support\n\nFor support, feature requests, or bug reports, please contact the development team.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fbs-color-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasdev-de%2Fbs-color-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fbs-color-picker/lists"}