Nifty Colors

Colour swatches and VS Code's picker in any file: CSS, Tailwind, Flutter, Swift, Android, C# and Unity colours. Convert formats and check WCAG contrast on hover.

Maintained. No sign-in. No telemetry. Works in VS Code, Cursor, Windsurf, VSCodium and other editors that use Open VSX.

Features

• Swatches and the picker in every language. VS Code's own picker only works in CSS, HTML and JSON. Nifty Colors finds colours in any file and hands them to the same picker, so you can click a swatch and pick a new colour in Dart, Swift, C#, Kotlin, TypeScript, Markdown or YAML.
• The picker keeps your format. Color(0xFF2F7D4F) stays Color(0x…), UIColor(red: 52/255, …) keeps its /255, new Color(1f, 0.5f, 0f) keeps its f suffixes, rgb(1 2 3 / 50%) keeps the space syntax, and a Tailwind class becomes the nearest palette class (bg-red-500 → bg-sky-500). Click the colour label at the top of the picker to cycle through other ways of writing it.
• Formats it understands:
  • CSS: #rgb, #rgba, #rrggbb, #rrggbbaa, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …) and the other color() spaces, and colour names (anywhere in stylesheets, as a whole string like "tomato" elsewhere).
  • Tailwind: bg-sky-500, text-white/80, border-t-red-950, hover:ring-emerald-400, with every colour utility, plus your own colours from tailwind.config.js (theme.colors and theme.extend.colors) and Tailwind 4 @theme { --color-brand: … } blocks.
  • Flutter: Color(0xFF…), Color.fromARGB, Color.fromRGBO, Color.from(alpha:…), Colors.red, Colors.blue.shade200, Colors.teal[700], Colors.black54.
  • Android and Jetpack Compose: Color(0xFF…), Color(red = 0.5f, …), Color.rgb, Color.argb, and #AARRGGBB in res/values/colors.xml and Color.parseColor.
  • Swift and Objective-C: Color(red:green:blue:opacity:), Color(white:), Color(hue:saturation:brightness:), UIColor/NSColor(red:…), #colorLiteral(…), [UIColor colorWithRed:…].
  • .NET: Color.FromArgb(…), Color.FromRgb(…), Color.CornflowerBlue, Colors.Tomato.
  • Unity: new Color(0.45f, 0.72f, 0.2f), new Color32(96, 36, 44, 255), Color.yellow.
• Contrast on hover. Hover a colour to see its WCAG contrast ratio on white, on black and against the nearest other colour in the file (usually the matching text or background), with AA/AAA ratings and a sample of text in those colours. The hover also shows the colour as hex, rgb(), hsl() and oklch().
• Convert formats. Put the cursor on a colour (or several cursors on several colours) and run Convert Colour… to rewrite it as hex, RGB, HSL, HWB, OKLCH, OKLab, Lab, LCH, Display P3, #AARRGGBB or 0xAARRGGBB. It's also in the editor's right-click menu.
• No double swatches. In CSS, SCSS and Less, VS Code already shows swatches for most colours; Nifty Colors only adds the ones your VS Code version doesn't (for example color(display-p3 …)). In HTML, Vue, Svelte and Astro it leaves <style> blocks and style="" attributes to their own language support. Tailwind swatches are skipped when Tailwind CSS IntelliSense is installed, as it shows its own. XAML files are left to Nifty XAML.
• Settings per language. Every setting can be set for one language, for example "[markdown]": { "nifty.colors.enabled": false }.
• Fast on big files. Files over a million characters only get swatches for the lines on screen, and they follow as you scroll.
• Works in the browser on vscode.dev and github.dev.

How it differs from Nifty CSS Variables

Nifty CSS Variables resolves var(--brand) to the colour it stands for and shows a palette of your design tokens. Nifty Colors handles colours written out literally, in any language. They work well together: install both for a stylesheet-heavy project.

Commands

Settings

Install

• VS Code: search for "Nifty Colors" in the Extensions view, or install from the Visual Studio Marketplace.
• Cursor, Windsurf, VSCodium, Kiro, Antigravity: install from Open VSX.

Privacy

This extension collects no telemetry and needs no account.

More Nifty tools

• Nifty CSS Variables: Custom Property IntelliSense: IntelliSense for CSS custom properties across your project: complete var(--…), see resolved values and colour swatches, go to definitions, catch undefined variables, and browse a colour palette. (Open VSX)
• Nifty Mermaid: Mermaid Diagram Preview & Export: Mermaid diagrams with no account: live preview beside .mmd files and Markdown, diagrams in the Markdown preview, syntax highlighting, and export to SVG or PNG. (Open VSX)
• Nifty C# Scratchpad: Run C# Snippets & NuGet: Run C# snippets instantly with NuGet packages and rich Dump() output, a LINQPad-style scratchpad and Polyglot Notebooks replacement. (Open VSX)
• Nifty C# Templates: New Class, Record & Namespace: New C# class, interface, record, enum, test and controller files with the right namespace, plus namespace syncing. (Open VSX)
• Nifty Code Metrics: Complexity & Hotspots: Complexity and size for every function in any language, as CodeLens and warnings, plus a hotspots view of the complex files that change most often. (Open VSX)
• Nifty Code Runner: Run Code in 25+ Languages: Run the current file or selection in 25+ languages in the terminal, with input support, your own commands and no telemetry. (Open VSX)

See all 56 Nifty tools at https://getnifty.dev