madskristensen / editorcolorpreview

Color Preview for Visual Studio

Download this extension from the Visual Studio Marketplace or get the CI build.

---

Shows a color preview in front of all named colors, hex, rgb and hsl values in CSS and JavaScript files.

*Figure 1: Color preview in light theme and dark theme*

Supported colors

These color formats are supported:

• Named colors (e.g. blue)
• Hex 3 digits (e.g. #ff0)
• Hex 6 digits (e.g. #ffff00)
• Hex 8 digits (e.g. #ffff00cc)
• RGB
  • rgb(255, 165, 0)
  • rgb(0% 50% 0%)
  • rgb(0 128.0 0)
  • rgb(0% 50% 0% / 0.25) (Alpha channel)
• RGBA (e.g.
  • rgba(255, 165, 0)
  • rgba(0% 50% 0%)
  • rgba(0 128.0 0)
  • rgba(0% 50% 0% / 0.25)
• HSL
  • hsl(9, 100%, 64%)
  • hsl(120 100% 25%)
  • hsl(120deg 100% 25%)
  • hsl(120 100% 25% / 0.25)
  • hsl(120 none none)
• HSLA
  • hsla(9, 100%, 64%, 0.7)
  • hsla(120 100% 25%)
  • hsla(120deg 100% 25%)
  • hsla(120 100% 25% / 0.25)
  • hsla(120 none none)
• HWB
  • hwb(120 0% 49.8039%)
  • hwb(0 0% 100%)
  • hwb(0 100% 100%)
  • hwb(120 30% 50% / 0.5)
  • hwb(none none none)
• Lab (Colors are converted to sRGB. Some colors might not convert properly) ¹
  • lab(46.2775% -47.5621 48.5837)
  • lab(100% 0 0)
  • lab(70% -45 0)
  • lab(86.6146% -106.5599 102.8717)
• LCH (Colors are converted to sRGB. Some colors might not convert properly) ¹
  • lch(46.2775% 67.9892 134.3912)
  • lch(0% 0 0)
  • lch(50% 50 0)
  • lch(70% 45 -180)
• OKLab (Colors are converted to sRGB. Some colors might not convert properly) ¹
  • oklab(51.975% -0.1403 0.10768)
  • oklab(0% 0 0)
  • oklab(100% 0 0)
  • oklab(50% 0.05 0)
• OKLCH (Colors are converted to sRGB. Some colors might not convert properly) ¹
  • oklch(51.975% 0.17686 142.495)
  • oklch(0% 0 0)
  • oklch(100% 0 0)
  • oklch(50% 0.2 0)

How can I help?

If you enjoy using the extension, please give it a ★★★★★ rating on the Visual Studio Marketplace.

Should you encounter bugs or if you have feature requests, head on over to the GitHub repo to open an issue if one doesn't already exist.

Pull requests are also very welcome, since I can't always get around to fixing all bugs myself. This is a personal passion project, so my time is limited.

Another way to help out is to sponsor me on GitHub.

Footnotes

1. A color may be a valid color but still be outside the range of colors that can be produced by an output device (a screen, projector, or printer). It is said to be out of gamut for that color space. ↩ ↩² ↩³ ↩⁴

editorcolorpreview's Issues

Display color preview for valid SCSS/Sass/LESS variables

It would be nice if preprocessor variables whose values are a valid color string displayed color previews. Something like this example I photoshopped:

The only way I see this being feasible is if it's possible to hook into whatever mechanism Visual Studio already uses to detect variable values when you hover over them with your cursor, as shown here:

If that's not possible, then I think it's safe to file this away as "more trouble than it's worth". But if it is, this would be a very convenient feature to have.

P.S. I'm loving the revamped version of this extension. Thanks for bringing it back.

Color Preview Appears in TypeScript Code (Not Css Color)

Describe the bug
Color preview box shows up in typescript code when a variable comes after a colon and starts with a color name.

To Reproduce

const azureVar = "";
const foo = azureVar === "" ? "blue" : azureVar;

Preview box shows up just before the last instance of "azureVar" in the above example.

Expected behavior
No preview box

Screenshots
Another (real world) example:

Support of .h header files

Describe the solution you'd like

Would it be possible to also include header files (.h) for C++ solutions?
In .cpp files, the color preview works fine, but not in .h files.

Thanks

VS Code does seem to have Color Preview extension

Describe the bug
I am unable to locate the Color Preview extension in the latest version of VS Code.
To Reproduce
Steps to reproduce the behavior:

1. Start up VS code
2. Selection Extensions in the sidebar
3. Enter "Color Preview" in the search field
4. No extension shown

Is it possible to add support for the C# language?

Is your feature request related to a problem? Please describe.
sample code:

public List<SKColor> Colors = new List<SKColor>
        {
            SKColor.Parse("#0087ff"),
            SKColor.Parse("#339933"),
            SKColor.Parse("#ff6666"),
            SKColor.Parse("#ff9900"),
            SKColor.Parse("#996600"),
            SKColor.Parse("#996699"),
            SKColor.Parse("#339999"),
            SKColor.Parse("#6666ff"),
            SKColor.Parse("#0066cc"),
            SKColor.Parse("#cc3333"),
            SKColor.Parse("#0099cc"),
            SKColor.Parse("#003366"),
        };

It would be great to add support for color display in the C# language

Thanks in advance

Unable to get it working in VS Pro 2022 - 17.2.6

Get Visual Studio 2022 Pro x64 - V17.2.6

1. Go to Extensions > Manage Extensions > Online > and install Color Preview.
2. Restart VS
3. Open your solution
4. Open bootstrap.css file
5. VS freeze/hangs.

Have to force VS to close and restart it, disable the Color Preview extension, restart VS again and just use VS without the Color Preview extension..

Can't get it to work.

(Also tried to run VS as administrator without any success).

Color with CSS Custom Properties do not display preview

Colors constructed using CSS Custom Properties do not display the color preview.

See attached screenshot.

Expected behavior
Colors constructed using CSS Custom Properties should display the color preview.

Support for rgba(red, green, blue, alpha)

RGB with alpha channel is not currently supported by the extension

Extension not working

I installed the extension in Visual Studio 17.8.6 using the following procedure:

1. Go to Extensions
2. Manage Extensions
3. Select and Install
4. Exit Visual Studio
5. The extension installed
6. Re-open Visual studio
7. NOT WORKING

I tried several times with no result

I also downloaded and installed the extension form https://marketplace.visualstudio.com/ with no results also.

VS2022 hangs when openning large CSS file

When I have this extension enabled VS2022 hangs on opening large CSS files.
My CSS files is about 800KB!

After disabling this extension I can open that file without any problem.

SCSS @import "_shared.scss"; adds a color in front of red.scss

SCSS @import "_shared.scss"; adds a color in front of red.scss

@import "_variables.scss"; @import "_mixins.scss"; @import "_bootstrapoverride.scss"; @import "_fonts.scss"; @import "_sha**red.scss**"; puts a red square

A clear and concise description of what the bug is.

Matching on partial string matches

Showing the colour red next to the word 'redundancy' in a JS comment :)

Named colors used in hyphenated variable names show preview

When using known color names as part of a variable name, the color preview is applied incorrectly

To Reproduce

Given:

$hcis-blue: #517ab0;
$hcis-dark-blue: #015eab;
$hcis-green: rgb(139, 187, 66);
$hcis-pink: rgb(216, 73, 124);
$hcis-yellow: rgb(255, 195, 37);

$primary: $hcis-blue;
$danger: $hcis-yellow;

$dark-gray: #5c5c5c;

Produces:

Potential fix

Changing the regular expression to include a non-capturing prefix, e.g. (?<=.*:.*)(...existing expression...), will match only the values on the right side of the colon.

Matches using existing regular expression:

blue
#517ab0
blue
#015eab
green
rgb(139, 187, 66)
pink
rgb(216, 73, 124)
yellow
rgb(255, 195, 37)
blue
yellow
gray
#5c5c5c

Matches with suggestion applied:

#517ab0
#015eab
rgb(139, 187, 66)
rgb(216, 73, 124)
rgb(255, 195, 37)
#5c5c5c

These will work as well.

Given:

--orange: purple

span {
border: 1px solid red;
}

Produces:

purple
red

Known issue

Given:

span.outline {
border: 1px solid red;

::after {
    content: 'pink';
    color: blue;
}

}

Produces:

red
pink
blue

Expected behavior would be to omit 'pink' since it's not a color.

Add support for TSX/JSX files

With modern web dev libraries (such as MUI and styled-components) styles are no longer constrained to .css files and one can include stylesheets in TSX/JSX files (such as in this React button for example). Because this is such a common pattern, it would be great for this extension to also preview the colors in this kind of files.

If this sounds like a good idea I would be happy to work on the implementation! :)

Extension not working after update to version 1.0.24

The extension stopped working after the update to version 1.0.24. Preview colors are no longer displayed in front of the colour code. It doesn't matter which colour coding method is used - hsl, rgb, #, etc. None of them produce a preview colour.

The problem is the same on both of my development PCs. I tried uninstalling the extension, clearing the MEF, reinstalling the extension. No change.

I'm using Microsoft Visual Studio Community 2022 (64-bit) Version 17.8.3.