OKLCHanger VS Code extension

I was inspired by an article on the Oklab color format and decided to develop a VS Code extension that effortlessly converts any color format to Oklab.

Earlier this year, Andrey Sitnik from Evil Martians published an article explaining why they transitioned from RGB and HSL to the new Oklab color format. Oklab uses a cylindrical coordinate system incorporating a hue angle (C) and chroma (H). This approach makes representing and manipulating colors easier based on human perception, especially for color picking and blending.

The same company also created a tool for picking and converting Oklch colors. I started using this tool while working on a project, and just like the Clamp generator, I found that constantly switching between my code editor and browser to copy and paste was time-consuming. This led me to another idea: I should also build an extension for this task, given that I had already developed one to generate clamp values.

Once again, I relied on ChatGPT to help prepare and guide the script until we reached the final result.

The extension uses the culori library to convert colors to Oklab format. Initially, I struggled to get the library to work with 8-digit HEX colors, but eventually, I made it function properly.

To see it in action, select the code block containing colors you want to convert, and then choose OKLCHanger! command from the command palette:

I thoroughly enjoyed learning about Oklab colors and navigating the coding process with ChatGPT. I hope you find it helpful, too. Just remember to check if the Oklab color format is supported by using the following syntax:

@supports (color: oklch(0.87 0.14 169 / 1)) {
  :root {
    --my-color: oklch(0.87 0.14 169 / 1);
  }
}