PHPackages michaelmannucci/coolor - 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. michaelmannucci/coolor ActiveLibrary[Utility & Helpers](/categories/utility) michaelmannucci/coolor ====================== A Statamic modifier manipulates the hue, saturation, and/or luminance of any given color. v1.0.0(3y ago)022MITPHP Since Nov 28Pushed 3y ago1 watchersCompare [ Source](https://github.com/michaelmannucci/Coolor)[ Packagist](https://packagist.org/packages/michaelmannucci/coolor)[ RSS](/packages/michaelmannucci-coolor/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (1)Versions (2)Used By (0) Statamic Modifier: Coolor ========================= [](#statamic-modifier-coolor) Make your colors coolor with Cooler. Built with [PHPColors](https://github.com/mexitek/phpColors). What is it ---------- [](#what-is-it) A modifier that can manipulate the hue, saturation, and/or luminance of any given color. It works by converting the HEX to HSL, making the chnages you specify, and returning the new HEX value. It can be used with the [color fieldtype](https://www.statamic.dev/fieldtypes/color) or with manual input. What is it for -------------- [](#what-is-it-for) Generating variants of a color. For example, you could select a single color in the dashboard, and then generate a 10% lighter variant of it for hover states, a 5% luminance level/5% saturation level variant for body text, a 95% luminance level/5% luminance level variant for tinted off-white backgrounds, etc. How to install it ----------------- [](#how-to-install-it) Install via composer or the Control Panel. ``` composer require michaelmannucci/coolor ``` How to use it ------------- [](#how-to-use-it) ### Color Manipulation Parameters [](#color-manipulation-parameters) *Coolor* has 8 different color manipulation parameters: #### 1. `addhue` [](#1-addhue) Used to increase the hue value of a color. Since the hue of a color is a 360° loop, it's helpful to think of this as how much degrees you want to add to the hue. For example, if you wanted a 120° variant of `your_color`, you would do: `{{ your_color | coolor:addhue:120 }}` So, if `your_color` was **\#ff269e**, you would get **\#9eff26** in return. #### 2. `subhue` [](#2-subhue) This is the same as `addhue`, except it subtracts from the hue value of a color. For example, if you wanted a -75° variant of `your_color`, you would do: `{{ your_color | coolor:subhue:75 }}` So, if `your_color` was **\#ff269e**, you would get **\#5024ff** in return. #### 3. `lum` [](#3-lum) Used to set the luminance value of a color. 0 is black (#000000), and 100 is white (#ffffff). For example, if you wanted a variation of `your_color` that has a luminance level of 10 (very dark), you would do: `{{ your_color | coolor:lum:10 }}` So, if `your_color` was **\#ff269e**, you would get **\#33001c** in return. #### 4. `tint` [](#4-tint) Used to generate a brighter variant of a color. The difference between `tint` and `lum` is `lum` sets the luminance level to whatever value you enter, whereas `tint` increases the lumenance level by the percentage value you enter. For example, if you wanted a variation of `your_color` that was 10% brighter: `{{ your_color | coolor:tint:10 }}` So, if `your_color` was **\#ff269e**, you would get **\#ff3ca8** in return. #### 5. `shade` [](#5-shade) Used to generate a darker variant of a color. For example, if you wanted a variation of `your_color` that was 20% darker: `{{ your_color | coolor:shade:20 }}` So, if `your_color` was **\#ff269e**, you would get **\#cc1e7e** in return. #### 6. `sat` [](#6-sat) Used to set the saturation value of a color. For example, if you wanted a variation of `your_color` that has a saturation level of 10, you would do: `{{ your_color | coolor:sat:10 }}` So, if `your_color` was **\#ff269e**, you would get **\#9d8894** in return. #### 7. `addsat` [](#7-addsat) Used to generate a more saturated variant of a color. The difference between `addsat` and `sat` is `sat` sets the saturation level to whatever value you enter, whereas `addsat` increases the saturation level by the percentage value you enter. For example, if you wanted a variation of `your_color` that was 25% more saturated: `{{ your_color | coolor:addsat:25 }}` So, if `your_color` was **\#c85b97**, you would get **\#e3409a** in return. #### 8. `subsat` [](#8-subsat) Used to generate a less saturated variant of a color. For example, if you wanted a variation of `your_color` that was 50% less saturated: `{{ your_color | coolor:subsat:50 }}` So, if `your_color` was **\#ff269e**, you would get **\#c95c98** in return. ### Mixing Manipulations [](#mixing-manipulations) Of course, you can also mix any of the parameters. For example, if you wanted a 90° hue variation of `your_color` that was 50% less saturated, with a luminance level of 10, you would do: `{{ your_color | coolor:addhue:90:subsat:50:lum:10 }}` So, if `your_color` was **\#ff269e**, you would get **\#736f26** in return. Use Case & Tailwind CSS --------------------------- [](#use-case--tailwind-css) Okay, so let's see a practical use case. Let's say you want to generate 4 variations of a color from the dashboard for use with Tailwind CSS in your themes. You want: - Primary (the color as is) - Hover (for hovering over buttons and such) - Dark (for body text that is almost black, but has a hint of your color) - Light (for off-white elements that have a hint of your color) ### Follow these steps: [](#follow-these-steps) #### 1. In your `layout.antlers.html`, under the opening `` tag, enter this code: [](#1-in-your-layoutantlershtml-under-the-opening-body-tag-enter-this-code) ``` :root{ --brand-primary:{{ your_color }}; --brand-hover:{{ your_color | coolor:tint:10 }}; --brand-dark:{{ your_color | coolor:sat:15:lum:10 }}; --brand-light:{{ your_color | coolor:sat:5:lum:90 }}; } ``` If `your_color` is **\#ff269e**, the above will output the following HTML: ``` :root{ --brand-primary:#ff269e; --brand-hover:#ff3ca8; --brand-dark:#1d161a; --brand-light:#e7e4e6; } ``` This uses a [`:root` css pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:root), a workaround to use Statamic variables inside your `tailwind.config.js` file. #### 2. Add the following to your `tailwind.config.js` file. [](#2-add-the-following-to-your-tailwindconfigjs-file) ``` module.exports = { theme: { extend: { colors: { 'brand': { primary: 'var(--brand-primary)', hover: 'var(--brand-hover)', dark: 'var(--brand-dark)', light: 'var(--brand-light)' }, } }, }, } ``` You can now use this color palette in all Tailwind CSS color utilities (eg. `border-brand-primary`, `bg-brand-light`, etc.). #### 3. Create a safelist. [](#3-create-a-safelist) This part sucks, but Tailwind isn't going to see your colors because they're not actually in the templates, the tags are. In order to make sure they're included, create a safelist. There's a few ways to do this, but what I found easiest is to create a `safelist.txt` in the root folder with all the styles I want to make sure it keeps (eg. bg-brand-primary) and add it to the `content` section of `tailwind.config.js`, like so: ``` content: [ './resources/**/*.antlers.html', './resources/**/*.blade.php', './resources/**/*.vue', './content/**/*.md', './safelist.txt' ], ``` ### Health Score 21 — LowBetter than 18% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity6 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 1268d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/54dae6dce61e365daca2822b106de280ba15cda236eb7d5b25fc6aad308ded01?d=identicon)[michaelmannucci](/maintainers/michaelmannucci) ### Embed Badge ![Health badge](/badges/michaelmannucci-coolor/health.svg) ``` [![Health](https://phpackages.com/badges/michaelmannucci-coolor/health.svg)](https://phpackages.com/packages/michaelmannucci-coolor) ``` ### Alternatives [proteusthemes/wp-customizer-utilities Advanced WordPress customizer controls and settings for better user experience. 329.4k1](/packages/proteusthemes-wp-customizer-utilities)[karlmonson/laravel-ping Simple Ping For Laravel Applications 2939.4k](/packages/karlmonson-laravel-ping)[winter/wn-tailwindui-plugin Provides a TailwindUI-based skin for the Winter CMS backend. 1812.8k](/packages/winter-wn-tailwindui-plugin) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)