whatisgithub

What is chroma-shift?

ciatel-arlanta/chroma-shift — explained in plain English

Analysis updated 2026-05-18

0TypeScriptAudience · designerComplexity · 2/5LicenseSetup · easy

In one sentence

A free browser tool that recolors UI screenshots into a new theme, with no uploads, accounts, or AI involved.

Mindmap

mindmap
  root((ChromaShift))
    What it does
      Recolors screenshots
      Detects color roles
      Exports theme tokens
    Tech stack
      Next.js
      React
      TypeScript
      Tailwind CSS
    Use cases
      Theme prototyping
      Design tokens
      Accessibility checks
    Audience
      Designers
      Frontend developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Recolor a product screenshot into dark mode or another preset instantly.

USE CASE 2

Generate CSS, Tailwind, or JSON design tokens from an existing UI image.

USE CASE 3

Check WCAG contrast scores for a new color theme before shipping it.

USE CASE 4

Prototype different app themes for a demo without touching code.

What is it built with?

TypeScriptNext.jsReactTailwind CSSculorichroma-js

How does it compare?

ciatel-arlanta/chroma-shift0xradioac7iv/tempfsabboskhonov/hermium
Stars000
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderatemoderate
Complexity2/53/54/5
Audiencedesignerdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min
Free for personal and commercial use, as long as you keep the copyright notice.

So what is it?

ChromaShift is a browser based tool that remaps the color theme of a UI screenshot or SVG file. You upload an image of an app or dashboard, and it automatically detects which parts of the image act as background, surface, text, accent, and border colors, then remaps all of them to a new theme you choose. You can pick from six built in presets, including Dark, Modern SaaS, Pastel, Cyberpunk, Monochrome, and Accessibility, or paste in your own custom color palette copied from a site like coolors.co. The result is a new version of your screenshot rendered in the chosen theme, which you can compare against the original with a drag to compare split view. Everything runs entirely inside your browser. No image is uploaded to a server, no account is required, and no AI service is called at any point, so there is nothing to sign up for and nothing sent anywhere. The color remapping relies on classical image processing math rather than machine learning: a bilateral filter smooths out gradient noise while keeping hard edges sharp, a weighted k-means algorithm groups similar colors together, and each group is then merged using a perceptual color distance formula so that visually similar clusters do not get split apart. Once the color groups are identified, each one is assigned a semantic role such as background or accent, and the new theme's colors are mapped onto them while preserving the original lightness relationships, so shadows and gradients still look natural instead of flattened. When you are happy with a result, you can export the new palette as CSS custom properties, a Tailwind theme snippet, or a JSON token file for use in your own project. A built in accessibility panel scores the contrast between text and background colors against WCAG guidelines as you experiment with different themes. The project is built with Next.js, React, and TypeScript, styled with Tailwind CSS, and uses the culori and chroma-js libraries for the underlying color math. It is released under the MIT license, free for personal and commercial use.

Copy-paste prompts

Prompt 1
Help me integrate ChromaShift's OKLCH lightness relative remapping into my own image tool.
Prompt 2
Explain how weighted k-means and perceptual color merging work together for color clustering.
Prompt 3
Show me how to add a new theme preset to ChromaShift.
Prompt 4
Write a script that exports ChromaShift's theme tokens directly into a Tailwind config file.

Frequently asked questions

What is chroma-shift?

A free browser tool that recolors UI screenshots into a new theme, with no uploads, accounts, or AI involved.

What language is chroma-shift written in?

Mainly TypeScript. The stack also includes TypeScript, Next.js, React.

What license does chroma-shift use?

Free for personal and commercial use, as long as you keep the copyright notice.

How hard is chroma-shift to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is chroma-shift for?

Mainly designer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.