PHPackages socialdept/color-scales - 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. socialdept/color-scales ActiveLibrary[Utility & Helpers](/categories/utility) socialdept/color-scales ======================= Generate Tailwind-compatible color palettes from any input color v0.1.3(2mo ago)04851MITPHPPHP ^8.3CI passing Since Nov 16Pushed 2mo agoCompare [ Source](https://github.com/socialdept/color-scales)[ Packagist](https://packagist.org/packages/socialdept/color-scales)[ RSS](/packages/socialdept-color-scales/feed)WikiDiscussions main Synced 3w ago READMEChangelog (3)Dependencies (8)Versions (6)Used By (0) [![Color Scales Header](./header.png)](https://github.com/socialdept/color-scales) ### Generate Tailwind-compatible color palettes from any input color. [](#----generate-tailwind-compatible-color-palettes-from-any-input-color) [![](https://camo.githubusercontent.com/e998c83fce6ea3aa9ba4ac7006dd7a4bee617f9005235bd32b86c5729ceba342/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736f6369616c646570742f636f6c6f722d7363616c65732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/socialdept/color-scales "Latest Version on Packagist") [![](https://camo.githubusercontent.com/50b3b2f94ebb38082c051821375ffa38a03b46be948781be537c0a1b43d7a5ed/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f736f6369616c646570742f636f6c6f722d7363616c65732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/socialdept/color-scales "Total Downloads") [![](https://camo.githubusercontent.com/c52d94c0525ce717c5c8dd46da03960a233052c7cf7973c30217bbe05254b001/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f736f6369616c646570742f636f6c6f722d7363616c65732f74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/socialdept/color-scales/actions/workflows/tests.yml "GitHub Tests Action Status") [![](https://camo.githubusercontent.com/cddd6eaf7e555defb4a1e29aec3b6eb07556e5e70c07064e00f83daecf6e90d7/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f736f6369616c646570742f636f6c6f722d7363616c65733f7374796c653d666c61742d737175617265)](LICENSE "Software License") --- What is Color Scales? --------------------- [](#what-is-color-scales) **Color Scales** is a Laravel package that generates beautiful, Tailwind-compatible color palettes from any input color. Using perceptually uniform color spaces (OKLCH & HSLuv), it creates 11-shade palettes (50-950) that match the quality of professional color tools like [tints.dev](https://tints.dev) and [uicolors.app](https://uicolors.app). Think of it as your personal color palette designer that understands color science. Why use Color Scales? --------------------- [](#why-use-color-scales) - **Matches tints.dev** - Generates palettes identical to the popular tints.dev tool - **Perceptually uniform** - Uses OKLCH and HSLuv for visually consistent results - **Automatic shade detection** - Intelligently determines where your input color fits (50-950) - **Dual modes** - Choose between `perceived` (HSLuv) or `linear` (HSL) distribution - **Multiple formats** - Export as `HEX`, `RGB`, `HSL`, `OKLCH`, or Tailwind config - **RGB gamut clamping** - Automatically adjusts out-of-gamut colors Quick Example ------------- [](#quick-example) ``` use SocialDept\ColorScales\Generator\ColorScaleGenerator; $generator = new ColorScaleGenerator(); // Generate a palette from any color $palette = $generator->generate('#d8b965'); // Get colors as hex values $colors = $palette->toHex(); // [ // '50' => '#f6f4e9', // '100' => '#ede9d3', // '200' => '#dbd3a7', // '300' => '#d8b965', // Input color (auto-detected as shade 300) // '400' => '#c9a94d', // ... // ] // Or export as Tailwind CSS config $config = $palette->toTailwindConfig('gold'); // 'gold': { // 50: '#f6f4e9', // 100: '#ede9d3', // ... // } ``` Installation ------------ [](#installation) ``` composer require socialdept/color-scales ``` Basic Usage ----------- [](#basic-usage) ### Generating Palettes [](#generating-palettes) Color Scales accepts multiple input formats: ``` use SocialDept\ColorScales\Generator\ColorScaleGenerator; $generator = new ColorScaleGenerator(); // From hex $palette = $generator->generate('#511ef3'); // From RGB $palette = $generator->generate('rgb(81, 30, 243)'); // From HSL $palette = $generator->generate('hsl(254, 88%, 54%)'); // From OKLCH $palette = $generator->generate('oklch(0.48 0.29 275)'); ``` ### Choosing a Mode [](#choosing-a-mode) Select between **perceived** (default, matches tints.dev) or **linear** mode: ``` // Perceived mode (HSLuv) - perceptually uniform, best for design $palette = $generator->generate('#d8b965', ['mode' => 'perceived']); // Or use the convenience method $palette = $generator->generatePerceived('#d8b965'); // Linear mode (HSL) - mathematically simple $palette = $generator->generate('#d8b965', ['mode' => 'linear']); // Or use the convenience method $palette = $generator->generateLinear('#d8b965'); ``` **Perceived mode** uses relative luminance for shade detection and HSLuv for color generation, matching tints.dev's output exactly. **Linear mode** uses HSL lightness for both, producing a simpler mathematical distribution. ### Advanced Options [](#advanced-options) Customize palette generation with additional parameters: ``` $palette = $generator->generate('#511ef3', [ 'mode' => 'perceived', // 'perceived' or 'linear' 'h' => 0, // Hue shift amount 's' => 0, // Saturation shift amount 'lMin' => 0, // Minimum lightness (darkest shade) 'lMax' => 100, // Maximum lightness (lightest shade) 'valueStop' => 500, // Force input color to specific shade (auto-detected by default) ]); ``` ### Export Formats [](#export-formats) Export your palette in multiple formats: ``` $palette = $generator->generate('#511ef3'); // Hex strings $hex = $palette->toHex(); // ['50' => '#f2f1ff', '100' => '#e7e6ff', ...] // RGB strings $rgb = $palette->toRgb(); // ['50' => 'rgb(242, 241, 255)', ...] // HSL strings $hsl = $palette->toHsl(); // ['50' => 'hsl(245, 100%, 97%)', ...] // OKLCH strings $oklch = $palette->toOklch(); // ['50' => 'oklch(0.975 0.02 275)', ...] // Tailwind CSS v4 config format (@theme) - OKLCH (default) $config = $palette->toTailwindV4Config('primary', 'oklch'); // @theme { // --color-primary-50: oklch(0.975 0.02 275); // --color-primary-100: oklch(0.95 0.04 275); // ... // } // Tailwind CSS v4 config format - HEX $config = $palette->toTailwindV4Config('primary', 'hex'); // @theme { // --color-primary-50: #f2f1ff; // --color-primary-100: #e7e6ff; // ... // } // Tailwind CSS v4 config format - RGB $config = $palette->toTailwindV4Config('primary', 'rgb'); // @theme { // --color-primary-50: rgb(242 241 255); // --color-primary-100: rgb(231 230 255); // ... // } // Tailwind CSS v4 config format - HSL $config = $palette->toTailwindV4Config('primary', 'hsl'); // @theme { // --color-primary-50: hsl(245.0 100.0% 97.3%); // --color-primary-100: hsl(245.0 100.0% 95.1%); // ... // } // Tailwind CSS v3 config format (OKLCH with alpha) $config = $palette->toTailwindV3Config('primary', 'oklch'); // 'primary': { // 50: 'oklch(0.975 0.02 275 / )', // 100: 'oklch(0.95 0.04 275 / )', // ... // } // Tailwind CSS v3 config format (HEX - legacy) $config = $palette->toTailwindV3Config('primary', 'hex'); // 'primary': { // 50: '#f2f1ff', // 100: '#e7e6ff', // ... // } // Array (alias for toHex) $array = $palette->toArray(); ``` ### Accessing Individual Shades [](#accessing-individual-shades) Get specific shades or all Color objects: ``` $palette = $generator->generate('#511ef3'); // Get a specific shade $shade500 = $palette->getShade(500); // Access color properties $oklch = $shade500->toOklch(); // ['l' => 0.48, 'c' => 0.29, 'h' => 275] // Get all Color objects $colors = $palette->getColors(); // [50 => Color, 100 => Color, ..., 950 => Color] ``` Use Cases --------- [](#use-cases) ### Tailwind CSS Theme [](#tailwind-css-theme) ``` $generator = new ColorScaleGenerator(); $colors = [ 'primary' => $generator->generate('#3b82f6'), 'success' => $generator->generate('#10b981'), 'warning' => $generator->generate('#f59e0b'), 'danger' => $generator->generate('#ef4444'), ]; // Export for Tailwind v4 (CSS @theme) foreach ($colors as $name => $palette) { echo $palette->toTailwindV4Config($name) . "\n\n"; } // Or export for Tailwind v3 (OKLCH with alpha support) foreach ($colors as $name => $palette) { echo $palette->toTailwindV3Config($name, 'oklch') . "\n\n"; } ``` ### Dynamic Theming [](#dynamic-theming) ``` // User selects brand color $brandColor = $request->input('brand_color'); // Generate complete palette $palette = $generator->generate($brandColor); // Store in database or cache cache()->put("brand_palette_{$userId}", $palette->toHex(), now()->addDay()); ``` ### Design System Generator [](#design-system-generator) ``` // Generate multiple palettes from a base color $baseColor = '#511ef3'; $palettes = [ 'default' => $generator->generate($baseColor), 'vibrant' => $generator->generate($baseColor, ['s' => 10]), 'muted' => $generator->generate($baseColor, ['s' => -10]), ]; // Export as CSS variables foreach ($palettes['default']->toHex() as $shade => $hex) { echo "--color-{$shade}: {$hex};\n"; } ``` ### Accessibility Tool [](#accessibility-tool) ``` // Generate palette and analyze contrast $palette = $generator->generate('#2563eb'); $textColor = $palette->getShade(50)->toHex(); // Light text $bgColor = $palette->getShade(900)->toHex(); // Dark background // Calculate contrast ratio for accessibility // (integrate with your contrast checker) ``` Testing ------- [](#testing) The package includes comprehensive tests validating palette generation accuracy: ``` ./vendor/bin/phpunit ``` Tests ensure generated palettes match tints.dev output within acceptable tolerance. Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 11+ (optional - package works standalone) - `hsluv/hsluv` ^2.0 - HSLuv color space conversions Resources --------- [](#resources) - [tints.dev](https://tints.dev) - Color palette generator inspiration - [OKLCH Color Space](https://oklch.com/) - Perceptually uniform colors - [HSLuv](https://www.hsluv.org/) - Human-friendly HSL alternative - [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors) - Color palette system Support & Contributing -------------------------- [](#support--contributing) Found a bug or have a feature request? [Open an issue](https://github.com/socialdept/color-scales/issues). Want to contribute? We'd love your help! Check out the [contribution guidelines](CONTRIBUTING.md). Credits ------- [](#credits) - [Miguel Batres](https://batres.co) - founder & lead maintainer - Inspired by [tints.dev](https://tints.dev) by [Simeon Griggs](https://simeongriggs.dev) License ------- [](#license) Color Scales is open-source software licensed under the [MIT license](LICENSE). --- **Built for Tailwind Developers** • By Social Dept. ### Health Score 40 — FairBetter than 86% of packages Maintenance84 Actively maintained with recent releases Popularity17 Limited adoption so far Community7 Small or concentrated contributor base Maturity44 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 ~47 days Total 4 Last Release 82d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/101910626?v=4)[Social Dept.](/maintainers/socialdept)[@socialdept](https://github.com/socialdept) --- Top Contributors [![btrsco](https://avatars.githubusercontent.com/u/1373528?v=4)](https://github.com/btrsco "btrsco (13 commits)") ### Code Quality TestsPHPUnit Code StylePHP CS Fixer ### Embed Badge ![Health badge](/badges/socialdept-color-scales/health.svg) ``` [![Health](https://phpackages.com/badges/socialdept-color-scales/health.svg)](https://phpackages.com/packages/socialdept-color-scales) ``` ### Alternatives [psalm/plugin-laravel Psalm plugin for Laravel 3345.1M337](/packages/psalm-plugin-laravel)[illuminate/pipeline The Illuminate Pipeline package. 9348.3M267](/packages/illuminate-pipeline)[illuminate/pagination The Illuminate Pagination package. 10533.5M991](/packages/illuminate-pagination)[illuminate/redis The Illuminate Redis package. 8314.4M362](/packages/illuminate-redis)[illuminate/cookie The Illuminate Cookie package. 224.5M132](/packages/illuminate-cookie)[aedart/athenaeum Athenaeum is a mono repository; a collection of various PHP packages 245.2k](/packages/aedart-athenaeum) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)