Plugins and extensions

Generate palettes in the toolbar, pull the colors out of any website, extract them from an image, and pick a color off the screen with the eyedropper.

• Generate a four-color palette and reroll until one lands
• Read the colors off the page you are looking at
• Drop in an image and get the colors that define it
• Eyedropper: click any pixel, the hex goes to your clipboard
• Save palettes locally, no account needed
• Opens in the browser side panel, so it stays put while you work

Add to Chrome

There is no host permission, so the extension cannot see the sites you visit and has no standing access to any page.

Generate palettes, pull them out of any image, and keep them in the sidebar while you work.

• Generate a four-color palette and reroll until one lands
• Drop in an image and get the colors that define it
• Right-click any image to extract its palette
• Save palettes locally, no account needed
• Lives in the sidebar, so it stays open while you work

Add to Firefox

The eyedropper is not here: Firefox does not implement the browser API it needs. Reading colors off a page is not in this release either.

Generate palettes inside a note, preview every hex code inline, render palette blocks as swatches, and extract colors from the images in your vault.

• A ribbon panel that generates palettes and inserts them
• A color chip beside every hex code, in editing and reading mode
• Fenced palette blocks that render as clickable swatches
• Extract a palette from any image embedded in a note
• An eyedropper that inserts and copies in one step

View in the plugin directory

Install it from inside Obsidian: Settings, Community plugins, Browse, then search for Palette Vault.

Generate a palette and have it written in the format of the file you are editing: CSS custom properties, Sass variables, a Tailwind fragment, JSON, or a comment.

• Insert a palette in the format of the file you are in
• Insert one as a comment instead, so nothing you wrote is disturbed
• Build a palette around the color already under your cursor
• Convert any color to HEX, rgb, hsl or oklch
• Check contrast against all five WCAG thresholds at once

Get it on the Marketplace

No image extraction here, and no inline color chips: VS Code already draws those in CSS and Sass, and its extension host cannot decode an image.

Generate palettes, extract them from an image on the canvas, and put them into the file as swatches, as fills, or as variables and styles.

• Generate a four-color palette and reroll until one lands
• Extract the colors from an image fill in your selection
• Take the colors already in your selection, gradient stops included
• Swatches placed where you are looking, labelled with their hex
• Fill the selection, cycling when there are more layers than colors
• Variables and paint styles, named by position rather than by hue
• Contrast against all five WCAG thresholds at once

Open in the Figma Community

Colors taken from a selection are ranked by how much of the artwork each one covers, so a full-bleed background outranks a small dot, and gradients are read stop by stop rather than skipped.

Generate palettes, pull them out of an image or out of the layers you already made, and turn them into swatches, fills or color styles with the dark value worked out for you.

• Generate a four-color palette and reroll until one lands
• Extract the colors from an image on the selected layer
• Take the colors already on your layers, ranked by how much they cover
• Swatches on the canvas, or the palette applied to the selection
• Color styles carrying both a light and a dark value
• Contrast against all five WCAG thresholds at once

Get it on the Framer Marketplace

A Framer color style holds a light and a dark value, so the plugin derives the dark counterpart of each color in OKLCH and saves eight values as four styles. Working in OKLCH is what keeps the dark variant from drifting to a different hue.