Palette Vault

Color palettes inside VS Code. Generate a scheme, insert it in the format of the file you are editing, convert any color between HEX, RGB, HSL and OKLCH, and check contrast against WCAG.

Everything runs locally. No account, no network, no telemetry.

What it does

Insert a palette in the format of the file

This is the reason the extension exists rather than being a link to a website. Generating four colors is the easy part. Getting them into your file in a form you do not then have to reformat is the part a web page cannot do.

Run Palette Vault: Insert a generated palette and the output follows the language of the active editor:

A language it does not recognize gets plain hex rather than a guess, because a wrong guess costs more than no guess. You can override the whole mapping with the paletteVault.insertFormat setting.

Insert a palette as a comment

Palette Vault: Insert a generated palette as a comment writes the colors in the comment syntax of the file, on a line of its own above the cursor, so nothing you already wrote is disturbed.

// #00D7F8  #F99BE5  #F5B800  #A4DFFF
$accent: [#264653](https://github.com/PaletteVault/palettevault-vscode/issues/264653);

// for JavaScript and Sass, /* */ for CSS, # for YAML and Python, -- for SQL and Lua, ; for the Lisps, <!-- --> for Markdown and HTML.

In JSON it refuses and says why: JSON has no comments, and a comment marker would make the file invalid. In a language it has not been taught, it refuses rather than guessing a marker that could break the file.

Build a palette around a color you already have

Put the cursor on a hex code and run Build a palette around the color under the cursor. The rest of the palette is derived from it instead of being generated from nothing, so it fits what is already in the file.

Convert a color, including to OKLCH

Convert the color under the cursor lists the same color as HEX, rgb(), hsl() and oklch(). Pick one and it goes to your clipboard.

OKLCH is here because it is the one modern stylesheets increasingly want and the one no editor offers: the color picker built into VS Code converts between HEX, RGB and HSL only.

Check contrast

Check contrast between two colors reports the ratio against all five WCAG thresholds at once rather than as a single pass or fail.

A ratio of 3.2 fails body text and passes large text and interface components. Collapsing that into one verdict hides the case where the fix is to change the type size rather than the color.

Getting at the commands

All five are in the Command Palette under Palette Vault, and in the editor right-click menu under a single Palette Vault submenu.

The two commands that need a color under the cursor appear in the menu only when there is one. A menu item whose only possible reply is "put the cursor on a hex color" teaches you to distrust the menu.

Any of them can be given a keyboard shortcut in Settings, Keyboard Shortcuts.

Settings

Schemes: monochrome, analogous, complementary, split complementary, triad, tetrad, neutral, gradient.

What is deliberately missing

Color swatches beside hex codes. VS Code draws those itself in CSS, SCSS and Less, and opens its own picker when you click one. Reimplementing it would put two decorations on the same line and win nothing.

Extraction from an image. The extension host is Node with no DOM, so there is no canvas to decode an image into pixels. Doing it properly needs a webview or an image-decoding dependency, and both are larger than they look. Shipping a command that silently failed on some formats would be worse than not shipping one. The browser extensions and the Obsidian plugin do this, because those hosts have a DOM.

Why the colors look considered

Everything here is built in OKLCH, a color space designed so that equal numeric steps look like equal steps to the eye.

That is not true of the older ways of describing color. In HSL a yellow and a blue can claim the same lightness while the yellow glares and the blue reads as nearly black, so a palette built on it comes out uneven no matter how carefully the numbers were chosen.

Generated colors are also mapped back into sRGB by searching for the highest chroma that still fits, rather than being clipped. Clipping shifts hue, which is how a palette that was meant to be four steps of one color arrives as three.

Privacy

The extension makes no network requests of any kind. Nothing is recorded about what you do. It works offline because there is nothing for it to be online for.

More colors

Part of Palette Vault, a free color reference with a catalog of ready-made palettes, a page for every named color, and browser-based tools for building, extracting and checking colors.

There are also extensions for Chrome and Firefox, a plugin for Obsidian, and a desktop app for Windows.

License

MIT. The palettes are yours to use, commercially or otherwise, with no attribution required.