Welcome to Flutter Color VS Code Extension 🎨✨

A user-friendly plugin to help you visualize the colors used in your project. Initially developed for Flutter, it is now used in various programming languages. It automatically parses and converts your color code into a small color picker box, allowing you to see and change the color as desired.

🚀🌕 Celebrating Chandrayaan's Glorious Landing and a Promising Future! 🌌✨

Dear All,
Last year on celeberation of successfull landing of changrayaan 3, I decided to make few structural changes in the plugin, so that new features can be easily developed.Today, I’m excited to announce that these changes have been successfully implemented. Here’s what’s new:

1. Implemented Telemetry & Crash Reporting 📊
2. Added test cases ✅
3. Refactored code 🔧

If you haven't tried this plugin yet, head over to VS Code -> Extensions -> search for "Flutter Color" -> Install and start using it! I’d love to hear your feedback.

Upcoming Features

1. Enable users to convert color codes between various formats such as RGBA, HEX, RGB, ARGB, etc. For example, users can input a HEX code, and the plugin will convert it to the RGBA format.
2. ______________________________________________

Feel free to add your thoughts as well. You can follow this link to share your ideas directly - Your Idea

Features

Gif by Maruf Hassan on Medium.

Without Flutter Color

With Flutter Color

Without Flutter Color (JSON file)

With Flutter Color (JSON file)

Feel free to contribute. Any new ideas are accepted, if you want to contribute, submit a pull request

Configuration

Flutter Color provides customizable settings to match your coding style preferences. Access these settings in VS Code:

File > Preferences > Settings (or Code > Settings > Settings on macOS) → Search for "Flutter Color"

Available Settings

Hex Format (flutterColor.hexFormat)

Control the letter case for hexadecimal color values.

• Options:
  • "upper case" (default) - Display hex values in uppercase (e.g., #FF5733)
  • "lower case" - Display hex values in lowercase (e.g., #ff5733)

Example Configuration:

{
  "flutterColor.hexFormat": "lower case"
}

Before (upper case):

Color(0xFF1A334D)

After (lower case):

Color(0xff1a334d)

Include Alpha Channel (flutterColor.includeAlpha)

Control whether to display the alpha (transparency) channel in color previews.

• Type: Boolean
• Default: true
• Effect: When false, the alpha channel is omitted from displayed color values

Example Configuration:

{
  "flutterColor.includeAlpha": false
}

Before (includeAlpha: true):

Color(0xFF1A334D)  // Shows full 8-digit hex with alpha (FF)

After (includeAlpha: false):

Color(0x1A334D)    // Alpha channel omitted (6-digit hex)

Applying Settings to Your Workspace

You can configure these settings at different levels:

User Settings (applies globally):

{
  "flutterColor.hexFormat": "lower case",
  "flutterColor.includeAlpha": true
}

Workspace Settings (applies to current project only): Create or edit .vscode/settings.json in your project root:

{
  "flutterColor.hexFormat": "upper case",
  "flutterColor.includeAlpha": false
}

Supported Color Formats

These settings apply to all supported color formats:

• Flutter/Dart: Color(0xFF123456), Color.fromARGB(255, 18, 52, 86)
• Hex: #123456, #FF123456
• ARGB: #AARRGGBB
• JSON: Color values in .json files
• JavaScript/TypeScript: Color values in .js, .ts files

What's new ?

• Version 2.2.0 (32.12.2025)

  • [Fixed] Added configuration of RGB value on colour picker [[Issue [#7](https://github.com/neodisk17/vscode-ext-flutter-color-viewer/issues/7)](https://github.com/neodisk17/vscode-ext-flutter-color-viewer/issues/7), [PR [#79](https://github.com/neodisk17/vscode-ext-flutter-color-viewer/issues/79)](https://github.com/neodisk17/vscode-ext-flutter-color-viewer/pull/79)]

• Version 2.1.0 (26.12.2025)

  • [New] Added configuration settings to customize hex format (uppercase/lowercase) and control alpha channel display [#67, [PR #63](https://github.com/neodisk17/vscode-ext-flutter-color-viewer/pull/63)]
  • [Fixed] Corrected alpha channel handling in color strategies for proper opacity detection

• Version 2.0.0 (09.09.2024)

  • [New] Refactor the code, Added Test cases, Implemented Telemetry & crash reporting [#Milestone 1 - 2023 Last Quarter Release].

• Version 1.1.0 (25.08.2023)

  • [New] Updated the README file to show the missing images & published the extension to Open VSX. [#29 - Thanks to mrhyperbit] .

• Version 1.0.1 (04.03.2021)

  • [New] Integration of Color palette: supports all languages except CSS, LESS, and SCSS. We don't want to break the internal features of VS Code, which is why we are not supporting these languages. [#9 - Thanks to lr222gw] [#10 - Thanks to Littlegolden] .

• Version 0.1.1 (26.09.2020)

  • [FIXED] Issue resolved for the ternary operator of the color palette [Thanks to Diego Carvalho] .

• Version 0.1.0 (25.09.2020)

  • [NEW] Integration of Color palette for JSON files [#6 - Thanks to MewX].

• Version 0.0.2 (03.01.2020)

  • [NEW] Integration of Opacity in The color palette.

Changelog

To check full changelog click here.

Made with ( ❤ ) by CCS 🌟