Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>FormatColorizerNew to Visual Studio Code? Get it now.
FormatColorizer

FormatColorizer

Format Colorizer

|
2 installs
| (0) | Free
Understands every color format — hex, RGBA, ARGB, HSL, HSV, HWB, LAB, LCH, OKLAB, OKLCH, named colors and more — across CSS, HTML and any file. Hover to preview and edit colors instantly with a clean, minimalist popup.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

FormatColorizer

Understand and edit every color format — anywhere.

FormatColorizer detects colors in any file (CSS, HTML, JS/TS, JSON, XML, XAML, C#, Python, config files… everything) and lets you preview and edit them instantly. From the everyday #ff0000 to the unusual oklch(), lab(), ARGB 0xAARRGGBB and color(srgb …) — if it's a color, FormatColorizer gets it.

Created by ballwictb.

Features

  • Inline swatches + native color picker. Every detected color gets a clickable swatch. Click it to open the built-in color picker and edit visually.
  • Minimalist hover popup. Hover any color to see a clean preview and a one-click list of conversions. Click any value to replace it in place, or copy it.
  • Massive format coverage:
    • HEX: #RGB, #RGBA, #RRGGBB, #RRGGBBAA
    • 0x hex: 0xRRGGBB, 0xAARRGGBB (ARGB)
    • rgb() / rgba() — legacy commas and modern space/slash syntax, with percentages
    • hsl() / hsla()
    • hsv() / hsb()
    • hwb()
    • lab() / lch()
    • oklab() / oklch()
    • color(srgb …), color(display-p3 …), color(srgb-linear …)
    • 140+ CSS/SVG named colors (rebeccapurple, tomato, transparent, …)
  • ARGB-aware. In XAML / C# / VB files, 8-digit # hex is read as #AARRGGBB (alpha first). In web files it follows the CSS #RRGGBBAA convention. Fully configurable.
  • Works everywhere. Not limited to stylesheets — colors are recognized in strings, comments, markup and code across all languages.

How to use

  1. Open any file containing colors.
  2. Edit visually: click the color square that appears next to a color to open the picker.
  3. Convert fast: hover the color → click any format in the popup to replace it inline, or click copy.

Settings

Setting Default Description
formatcolorizer.enable true Master switch.
formatcolorizer.enableHover true Show the editable hover popup.
formatcolorizer.enableColorDecorators true Show inline swatches + native picker.
formatcolorizer.languages ["*"] Languages to activate in. ["*"] = everything.
formatcolorizer.argbHexLanguages ["xml","xaml","csharp","vb","fsharp"] Languages where 8-digit # hex means #AARRGGBB.

License

Proprietary Software License © ballwictb

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft