Visualise OKLCH by shreyam1008

OKLCH extension + interactive explainer by shreyam1008

See modern CSS color like it deserves to be seen.

Visualise OKLCH previews OKLCH colors inline in VS Code, Cursor, Windsurf, VSCodium, and Open VSX-compatible editors, while this site doubles as a live, interactive guide to why OKLCH is a better way to write color.

View Source Open VSX Listing
  • Open VSX published
  • Native picker editing
  • TypeScript 6 RC
  • `tsgo` verified
  • 54.94 KB VSIX
  • Zero runtime color dependency
oklch(62.8% 0.258 29.23) oklch(76% 0.204 154) oklch(78% 0.17 235) oklch(84% 0.19 128) oklch(68% 0.2 328 / 88%) oklch(62.8% 0.258 29.23) oklch(76% 0.204 154) oklch(78% 0.17 235) oklch(84% 0.19 128) oklch(68% 0.2 328 / 88%)

Inline preview

background: oklch(62.8% 0.258 29.23);
#ff0000 rgb(255 0 0)

Interactive Playground

Slide the channels. Watch one color become many useful formats.

OKLCH separates perceptual lightness, chroma, hue, and alpha. This makes it easier to tune tokens with intent instead of wrestling with HSL saturation/lightness quirks. In the extension, the editor's native color picker can write the result back as OKLCH first, with hex/rgb/hsl fallbacks, and the extension defers to the built-in decorator path so the swatch only appears once.

Current swatch

Signal Red oklch(62.8% 0.258 29.23)
OKLCH oklch(62.8% 0.258 29.23)
HEX #ff0000
RGB rgb(255 0 0)
HSL Equivalent hsl(0 100% 50%)

CSS snippet

:root {
  --brand: oklch(62.8% 0.258 29.23);
}

Why this feels better

Raising OKLCH lightness moves brightness more evenly than HSL lightness, which often shifts perceived saturation at the same time.

Why It Wins

Same idea, cleaner mental model: perceptual steps instead of guesswork.

OKLCH lightness ramp

Uniform steps feel like actual steps.

HSL lightness ramp

Equivalent hue and saturation, less predictable perception.

Equivalent color writing

One modern source, many legacy outputs.

oklch(62.8% 0.258 29.23) #ff0000 rgb(255 0 0) hsl(0 100% 50%)

Native color editing

Hover or click the editor color decorator to open the built-in picker, then write the selected color back as normalized OKLCH or switch to hex, rgb, and hsl presentations.

Readable CSS

OKLCH reads like design intent. Lightness, chroma, hue, alpha. The channels map cleanly to how people tune real systems.

Better token authoring

Theme scales and semantic colors are easier to build because brightness shifts do not scramble everything else as aggressively as older models.

Modern ecosystem support

OKLCH is already everywhere modern frontend teams care about: Tailwind, design tokens, CSS color specs, and editor tooling.

Behind The Scenes

A color extension should look expensive and run cheap.

Shared decoration pools

The extension reuses one decoration type per rendered swatch instead of allocating one per match, cutting editor churn where the old implementation was slowest.

Visible-range strategy

Small files scan fully. Large files switch to padded visible-range scanning, so the extension stays useful without touching the whole document on every change.

Native-preview checks

The repo validates with both `typescript@rc` and `tsgo`, alongside Bun tests, coverage, and VSIX package checks.

Open source, release ready

The project stays small, transparent, and easy to ship: source on GitHub, packages on Open VSX, and a plain HTML docs site that deploys fast.

Test And Ship

Built to teach, verify, package, publish, and deploy.

Test locally

bun install
bun run verify
bun run coverage
bun run package

Tests cover parsing, scanning, docs/package metadata, range strategy, and integration fixtures under the `tests/` folder, including the native picker helper paths and OKLCH presentation formatting.

Release path

bun run changeset
git tag vX.Y.Z
git push origin main --tags

GitHub Actions handle CI, Pages deploys, version PRs, and store publishing. Open VSX is already live for this project under the `shreyam1008` namespace.

VS Code Primary package target with `vsce` packaging.
Open VSX Published under `shreyam1008.visualise-oklch` for open-source VS Code forks.
Cursor + Windsurf Works in editors that follow the VS Code extension model.
Maintained by shreyam1008 Source, releases, docs, and GitHub Pages live at github.com/shreyam1008/visualise-oklch.