PHPackages lukapeharda/tailwindcss-color-palette-generator - 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. lukapeharda/tailwindcss-color-palette-generator ActiveLibrary[Utility & Helpers](/categories/utility) lukapeharda/tailwindcss-color-palette-generator =============================================== Generate TailwindCSS color palette from a single color. 0.3.3(3y ago)22102.1k—9.4%[2 issues](https://github.com/lukapeharda/tailwindcss-color-palette-generator/issues)1MITPHPPHP >=7.4 Since Apr 7Pushed 3y ago3 watchersCompare [ Source](https://github.com/lukapeharda/tailwindcss-color-palette-generator)[ Packagist](https://packagist.org/packages/lukapeharda/tailwindcss-color-palette-generator)[ RSS](/packages/lukapeharda-tailwindcss-color-palette-generator/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)DependenciesVersions (7)Used By (1) 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 ------------ [](#installation) Install it via composer by running: `composer require lukapeharda/tailwindcss-color-palette-generator` Usage ----- [](#usage) First, import needed namespaces and classes: ``` use LukaPeharda\TailwindCssColorPaletteGenerator\Color; use LukaPeharda\TailwindCssColorPaletteGenerator\PaletteGenerator; ``` Then create your base color: ``` // from hex $baseColor = Color::fromHex('#ffff00'); // or from RGB $baseColor = Color::fromRgb(255, 255, 0); // or from HSL $baseColor = Color::fromHsl(60, 100, 50); // or $baseColor = Color::fromHsl(0.6, 1, 0.5); ``` Lastly, use base color to create a color palette: ``` $paletteGenerator = new PaletteGenerator; $paletteGenerator->setBaseColor($baseColor); $palette = $paletteGenerator->getPalette(); ``` Generated `$palette` will be an array where keys are TailwindCSS color steps and values `Color` objects: ``` $palette = [ 50 => Color, 100 => Color, 200 => Color, 300 => Color, ... ]; ``` You can then loop over it to generate CSS variables or use it anyway you see fit: ``` foreach ($palette as $key => $color) { echo '--color-primary-' . $key . ': #' . $color->getHex() . ';'; } ``` Extend color settings in your `tailwind.config.js` file and add `primary` color pallete: ``` module.exports = { theme: { extend: { colors: { primary: { 50: 'var(--color-primary-50, #F5F3FF)', 100: 'var(--color-primary-100, #EDE9FE)', 200: 'var(--color-primary-200, #DDD6FE)', 300: 'var(--color-primary-300, #C4B5FD)', 400: 'var(--color-primary-400, #A78BFA)', 500: 'var(--color-primary-500, #8B5CF6)', 600: 'var(--color-primary-600, #7C3AED)', 700: 'var(--color-primary-700, #6D28D9)', 800: 'var(--color-primary-800, #5B21B6)', 900: 'var(--color-primary-900, #4C1D95)', } } } } } ``` Afterwards you can use your color as regular CSS Tailwind class, for example as `text-primary-100` or `bg-primary-300`. Defaults -------- [](#defaults) `PaletteGenerator` class has some configurable options set to a sensible defaults. ### Base color step value [](#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: ``` $paletteGenerator->setBaseValue(400); ``` By setting the base value to `400` 4 lighter colors and 5 darker will be generated. ### Bounds thresholds [](#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: ``` $paletteGenerator->setThresholdLightest(80); // or $paletteGenerator->setThresholdLightest(0.8); $paletteGenerator->setThresholdDarkest(20); // or $paletteGenerator->setThresholdDarkest(0.2); ``` ### Color steps [](#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: ``` $paletteGenerator->setColorSteps([100, 200, 300, 400, 500, 600, 700]); ``` Todos ----- [](#todos) Different strategies for generating colors are planned to be developed. ### Health Score 32 — LowBetter than 72% of packages Maintenance18 Infrequent updates — may be unmaintained Popularity40 Moderate usage in the ecosystem Community10 Small or concentrated contributor base Maturity46 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure 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 Every ~148 days Recently: every ~185 days Total 6 Last Release 1127d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/cd692eb7c3ea730aae6d7dbce5e8cb641011c0e23002fd991667df87d63019b6?d=identicon)[lpeharda](/maintainers/lpeharda) --- Top Contributors [![lukapeharda](https://avatars.githubusercontent.com/u/2076692?v=4)](https://github.com/lukapeharda "lukapeharda (8 commits)") --- Tags generatorcolortailwindcsspalette ### Embed Badge ![Health badge](/badges/lukapeharda-tailwindcss-color-palette-generator/health.svg) ``` [![Health](https://phpackages.com/badges/lukapeharda-tailwindcss-color-palette-generator/health.svg)](https://phpackages.com/packages/lukapeharda-tailwindcss-color-palette-generator) ``` ### Alternatives [symfony/maker-bundle Symfony Maker helps you create empty commands, controllers, form classes, tests and more so you can forget about writing boilerplate code. 3.4k111.1M568](/packages/symfony-maker-bundle)[simplesoftwareio/simple-qrcode Simple QrCode is a QR code generator made for Laravel. 2.9k27.6M92](/packages/simplesoftwareio-simple-qrcode)[mistic100/randomcolor Generate attractive random colors 2431.4M6](/packages/mistic100-randomcolor)[spatie/color A little library to handle color conversions 38118.9M28](/packages/spatie-color)[presseddigital/colorit A slick color picker fieldtype plugin for the Craft CMS 3 control panel. 2132.1k](/packages/presseddigital-colorit) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)