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(3mo ago)14104.7k↓25.7%75GPL-3.0TypeScriptCI passing Since Mar 29Pushed 3mo 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 3d 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 56 — FairBetter than 97% of packages Maintenance78 Regular maintenance activity Popularity41 Moderate usage in the ecosystem Community24 Small or concentrated contributor base Maturity70 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 113d 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 21214.3k1](/packages/shel-neos-hyphens)[techdivision/ckstyles Neos package which enables you adding your custom style classes for the CkEditor with a simple Yaml configuration 21179.5k](/packages/techdivision-ckstyles)[shel/neos-terminal Neos CMS Ui terminal for running Eel expressions and other commands 1445.3k](/packages/shel-neos-terminal) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)