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.