PHPackages fruitstudios/colorit - 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. fruitstudios/colorit Abandoned → [presseddigital/colorit](/?search=presseddigital%2Fcolorit)Craft-plugin[Utility & Helpers](/categories/utility) fruitstudios/colorit ==================== A slick color picker fieldtype plugin for the Craft CMS 3 control panel. 1.0.8(7y ago)209.4k↓83.3%8[19 issues](https://github.com/fruitstudios/craft-colorit/issues)[3 PRs](https://github.com/fruitstudios/craft-colorit/pulls)proprietaryPHPCI failing Since Jun 5Pushed 1y ago3 watchersCompare [ Source](https://github.com/fruitstudios/craft-colorit)[ Packagist](https://packagist.org/packages/fruitstudios/colorit)[ RSS](/packages/fruitstudios-colorit/feed)WikiDiscussions master Synced 3d ago READMEChangelog (10)Dependencies (1)Versions (11)Used By (0) [![Colorit](resources/img/colorit.svg)](https://github.com/presseddigital/colorit) Colorit plugin for Craft CMS 3 ============================== [](#colorit-plugin-for-craft-cms-3) A slick color picker fieldtype plugin for the Craft CMS 3 control panel. [That's a mouthful](https://www.youtube.com/watch?v=uFj5_2gk0rA). This fieldtype plugin gives your content editors a simple tool for selecting from a color palette. Colorit also lets you create custom presets that can be selected when creating colorit fields. Requirements ------------ [](#requirements) This plugin requires Craft CMS 3.0.0, or later. Installation ------------ [](#installation) ### Plugin Store [](#plugin-store) Log into your control panel, hit up the 'Plugin Store', search for this plugin and install. ### Composer [](#composer) Open terminal, go to your Craft project folder and use composer to load this plugin. Once loaded you can install via the Craft Control Panel, go to Settings → Plugins, locate the plugin and hit “Install”. ``` cd /path/to/project composer require presseddigital/colorit ``` In Use ------ [](#in-use) Select a color from the palette. [![Field Setting](resources/img/colorit-field.png)](resources/img/colorit-field.png) Get a live preview when setting opacity. [![Opacity Setting](resources/img/colorit-field-opacity.png)](resources/img/colorit-field-opacity.png) Define a custom color. [![Custom Setting](resources/img/colorit-field-custom.png)](resources/img/colorit-field-custom.png) Option field descriptions. [![Field Descriptions](resources/img/colorit-choose-desc.png)](resources/img/colorit-choose-desc.png) Templating ---------- [](#templating) Each Colorit fieldtype returns a Color model. ``` {{ entry.myColoritFieldName }} - (string) // Color in format as per field settings) {{ entry.myColoritFieldName.color }} - (string) // Returns the color {{ entry.myColoritFieldName.color(format) }} - (string) // Optional format (hex, rgb, rgba) {{ entry.myColoritFieldName.opacity }} - (integer) // The opacity value {{ entry.myColoritFieldName.handle }} - (string) // The color handle {{ entry.myColoritFieldName.isCustomColor }} - (bool) // Is this a custom colour {{ entry.myColoritFieldName.isTransparent }} - (bool) // Is this transparent {{ entry.myColoritFieldName.hasColor }} - (bool) // Does the field have a color set {{ entry.myColoritFieldName.palette }} - (array) // All available colours in the palette {{ entry.myColoritFieldName.hex }} - (string) // Get the hex value {{ entry.myColoritFieldName.hashhex }} - (string) // Get the hex value including # {{ entry.myColoritFieldName.rgb }} - (string) // Get the rgb value {{ entry.myColoritFieldName.rgba }} - (string) // Get the rgba value {{ entry.myColoritFieldName.r }} - (string) // Get the red value {{ entry.myColoritFieldName.g }} - (string) // Get the green value {{ entry.myColoritFieldName.b }} - (string) // Get the blue value {{ entry.myColoritFieldName.a }} - (string) // Get the alpha value {{ entry.myColoritFieldName.red }} - (string) // Get the red value {{ entry.myColoritFieldName.green }} - (string) // Get the green value {{ entry.myColoritFieldName.blue }} - (string) // Get the blue value {{ entry.myColoritFieldName.alpha }} - (string) // Get the alpha value ``` Utilities --------- [](#utilities) Colorit makes a few utilities avaiable in your templates. ``` {{ craft.colorit.colours.baseColours }} - (array) {{ craft.colorit.colours.baseColoursAsOptions }} - (array) {{ craft.colorit.colours.hexIsWhite(hex) }} - (bool) {{ craft.colorit.colours.hexIsBlack(hex) }} - (bool) {{ craft.colorit.colours.hexIsTransparent(hex) }} - (bool) {{ craft.colorit.colours.hexToRgb(hex) }} - (string) {{ craft.colorit.colours.hexToRgba(hex, opacity) }} - (string) ``` Twig Extensions --------------- [](#twig-extensions) ``` {{ ('#555')|hexIsWhite }} - (bool) {{ ('#555')|hexIsBlack }} - (bool) {{ ('#555')|hexIsTransparent }} - (bool) {{ ('#555')|hexToRgb }} - (string) {{ ('#555')|hexToRgba(opacity = 100) }} - (string) ``` Presets ------- [](#presets) Colorit lets you create custom presets that can be selected when creating colorit fields. For example, you might want to create a "Brand" preset and another for "Secondary" colors. If you make changes to the preset, it will update any fields where it is in use. [![Preset Setting](resources/img/colorit-preset-settings.png)](resources/img/colorit-preset-settings.png) When creating a new Colorit field you'll have the option to choose one of your presets or create custom field settings for that field. Settings include defining your color palette, appending transparent, black and white. Allowsing custom colours to be created, opacity and label settings. [![Preset Choice](resources/img/colorit-choose-preset.png)](resources/img/colorit-choose-preset.png) Tailwind CSS ------------ [](#tailwind-css) You can easily use Colorit with Tailwind CSS by outputting the Colorit field handle to the class attribute. [![Tailwind](resources/img/colorit-choose-tailwind.png)](resources/img/colorit-choose-tailwind.png) [![Tailwind Palette](resources/img/colorit-choose-tailwind-palette.png)](resources/img/colorit-choose-tailwind-palette.png) [![Tailwind Twig](resources/img/colorit-choose-twig.png)](resources/img/colorit-choose-twig.png) Brought to you by [Pressed Digital](https://presseddigital.co.uk). ### Health Score 34 — LowBetter than 77% of packages Maintenance7 Infrequent updates — may be unmaintained Popularity30 Limited adoption so far Community14 Small or concentrated contributor base Maturity69 Established project with proven stability Bus Factor1 Top contributor holds 58.6% 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 ~28 days Total 9 Last Release 2674d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/9f4d08c9f1aa2ba3b8ac8155bfd559bad2e8519f2bf5122274077a64b6801a01?d=identicon)[fruitstudios](/maintainers/fruitstudios) --- Top Contributors [![ben-callaway](https://avatars.githubusercontent.com/u/7083462?v=4)](https://github.com/ben-callaway "ben-callaway (17 commits)")[![samhibberd](https://avatars.githubusercontent.com/u/1846063?v=4)](https://github.com/samhibberd "samhibberd (12 commits)") --- Tags craftcmsfieldtypeplugincolorcmsCraftcraftcmscraft-plugincolourcolorscolourspaletteswatch ### Embed Badge ![Health badge](/badges/fruitstudios-colorit/health.svg) ``` [![Health](https://phpackages.com/badges/fruitstudios-colorit/health.svg)](https://phpackages.com/packages/fruitstudios-colorit) ``` ### Alternatives [presseddigital/colorit A slick color picker fieldtype plugin for the Craft CMS 3 control panel. 2132.1k](/packages/presseddigital-colorit)[doublesecretagency/craft-matrixcolors Identify your matrix blocks by giving each type a different color. 4518.3k](/packages/doublesecretagency-craft-matrixcolors)[verbb/navigation Create navigation menus for your site. 90683.7k17](/packages/verbb-navigation)[verbb/formie The most user-friendly forms plugin for Craft. 101372.9k40](/packages/verbb-formie)[verbb/comments Add comments to your site. 13753.1k](/packages/verbb-comments)[verbb/tablemaker Create customizable and user-defined table fields. 40168.8k1](/packages/verbb-tablemaker) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)