Download the PHP package michaelmannucci/coolor without Composer

On this page you can find all versions of the php package michaelmannucci/coolor. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package coolor

Statamic Modifier: Coolor

Make your colors coolor with Cooler. Built with PHPColors.

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 or with manual input.

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

Install via composer or the Control Panel.

How to use it

Color Manipulation Parameters

Coolor has 8 different color manipulation parameters:

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

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

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

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

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

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

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

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

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

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:

Follow these steps:

1. In your layout.antlers.html, under the opening <body> tag, enter this code:

If your_color is #ff269e, the above will output the following HTML:

This uses a :root css pseudo class, a workaround to use Statamic variables inside your tailwind.config.js file.

2. Add the following to your tailwind.config.js file.

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.

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:

All versions of coolor with dependencies

PHP Build Version
Package Version
Requires mexitek/phpcolors Version dev-master
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package michaelmannucci/coolor contains the following files

Loading the files please wait ...