cohesive-colors is a small TypeScript design tool, released under the BSD-3-Clause licence, that helps designers and front-end developers add a tint to existing colors so that a set of separate colors reads as one cohesive color scheme.

What it is

cohesive-colors is a browser-based utility for building more cohesive color palettes. It belongs to the front-end and UI design-tooling ecosystem: the codebase is written in TypeScript, and the repository is tagged with cohesive, cohesive-color-schemes, color, color-scheme, design, design-tool, design-tools, frontend, tool and ui. This registry files it under Miscellaneous / Design & Prototyping. The interactive application is paired with a separate library, colorblendjs, which the README points to for programmatic use. The README credits the original idea to _erica, and the project's hosted instance lives at https://javier.xyz/cohesive-colors. Community interest is modest and settled rather than fast-moving, with 533 stars, 70 forks and no open issues.

The concrete problem it solves is palette incoherence. A palette assembled from an existing brand color, a screenshot, a chart series and a couple of hand-picked accents usually reads as a set of unrelated hues, because each color carries its own temperature and saturation. cohesive-colors addresses this by adding a tint to the colors already in use, so the whole set acquires a shared cast and starts to look deliberate. In that role it replaces adjusting each color by hand, one at a time, until the palette happens to hold together, and for the programmatic case it replaces bespoke blending code, which the README redirects to colorblendjs.

Key capabilities

• Adds a tint to existing colors, which is the mechanism behind the "more cohesive color palettes" claim in the README and the tagline.
• Runs as a hosted web tool at https://javier.xyz/cohesive-colors, so the interactive workflow needs no local installation.
• Ships a companion library, colorblendjs, for programmatic use in place of the web interface.
• Is implemented in TypeScript and released under the BSD-3-Clause licence.
• Supports local development with pnpm: pnpm i to install dependencies, then pnpm run dev to serve the app at http://localhost:3000/cohesive-colors.
• Documents its interface with a screenshot stored at docs-assets/screenshot.jpg in the repository.
• Is classified against design, frontend and color-scheme topics, placing it with UI palette work rather than with image editing or print tooling.

Who uses it and how

• Designers who already have a set of colors, typically brand or product colors, and need them to share a common tint before handing a palette to implementation.
• Front-end developers choosing color tokens for a UI, who can experiment in the hosted tool and then move the repeated logic into colorblendjs in a build step.
• Small teams that prefer to run the tool themselves: cloning the repository and starting the dev server on port 3000 keeps palette work inside their own environment.
• Maintainers of design systems who need a repeatable answer to "why do these colors look wrong together", and want a single tinting operation rather than per-color manual edits.

Getting started

Open the hosted application at https://javier.xyz/cohesive-colors, or clone the repository and run pnpm i followed by pnpm run dev to serve it locally at http://localhost:3000/cohesive-colors. For programmatic use, the README directs developers to colorblendjs rather than to the web app.

How it compares

No list of paid products is given for this project. Among the similar tools named in the facts, cohesive-colors occupies the interactive end of the pair: it is the browser tool for experimenting with a palette, while its sibling colorblendjs is the library for embedding the same tinting in code, and the README treats the two as complementary rather than competing. It therefore does not try to be a full design or image editor; it does one operation on a set of colors.

When to use it — and when not to

Anyone self-hosting the tool needs a Node environment with pnpm available, and nothing more demanding than that is documented. The README is sparse: it gives local development commands and a pointer to colorblendjs, but no published package name, no deployment instructions and no usage walkthrough, and the licence appears in repository metadata rather than in the README text. Developers who want a documented, installable library rather than a web page should start with colorblendjs, and teams that need broad palette generation, accessibility contrast checking or asset export will find this project's scope narrower than that.

pnpm i
pnpm run dev // http://localhost:3000/cohesive-colors