Download the PHP package lukapeharda/tailwindcss-color-palette-generator without Composer
On this page you can find all versions of the php package lukapeharda/tailwindcss-color-palette-generator. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download lukapeharda/tailwindcss-color-palette-generator
More information about lukapeharda/tailwindcss-color-palette-generator
Files in lukapeharda/tailwindcss-color-palette-generator
Package tailwindcss-color-palette-generator
Short Description Generate TailwindCSS color palette from a single color.
License MIT
Informations about the package tailwindcss-color-palette-generator
TailwindCSS Color Palette Generator
Generates TailwindCSS color palette (ranging from 50 to 900) from a single base color (which can be given as a hex value, HSL or RGB).
Uses HSL color model and base color lightness to generate step colors by raising (or lowering) lightness in steps (and considering bound thresholds).
Installation
Install it via composer by running:
composer require lukapeharda/tailwindcss-color-palette-generator
Usage
First, import needed namespaces and classes:
Then create your base color:
Lastly, use base color to create a color palette:
Generated $palette will be an array where keys are TailwindCSS color steps and values Color objects:
You can then loop over it to generate CSS variables or use it anyway you see fit:
Extend color settings in your tailwind.config.js file and add primary color pallete:
Afterwards you can use your color as regular CSS Tailwind class, for example as text-primary-100 or bg-primary-300.
Defaults
PaletteGenerator class has some configurable options set to a sensible defaults.
Base color step value
By default base color step value is 500. This means that 5 lighter colors and 4 darker will be generated in a palette.
You can change it by calling setBaseValue method on the PaletteGenerator object:
By setting the base value to 400 4 lighter colors and 5 darker will be generated.
Bounds thresholds
By default the lightest generated color will have a lightness value of 90% and the darkest will have the lightness value of 10%.
You can change this by calling setThresholdLightest and setThresholdDarkest methods on PaletteGenerator object:
Color steps
By default, TailwindCSS 2.x color steps range is used (from 50 to 900).
You can override it by calling setColorSteps method on PaletteGenerator object by giving it an array with step values:
Todos
Different strategies for generating colors are planned to be developed.