Coolors

Promptfree, for everyone, and the only version there is

Copy the prompt for Claude CodeCopy the prompt for CodexCopy the prompt for Cursor

Copy

Build me a colour palette tool that replaces Coolors: generate, lock, adjust, check for contrast, and export into the formats my design and code tools want.

STACK
- Node 20+ with Fastify for the saved palettes, SQLite through better-sqlite3
- The generator itself is client-side vanilla JS — it must work instantly and offline
- Colour maths with culori, or written by hand; no heavyweight dependency for what is a page of formulas
- Caddy in front

THE COLOUR MATHS, WHICH IS THE WHOLE TOOL
- Work in OKLCH internally, not HSL. HSL's lightness is not lightness: a yellow and a blue at the same HSL lightness differ by a factor of three in how bright they look, which is why HSL-based generators produce palettes that fall apart the moment they are used
- Convert to sRGB for display and clamp into gamut deliberately — reduce chroma, keep hue and lightness, and say in the interface when a colour was clipped
- Support P3 output for browsers that have it, with an sRGB fallback in the same rule
- Every formula in one module with tests against known values

GENERATING
- Space bar for a new palette, locks preserved. That is the interaction the product is famous for and it must be instant
- Schemes, each generated properly in OKLCH: monochromatic, analogous, complementary, split complementary, triadic, tetradic, and a mode that simply spreads hue evenly with controlled lightness steps
- Lightness ramps: from any base colour, a 50-to-950 scale with even perceptual steps, which is what a real interface needs and what most generators do not give you
- Constrain the generation: a hue range, a chroma ceiling, a minimum contrast between adjacent swatches
- Extract a palette from an uploaded image by clustering in OKLab, not by counting RGB values

ADJUSTING
- Click a swatch to open lightness, chroma and hue sliders, and see the hex, RGB, HSL, OKLCH and CSS colour name update together
- Drag to reorder, lock, delete, insert
- Undo and redo, with the whole history kept for the session
- Keyboard for everything: space to generate, a number to lock, arrows to move

CHECKING, WHICH IS WHY A PALETTE IS TRUSTWORTHY
- A contrast matrix: every colour against every other, with the ratio and whether it passes AA and AAA for normal text, large text and non-text
- The matrix is the default view, not a tab. A palette that has never been measured is decoration
- Colour-blindness simulation for protanopia, deuteranopia and tritanopia, applied to the palette and to a sample interface
- A live preview of a real interface — a card, a button, a chart, a table — painted in the palette, because swatches in a row lie

SAVING AND SHARING
- A palette is saved to a permanent URL, and the colours are in the URL itself so nothing is lost if the server goes away
- Optional accounts by magic link, purely to list your own palettes
- A generated preview image per palette for sharing, drawn server-side

EXPORT
- CSS custom properties, SCSS, Tailwind config, JSON, Swift, Android XML, GIMP and Adobe swatch files, SVG and PNG
- Names generated from the ramp position, not from a colour-naming API
- Copy each format with one button, and download all of them as a zip

OPERATIONS
- .env: DATABASE_PATH, BASE_URL, SESSION_SECRET
- Migrations on boot, each once
- The generator page is static and cached hard; only saving touches the server
- Backup and restore scripts
- Health endpoint

WHAT MATTERS MOST
OKLCH and the contrast matrix. Build the colour module with its tests first, then the space-bar loop. A generator that works in HSL will produce palettes that look plausible in a row of swatches and fail the moment somebody puts text on one — which is the only thing that matters.

Give me the repository, migrations, .env.example, and a README with deploy steps behind Caddy and a note on the colour space choice.