PHPackages packagefactory/colorhelper - 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. packagefactory/colorhelper ActiveNeos-package[Utility & Helpers](/categories/utility) packagefactory/colorhelper ========================== EEL Color helper to transform hex colors v2.0.1(4y ago)15.9k1[2 PRs](https://github.com/PackageFactory/PackageFactory.ColorHelper/pulls)GPL-3.0-or-laterPHP Since Jun 18Pushed 3y ago1 watchersCompare [ Source](https://github.com/PackageFactory/PackageFactory.ColorHelper)[ Packagist](https://packagist.org/packages/packagefactory/colorhelper)[ RSS](/packages/packagefactory-colorhelper/feed)WikiDiscussions master Synced today READMEChangelog (9)Dependencies (3)Versions (19)Used By (0) PackageFactory.ColorHelper ========================== [](#packagefactorycolorhelper) The package provides the Fusion Prototype `Vendor.Site:CustomCssProperties`for rendering css custom-properties together with an EEL `Color` Helper that provides an interface for fluent color transformations. ``` prototype(Vendor.Site:CustomCssProperties) < prototype(Neos.Fusion:Component) { // // based on the size-properties `font` and `bgColor` some // values shall be set globally // base = Neos.Fusion:DataStructure { font = ${q(site).property('font')} bg = ${q(site).property('bgColor')} bg-lighter = ${Color.css(this.bg).lighten(20)} bg-transparent = ${Color.css(this.bg).fadeout(20)} } // // based on the properties `bgColorMobile` additional css // properties are defined that will be rendered in mobile // breakpoints and override the other values // mobileQuery = 'screen and (max-width: 600px)' mobile = Neos.Fusion:DataStructure { bg = ${q(site).property('bgColorMobile')} bg-lighter = ${Color.css(this.bg).lighten(20)} bg-transparent = ${Color.css(this.bg).fadeout(20)} } renderer = afx` ` } ``` Rendering as Css Custom Properties ---------------------------------- [](#rendering-as-css-custom-properties) The fusion prototype `PackageFactory.ColorHelper:CssVariables` allows to render DataStructures as CssVariables. This can be used for customizing css based on node properties as shown in the example below. #### `PackageFactory.ColorHelper:CssVariables` [](#packagefactorycolorhelpercssvariables) - `values` (`array`, default: `Neos.Fusion:DataStructure`) the values to render as css variables - `mediaQuery` (`string`, default `null`) when given renders the css variables into a `@media ... {}` section - `selector` (`string`, default `:root`) : css-selector the variables are rendered for Handling colors with EEL ------------------------ [](#handling-colors-with-eel) ### Creating [](#creating) Colors can be created from hex, rgb and hsl values - `color = ${ Color.hex('#80e619') }` expects a hex string of 3 or 6 chars - `color = ${ Color.rgb(100, 0, 255) }` expects three numbers each between 0 and 255 - `color = ${ Color.hsl(156, 25, 75) }` expects three numbers a degree 0-355 and two percent values 0-100 - `color = ${ Color.rgba(100, 0, 255, 50) }` expects three numbers each between 0 and 255 plus a numbers between 0-100 - `color = ${ Color.hsla(156, 25, 75, 50) }` expects three numbers a degree 0-355 and three percent values 0-100 The methods rgb and hsl allow to specify the alpha as fourth argument expecting a float between 0 and 1 `color = ${ Color.hsl(156, 25, 75, 0.5) }` If you have a color value specified as css color string you can use the `Color.css` method to instantiate the color. Plaese be aware that this uses a very simple regex based parser for the css colors and for now only suppprts hex,rgb and hsla colors. - `color = ${ Color.css('#80e619') }` - `color = ${ Color.css('rbg( 10%, 50%, 0%, 50%)') }` - `color = ${ Color.css('hsl( 270, 10%, 50%, 0.5)') }` ### Manipulating [](#manipulating) Once created those colors can then be manipulated via fluent interface like a flow query for colors. Adjust saturation - `color = ${ Color.hex('#80e619').saturate(20) }` >> #80ff00 - `color = ${ Color.hex('#80e619').desaturate( 20) }` >> #80cd33 Adjust lightness - `color = ${ Color.hex('#80e619').lighten('#80e619', 20) }` >> #b3f075 - `color = ${ Color.hex('#80e619').darken('#80e619', 20) }` >> #4d8a0f Modify the color value by rotating in the hue axis - `color = ${ Color.hex('#f2330d').spin(30) }` >> #f2a20d - `color = ${ Color.hex('#f2330d').spin(-30) }` >> #f20d59 Invert color - `color = ${ Color.hex('#f2330d').spin(180) }` >> #0dd0f2 Fade colors - `color = ${ Color.hex('#f2330d').fadeout(10) }` >> #0dd0f2 - `color = ${ Color.rgb(255,0,0,0).fadein(20) }` >> #0dd0f2 Mix colors - `color = ${ Color.hex('#ff0000').mix(Color.hex('#0000ff'), 50) }` >> #800080 Offcourse this can be used in afx attributes as any other eel expression. ### Value rendering [](#value-rendering) When casted to string the color objects will render as hex value. For special requirements the format can be specified. All formats will only render an alpha value if the color is transparent. - `hex = ${ Color.rgb(255,0,0).hex() }` >> #ff0000 - `rgb = ${ Color.rgba(255,0,0).fadeout(50).rgb() }` >> rgba( 255, 0, 0, 0.5) - `hsl = ${ Color.rgba(255,0,0).hsl() }` >> hsla( 0, 100%, 50%) Installation ------------ [](#installation) PackageFactory.ColorHelper is available via packagist. Run `composer require packagefactory/colorhelper`. We use semantic-versioning so every breaking change will increase the major-version number. Contribution ------------ [](#contribution) We will gladly accept contributions. Please send us pull requests. ### Health Score 31 — LowBetter than 66% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity20 Limited adoption so far Community8 Small or concentrated contributor base Maturity64 Established project with proven stability 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 ~93 days Recently: every ~159 days Total 8 Last Release 1554d ago Major Versions v1.3.2 → v2.0.02021-08-20 ### Community Maintainers ![](https://www.gravatar.com/avatar/829b4ccb51e8cff3c1e4b59d60cfe8d1b86f6d77fc31a6b3fc99227f432542ca?d=identicon)[mficzel](/maintainers/mficzel) --- Top Contributors [![mficzel](https://avatars.githubusercontent.com/u/1309380?v=4)](https://github.com/mficzel "mficzel (43 commits)") ### Code Quality Static AnalysisPHPStan Type Coverage Yes ### Embed Badge ![Health badge](/badges/packagefactory-colorhelper/health.svg) ``` [![Health](https://phpackages.com/badges/packagefactory-colorhelper/health.svg)](https://phpackages.com/packages/packagefactory-colorhelper) ``` ### Alternatives [neos/neos An open source Content Application Platform based on Flow. A set of core Content Management features is resting within a larger context that allows you to build a perfectly customized experience for your users. 1151.0M777](/packages/neos-neos)[neos/fusion-form Fusion Form 19776.4k47](/packages/neos-fusion-form)[neos/fusion-afx JSX inspired compact syntax for Neos.Fusion 26984.8k63](/packages/neos-fusion-afx)[packagefactory/atomicfusion-proptypes Fusion port of react-propTypes for the fusion-prototypes PackageFactory.AtomicFusion:Component and Neos.Fusion:Component 12212.2k4](/packages/packagefactory-atomicfusion-proptypes)[sandstorm/neostwofactorauthentication 1327.0k](/packages/sandstorm-neostwofactorauthentication) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)