PHPackages shel/neos-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. shel/neos-colorpicker ActiveNeos-plugin[Utility & Helpers](/categories/utility) shel/neos-colorpicker ===================== A plugin for Neos CMS which provides a colorpicker editor 1.7.2(2mo ago)1494.4k—2.7%75GPL-3.0TypeScriptCI passing Since Mar 29Pushed 2mo ago2 watchersCompare [ Source](https://github.com/Sebobo/Shel.Neos.ColorPicker)[ Packagist](https://packagist.org/packages/shel/neos-colorpicker)[ GitHub Sponsors](https://github.com/sebobo)[ Patreon](https://www.patreon.com/shelzle)[ RSS](/packages/shel-neos-colorpicker/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)Dependencies (4)Versions (23)Used By (5) Color Picker Editor for Neos CMS ================================ [](#color-picker-editor-for-neos-cms) [![Latest Stable Version](https://camo.githubusercontent.com/1a18d7746103ac1e3d5faf438854aeeab6ce29e36b191e2886c1e6a5002335d8/68747470733a2f2f706f7365722e707567782e6f72672f7368656c2f6e656f732d636f6c6f727069636b65722f762f737461626c65)](https://packagist.org/packages/shel/neos-colorpicker)[![Total Downloads](https://camo.githubusercontent.com/7d81143c8009004940d718e3c4117f9ecbc422f79504137a11233224b5316b26/68747470733a2f2f706f7365722e707567782e6f72672f7368656c2f6e656f732d636f6c6f727069636b65722f646f776e6c6f616473)](https://packagist.org/packages/shel/neos-colorpicker)[![License](https://camo.githubusercontent.com/838e51997b6da0c1a4f71e1e4e58d9973c787393b3283edf54cd4cb0bac19816/68747470733a2f2f706f7365722e707567782e6f72672f7368656c2f6e656f732d636f6c6f727069636b65722f6c6963656e7365)](https://packagist.org/packages/shel/neos-colorpicker) Introduction ------------ [](#introduction) This package provides a Color Picker Editor which can be used in Neos CMS with the Neos.Ui 2+. This editor is based on the example in but has some modifications in regards to styling, supports the alpha channel and has a reset button to unset a value. Example ------- [](#example) See it in [action](https://vimeo.com/327331115). [![Colorpicker in Neos CMS sidebar](Documentation/ColorPickerExample.png)](Documentation/ColorPickerExample.png) Installation ------------ [](#installation) Run this in your site package ``` composer require --no-update shel/neos-colorpicker ``` Then run `composer update` in your project directory. How to use ---------- [](#how-to-use) Add a property of type string and configure the editor as seen in this example: ### Your NodeType: [](#your-nodetype) ``` "My.Site:Content.Text": superTypes: "Neos.Neos:Content": true ui: label: 'My text content' properties: textColor: type: string ui: label: 'Text color' reloadIfChanged: true inspector: group: 'text' editor: 'Shel.Neos.ColorPicker/ColorPickerEditor' editorOptions: # `mode` can be one of "rgba", "hsla", "hex", "preset", default: rgba mode: 'rgba' # Show saturation/hue/alpha (optional), boolean, default: false picker: true # Show hex/rgba fields (optional), boolean, default: false fields: true # Show preset colors (optional), array of colors or boolean (to disable) presetColors: ['#ff0000', '#0000ff', '#ffff00', ...] # OR you can show presetColors with alternative titles, that will be shown on hover # presetColors: [{color: '#ff0000', title: 'red'}, {color: '#0000ff', title: 'blue'}, {color: '#ffff00', title: 'yellow'}] # Hides the reset button if set to false allowEmpty: true ``` ### Your Fusion: [](#your-fusion) ``` prototype(My.Site:Content.Text) < prototype(Neos.Neos:ContentComponent) { textColor = ${q(node).property('textColor')} renderer = afx` Hello World Euismod massa quam arcu et mi arcu tincidunt maximus tortor lacus interdum vivamus cursus aliquam eget amet amet eget gravida et vivamus eget diam tortor. ` } ``` Customization ------------- [](#customization) The editor allows some global default options via your `Settings.yaml` file: ``` Neos: Neos: Ui: frontendConfiguration: "Shel.Neos:ColorPickerEditor": # `mode` can be one of "rgba", "hsla", "hex", "preset" mode: "rgba" # Colors which are available for quick selection presetColors: ["#D0021B", "#F5A623", ...] ``` `mode` allows you to store the selected color values in a different format if needed. This can be helpful, when the hsl format is needed to get the individual components. `presetColors` lets you customize the list of color squares that are available for quick selection. Advanced preset usage --------------------- [](#advanced-preset-usage) The `presetColors` option can have two shapes. One is just a simple list of color strings, the other one is a list of objects with a `color` (hex) and optional `title` and `value` properties. - `color` - the color (hex) that will be displayed in the preset color squares - `title` - (optional) the text that will be displayed on hover - `value` - (optional) the value that will be stored in the node property instead of the color value The `value` can be used to store a value different from the presets color value. This value is only used when the `mode` is set to `preset` which in turn will also disable the color picker and the color fields. The benefit of this option is that you can show a color value to the user but store a different value in the node property. F.e. a CSS classname. Contributions ------------- [](#contributions) Contributions are very welcome! Please create detailed issues and PRs. ### Health Score 58 — FairBetter than 98% of packages Maintenance86 Actively maintained with recent releases Popularity41 Moderate usage in the ecosystem Community24 Small or concentrated contributor base Maturity69 Established project with proven stability Bus Factor1 Top contributor holds 78.2% 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 ~133 days Recently: every ~252 days Total 20 Last Release 67d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/5c9f106db319e8698dcb4aedfe8034f0442d379ebbd78fcd67b884999b2236f1?d=identicon)[Sebobo](/maintainers/Sebobo) --- Top Contributors [![Sebobo](https://avatars.githubusercontent.com/u/596967?v=4)](https://github.com/Sebobo "Sebobo (68 commits)")[![dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?v=4)](https://github.com/dependabot-preview[bot] "dependabot-preview[bot] (8 commits)")[![pmaas](https://avatars.githubusercontent.com/u/2778669?v=4)](https://github.com/pmaas "pmaas (7 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![jonnitto](https://avatars.githubusercontent.com/u/4510166?v=4)](https://github.com/jonnitto "jonnitto (1 commits)")[![lorenzulrich](https://avatars.githubusercontent.com/u/1816023?v=4)](https://github.com/lorenzulrich "lorenzulrich (1 commits)") --- Tags colorpickerhacktoberfestneos-cmseditorflowNeosneoscmscolorpicker ### Embed Badge ![Health badge](/badges/shel-neos-colorpicker/health.svg) ``` [![Health](https://phpackages.com/badges/shel-neos-colorpicker/health.svg)](https://phpackages.com/packages/shel-neos-colorpicker) ``` ### Alternatives [shel/neos-hyphens A plugin for Neos CMS which provides hyphens for the inline editor 20200.7k1](/packages/shel-neos-hyphens)[techdivision/ckstyles Neos package which enables you adding your custom style classes for the CkEditor with a simple Yaml configuration 21166.3k](/packages/techdivision-ckstyles)[moc/notfound Neos CMS package that loads a normal editable page for displaying a 404 error 18167.5k](/packages/moc-notfound)[carbon/includeassets Include your assets (css, js) in an easy way into Neos 14228.6k10](/packages/carbon-includeassets)[shel/neos-workspace-module An alternative workspace module with additional features for Neos CMS 1738.6k1](/packages/shel-neos-workspace-module)[shel/neos-terminal Neos CMS Ui terminal for running Eel expressions and other commands 1441.3k](/packages/shel-neos-terminal) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)