VSCode Color Info
Visual Studio Code extension that provides quick information css colors.
Color Info adds additional information when you hover over a css color, including:
rgb – RGB color values. Enabled by default
hsl – HSL color values. Enabled by default
css-color-name - Name of the color (
hsv – HSV color values
lab – LAB color values
lch – LCHab color values
cmyk – CMYK color values. Enabled by default
hex – Hex value. Enabled by default
alpha – Alpha value. Enabled by default
preview – Preview of the color. Displays color with alpha in lower left corner and color without alpha in upper right corner. Enabled by default
preview-xl – Larger preview of the color
preview-square – Square preview of the color
preview-square-xl – Larger square preview of the color
You can customize which of these fields are displayed and the order they are displayed in using the settings described below.
By default, the extension works with any css, sass, scss, or less document and recognizes all basic css color formats, including named colors. You can also enable Color Info in additional file types using the
Ordered array of color fields to display.
Array of fields not to display. Overrides
colorInfo.fields. If you only need to exclude one or two of the default fields, using
colorInfo.excludedFields is the preferred approach.
Defines which files and languages have color info enabled, and which color types are supported. The default language setting enables all css color values for
Each element consists of:
VSCode does not currently support nested languages, so to enable Color Info in an
html file, you must add:
colorInfo.languages setting. Make you add this setting to the end of the default
colorInfo.languages setting so that you do not disable Color Info for the standard languages.