neophp/colorpalette-package

Dev-only color palette generator and WCAG contrast checker for NeoPHP

v0.2.1 2026-08-08 05:41 UTC

Requires

• php: >=8.5

MIT

Published on Packagist.org on 2026-08-08 05:41 UTC

README

A dev-only color tool for NeoPHP: generate a full tint/shade scale from a base color, check WCAG contrast between two colors, and convert HEX/RGB/HSL live — entirely client-side.

Structure

colorpalette-package/
├── composer.json
├── README.md
└── src/
    ├── NeoColorPalettePackage.php
    ├── Middleware/
    │   └── DevOnlyMiddleware.php
    ├── Controllers/
    │   └── ColorPaletteController.php
    ├── Assets/
    │   ├── css/colorpalette.css
    │   └── js/colorpalette.js
    └── Templates/
        ├── components/
        │   └── ColorPalette.macro.html.twig
        └── pages/
            └── builder.html.twig

Dev-only, by design

The standalone page's route is protected by DevOnlyMiddleware, checking Config/app.config.php's environment key. Outside environment: dev, it returns a blocked response.

The ColorPalette macro makes no server calls, so it has no such restriction built in — guard any page you embed it in yourself if it should stay dev-only in your project.

Installation

php bin/neo package:require neophp/colorpalette-package --project=MyProject

Register it in the project's Config/app.config.php:

return [
    // ...
    'packages' => [
        \Vendor\NeoPHP\ColorPalettePackage\NeoColorPalettePackage::class,
    ],
];

No configuration file, no migration.

Usage

Standalone page

Visit /_colorpalette/ (only reachable in dev).

Embedding in your own page

{% import '@ColorPalette/components/ColorPalette.macro.html.twig' as ColorPalette %}
<link rel="stylesheet" href="/packages-assets/ColorPalette/css/colorpalette.css">

{{ ColorPalette.render() }}

<script src="/packages-assets/ColorPalette/js/colorpalette.js"></script>

ColorPalette.render(instanceId = 'cp') accepts an optional instanceId to avoid collisions if rendered more than once on the same page.

What it provides

Color scale

Enter a base color; a 10-step scale (50 → 900, Tailwind-style) is generated by varying lightness while keeping hue and saturation from your base color. Click any swatch to copy its hex code.

Contrast checker

Enter a foreground and background color; the tool computes the WCAG contrast ratio and shows whether it passes AA (4.5:1), AA Large (3:1), or AAA (7:1) — the same thresholds used by accessibility audits.

Converter

Enter a hex color and get its RGB and HSL equivalents instantly.

Theming

Every visual value is a CSS custom property scoped to .cp-layout:

.cp-layout {
    --cp-accent: #6366f1;
    --cp-bg: #161923;
    --cp-bg-alt: #1b2030;
    --cp-border: #2d3342;
    --cp-text: #e5e7eb;
    --cp-text-muted: #9ca3af;
}

License

MIT