PHPackages michaelmannucci/shades - 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. michaelmannucci/shades ActiveLibrary michaelmannucci/shades ====================== A modifier that generates color shades from a given hex color. It can be used with the color fieldtype or with manual input. It can be used generate Tailwind CSS color palettes or to manually generate individual shades and tints. v1.0.0(3y ago)0665MITPHP Since Nov 8Pushed 3y ago1 watchersCompare [ Source](https://github.com/michaelmannucci/shades)[ Packagist](https://packagist.org/packages/michaelmannucci/shades)[ RSS](/packages/michaelmannucci-shades/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)DependenciesVersions (2)Used By (0) Statamic Modifier: Shades ========================= [](#statamic-modifier-shades) What is it ---------- [](#what-is-it) A modifier that generates color shades from a given hex color. It can be used with the [color fieldtype](https://www.statamic.dev/fieldtypes/color) or with manual input. It can be used generate [Tailwind CSS color palettes](https://tailwindcss.com/docs/customizing-colors) or to manually generate individual shades and tints. How to install it ----------------- [](#how-to-install-it) Install via composer or the Control Panel. ``` composer require michaelmannucci/shades ``` How to use it ------------- [](#how-to-use-it) *Shades* can be used in two ways: automatically generate Tailwind CSS color palettes, or manually generate tints and/or shades. ### Tailwind CSS palette [](#tailwind-css-palette) You can also automatically generate 10 Tailwind CSS shades and tints to use with Tailwind CSS (eg. bg-yourcolor-500, text-yourcolor-200, etc.). This works by utilizing [CSS `:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) and connecting it to your `tailwind.config.js` file. The formula is: ``` {{ color | shades:tailwind:name }} ``` - `color` would be the color you want to modify. You can use a color fieldtype, or enter one manually (eg. `#ff269e`.) - `shades` is the name of the modifier - `tailwind` lets the modifier know that you intend to use it to generate a Tailwind CSS palette, instead of generating shades or tints manually - `name` is what you want the custom Tailwind palette to be named (eg. `brand`, `magenta`, etc.) so that it can be used in your templates (eg. `text-brand-500`, `bg-magenta-200`, etc.) For example, if you wanted to use a **Statamic pink** palette named `statamic` in your templates, you would: #### 1. Put the following in your `layout.antlers.html` file, right under the `` tag: [](#1-put-the-following-in-your-layoutantlershtml-file-right-under-the-body-tag) ``` {{ "#ff269e" | shades:tailwind:statamic }} ``` This will generate the following output: ``` :root{--statamic-50:#ffe9f5;--statamic-100:#ffd4ec;--statamic-200:#ffa8d8;--statamic-300:#ff7dc5;--statamic-400:#ff51b1;--statamic-500:#ff269e;--statamic-600:#cc1e7e;--statamic-700:#99175f;--statamic-800:#660f3f;--statamic-900:#330820;} ``` #### 2. In your `tailwind.config.js` file, add the following: [](#2-in-your-tailwindconfigjs-file-add-the-following) ``` module.exports = { theme: { extend: { colors: { 'statamic': { 50: 'var(--statamic-50)', 100: 'var(--statamic-100)', 200: 'var(--statamic-200)', 300: 'var(--statamic-300)', 400: 'var(--statamic-400)', 500: 'var(--statamic-500)', 600: 'var(--statamic-600)', 700: 'var(--statamic-700)', 800: 'var(--statamic-800)', 900: 'var(--statamic-900)', }, } }, }, } ``` You can now use this color palette in all Tailwind CSS color utilities (eg. `border-statamic-400`, `bg-statamic-900`, etc.). **Note:** By default, the original color (in this case `#ff269e`) would be `statamic-500`. ### Manual generation [](#manual-generation) The formula for manual generation of a tint or shade is: ``` {{ color | shades:(tint or shade):percentage }} ``` - `color` would be the color you want to modify. You can use a color fieldtype, or enter one manually (eg. `#01d0aa`.) - `shades` is the name of the modifier - `tint` or `shade` lets the modifier know whether you want to make a brighter tint, or a darkers shade - `percentage` is the degree to which you want to modify the original color For example, if you wanted to generate a 50% brighter tint of the **Statamic green** color, you would do: ``` {{ "#01d0aa" | shades:tint:50 }} ``` This would return `#80e8d5`. Or, if you wanted to generate a 20% darker variant of the **Statamic green** color, you would do: ``` {{ "#01d0aa" | shades:shade:20 }} ``` This would return `#01a688` ### Health Score 24 — LowBetter than 32% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity16 Limited adoption so far Community4 Small or concentrated contributor base Maturity46 Maturing project, gaining track record 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 Unknown Total 1 Last Release 1286d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/54dae6dce61e365daca2822b106de280ba15cda236eb7d5b25fc6aad308ded01?d=identicon)[michaelmannucci](/maintainers/michaelmannucci) ### Embed Badge ![Health badge](/badges/michaelmannucci-shades/health.svg) ``` [![Health](https://phpackages.com/badges/michaelmannucci-shades/health.svg)](https://phpackages.com/packages/michaelmannucci-shades) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)