2026-02-10 edit: Added Claude’s omission of the web application manifest.

What does it do? Link to heading

palette-replace is a PWA that replaces hex-encoded colors in text files (i.e. css, scss, …) with the closest color from a color palette. There are predefined palettes to select from which were gathered from popular editor themes:
Screenshot of PWA displaying existing color

Here’s a result in IntelliJ IDEA’s diff view that also renders colors:
IntelliJ Idea diff view

As I was browsing for Hugo themes to resurrect this blog I came across many beautiful themes. However, I did not always like the colors that were used. As replacing all the colors manually would’ve been too cumbersome I figured that this is a good opportunity to experiment some more with Claude Code.

I decided that I wanted a progressive web app so that anyone who wants to use it can simply visit a website - no need to download anything or register.

How did it go? Link to heading

While it did produce a working PWA on the first try and did indeed replace hex-encoded colors as instructed it also made three mistakes:

#1 Transparency values Link to heading

It did not replace colors that had alpha transparency values (#RRGGBBAA). Another prompt did the trick and it now replaces color values while keeping the transparency value.
IntelliJ Idea diff view

#2 Wrong literal Link to heading

It got the TypeScript type for the image processing library’s color distance algorithm wrong:
Screenshot of PWA displaying existing color

I had instructed Claude Code to use CIEDE2000 which does not simply calculate the color distance by RGB values of the colors - it accounts for the human eye’s actual perception of colors. The literal CIEDE2000, however, is not part of the library’s union type for delta algorithms:
Supported delta algorithm types

Claude Code generated the correct acronym of the algorithm, but the library simply chose to keep it shorter and thus omitted the CIE for Commission internationale de l'éclairage - the international body that issued the norm.

I have had this issue before with other LLMs where they make up a string literal that looks right and fits the context, but which is not valid from the receiver’s point of view. I remember having ChatGPT hallucinate an AWS CloudWatch metric for objects in an S3 bucket that looked perfectly fine, but did not exist. W did not get an error - the CloudFormation template deployed just fine, but the CloudWatch alarm we wanted to get triggered by the metric simply never fired.

#3 Referenced Web Application Manifest is absent Link to heading

While Claude understood that a PWA comes with a web application manifest that is referenced in the HTML head it did not generate that file it.

Nice extras Link to heading

Claude code:

  • correctly understood my wish to provide a selection of popular palettes from the web: it acquired some, extracted the color values and put them into a TypeScript file
  • it added a file name suffix with the chosen theme’s name when downloading the result
  • it decided to add a preview of the file that one selects for color replacement, but that did not prove to be very useful - I already know the file I am picking.

Uncertainties Link to heading

While Claude Code did go out and fetched colors of popular themes I did not check if correctly extracted the color values or simply generated colors. But the results do look like it did the right thing.

Ideas for the PWA Link to heading

  • have a preview of the palette colors or a preview box containing themed content
  • add a drag and drop for file picking