MixCSSHex — CSS Color Blender

Find visually similar hex colors in your CSS/SCSS/LESS files, merge them into a single value or CSS variable, and clean up color inconsistencies across your entire project.

Features

• Automatic color grouping — scans CSS/SCSS/LESS files and clusters similar colors using perceptual delta-E distance
• HSL sliders — tune hue, saturation, and lightness interactively; alpha slider for RGBA support
• Hex / RGBA input — type any 3- or 6-digit hex or rgba() value; sliders sync instantly
• Quick Apply — replace all occurrences in one click, even from the collapsed group header
• Add to :root — inject a CSS variable into the first file's :root block and replace every occurrence with var(--name)
• Drag & drop chips — move color occurrences between groups or to the discard pile
• Inline chip editing — double-click a chip to edit its hex value in place
• Right-click context menu — on chips (Edit, Copy, Delete) and group headers (Collapse, Copy hex, Apply, Reset)
• Custom groups — create new groups manually and drag chips into them
• Discard pile — deleted chips land here; drag them back if needed
• Per-file tabs — filter the view to colors from a single file
• Similarity threshold — adjustable delta-E threshold (1–100) with live re-grouping
• Collapse / Expand All — collapse state persists across threshold changes
• Modified indicator — blue dot on groups that have unsaved changes
• Reset Group / Reset All — restore original occurrences with one click
• Workspace scan — analyze every CSS/SCSS/LESS file in the workspace at once

Usage

Analyze active file

Open any .css, .scss, or .less file, then:

• Command Palette → MixCSSHex: Analyze Similar Colors
• Right-click in the editor → MixCSSHex: Analyze Similar Colors

Analyze entire workspace

Command Palette → MixCSSHex: Analyze Workspace CSS Colors

Working with groups

Action	How
Adjust color	Drag HSL/alpha sliders or type in the hex input
Apply to all occurrences	Click Apply (or the quick-apply button on a collapsed header)
Create CSS variable	Fill in the variable name → click Add to :root
Move a chip	Drag it to another group
Edit a chip	Double-click it
Reset a chip	Triple-click it
Delete a chip	Right-click → Delete (lands in discard pile)
Restore a chip	Drag it from the discard pile back to a group
Reset a group	Right-click the group header → Reset group

Settings

Setting	Default	Description
mixcsshex.similarityThreshold	15	Delta-E distance threshold for grouping similar colors. Lower = stricter grouping.

Requirements

VSCode 1.85+

License

Apache 2.0 — see LICENSE