Procolorrs — Color Palette Generator

Generate beautiful, harmonious color palettes without leaving VS Code. Powered by Procolorrs.

Features

🎨 Palette Generator Panel

Open a full palette generator right inside VS Code. Choose from 7 harmony modes — analogous, complementary, triadic, split-complementary, tetradic, monochromatic, or auto — and generate a new palette instantly.

Open with: Ctrl+Alt+P (Windows/Linux) · Cmd+Alt+P (Mac)

⌨️ Insert at Cursor

Generate a palette and insert it directly into your file at the cursor position — no copy-pasting required. Supports 7 export formats:

Format	Output
CSS Variables	`:root { --color-1: #ff5722; … }`
Tailwind Config	`colors: { palette: { 100: '#ff5722', … } }`
JSON	`{ "colors": [{ "hex": "#ff5722" }, …] }`
HEX List	`#ff5722, #ffeb3b, …`
SwiftUI	`Color(red: 1.0, green: 0.34, blue: 0.13)`
Android XML	`<color name="palette_1">#ff5722</color>`
Flutter/Dart	`Color(0xFFFF5722)`

🖼️ Inline Color Previews

VS Code's built-in color decorations automatically show a color swatch inline next to every hex code in your CSS, JS, TS, HTML, and JSON files — no extra setup needed.

📋 Copy Instantly

Click any swatch in the panel to copy its hex code to clipboard immediately.

Commands

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type Procolorrs:

Command	Description
`Procolorrs: Open Palette Generator`	Opens the palette panel
`Procolorrs: Insert Last Palette as CSS Variables`	Inserts `:root { --color-1: … }` at cursor
`Procolorrs: Insert Last Palette as Tailwind Config`	Inserts Tailwind config snippet at cursor
`Procolorrs: Insert Last Palette as JSON`	Inserts JSON array of colors at cursor

Keyboard Shortcuts

Shortcut	Action
`Ctrl+Alt+P` / `Cmd+Alt+P`	Open Palette Generator
`Ctrl+Shift+P` → type Procolorrs	Access all commands

Requirements

VS Code 1.85.0 or later
Internet connection (palettes are generated via the Procolorrs API)

Procolorrs — Color Palette Generator

Procolorrs

Procolorrs — Color Palette Generator

Features

🎨 Palette Generator Panel

⌨️ Insert at Cursor

🖼️ Inline Color Previews

📋 Copy Instantly

Commands

Keyboard Shortcuts

Requirements

Links