Color value reference for Visual Studio

Article
04/30/2022

This topic is a reference for creating new color tokens. When you're creating new UI, you can use similar colors from existing UI to choose the colors for each main theme and the system color name for that element for High Contrast themes.

For implementation information about creating new color tokens, see Color theming tools.

For color tokens to use with existing UI, see Shared colors for Visual Studio.

When using this reference guide, remember:

Always copy both foreground and background hues together. Don't choose a foreground from one UI element and a background from another just because you like the hues.
These are hex codes, not color tokens. You can't use the actual color token names of these UI elements because you can't control how the tokens might be changed in the future. Instead, create tokens within your own category and use the hue values shown in the tables. Color tokens for existing UI can be found in Shared colors for Visual Studio.
High Contrast swatches are shown for comparison only. Use the system color name for High Contrast UI, and do not use an eyedropper or color picker on these swatches. High Contrast swatches in this topic reflect the High Contrast #1 theme in Windows. The colors will look different in other High Contrast themes.
For best results, pair color sets with UI similar to the example.

Properties window

Properties window in Light (left), Dark (center), and Blue (right) themes
Properties window in the Light, Dark, and Blue themes

Note

High Contrast swatches are shown for comparison only. Use the system color name for High Contrast UI, and do not use an eyedropper or color picker on these swatches. High Contrast swatches in this topic reflect the High Contrast #1 theme in Windows. The colors will look different in other High Contrast themes.

Divider lines

	Light theme	Dark theme	Blue theme	High Contrast
Default	`#FFEEEEF2`	`#FF2D2D30`	`#FFEEEEF2`	`ControlDark`

Expander glyph

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Background	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Foreground: hover	`#FF007ACC`	`#FF007ACC`	`#FF007ACC`	`HighlightText`
Background: hover	`#FFC9DEF5`	`#FF3E3E40`	`#FFFFFCF4`	`Highlight`
Border	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Border: hover	`#FFC9DEF5`	`#FF3E3E40`	`#FFE5C365`	`WindowFrame`

Embedded tab control: body

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Background	`#FFE7E8EC`	`#FF1B1B1C`	`#FFE7E8EC`	`Control`
Border	`#FFE7E8EC`	`#FF1B1B1C`	`#FFE7E8EC`	`WindowFrame`

Embedded tab control: active tab

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Background	`#FFE7E8EC`	`#FF1B1B1C`	`#FFE7E8EC`	`Highlight`
Border	`#FFE7E8EC`	`#FF1B1B1C`	`#FFE7E8EC`	`WindowFrame`

Embedded tab control: inactive tab

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Background	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`
Foreground: hover	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Background: hover	`#FFC9DEF5`	`#FF3E3E40`	`#FFFEFEFE`	`Highlight`
Foreground: disabled	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`GrayText`
Background: disabled	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`
Border	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`WindowFrame`
Border: hover	`#FFC9DEF5`	`#FF3E3E40`	`#FFFEFEFE`	`WindowFrame`
Border: disabled	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`WindowFrame`

Section header

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Foreground: hover	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Background	`#FFEEEEF2`	`#FF292929`	`#FFEEEEF2`	`Control`
Background: hover	`#FFC9DEF5`	`#FF3E3E40`	`#FFFFFCF4`	`Highlight`
Border	None	None	None	None
Border: hover	`#FFC9DEF5`	`#FF3E3E40`	`#FFE5C365`	`WindowFrame`

Category group

	Light theme	Dark theme	Blue theme	High Contrast
Body foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Body background	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`
Glyph foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`WindowText`
Glyph foreground: hover	`#FF007ACC`	`#FF007ACC`	`#FF007ACC`	`WindowText`

Toggle buttons

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`WindowText`
Background	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Foreground: hover	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Background: hover	`#FFC9DEF5`	`#FF3E3E40`	`#FFFFFCF4`	`Highlight`
Foreground: selected	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Background: selected	`#FFF5F5F5`	`#FF252526`	`#FFFDF4BF`	`Highlight`
Foreground: disabled	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`ControlText`
Background: disabled	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Border	`#FFCCCEDB`	`#FF3F3F46`	`#FFCCCEDB`	`Window`
Border: hover	`#FFC9DEF5`	`#FF3E3E40`	`#FFE5C365`	`WindowFrame`
Border: selected	`#FF007ACC`	`#FF007ACC`	`#FFE5C365`	`WindowFrame`
Border: disabled	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`WindowFrame`

Input fields

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Background	`#FFFFFFFF`	`#FF333337`	`#FFFCFCFC`	`Control`
Foreground: disabled	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`GrayText`
Background: disabled	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`
Border	`#FFCCCEDB`	`#FF434346`	`#FFCCCEDB`	`ControlDark`
Border: disabled	`#FFCCCEDB`	`#FF434346`	`#FFC6C6C6`	`ControlDark`

List items

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Foreground: hover	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Background: hover	`#FFC9DEF5`	`#72555555`	`#FFFDF4BF`	`Highlight`
Foreground: selected	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Background: selected	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`
Foreground: disabled	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`GrayText`
Border: hover	`#FFC9DEF5`	`#72555555`	`#FFFDF4BF`	`WindowFrame`
Border: selected	`#FFCCCEDB`	`#FF3399FF`	`#FF3399FF`	`WindowFrame`

Command buttons

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Background: hover	`#FFC9DEF5`	`#FF3E3E40`	`#FFFEFEFE`	`Highlight`
Foreground: selected	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Background: pressed	`#FF007ACC`	`#FF007ACC`	`#FF007ACC`	`Highlight`
Foreground: disabled	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`GrayText`
Background: disabled	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Border: hover	`#FFC9DEF5`	`#FF3E3E40`	`#FFFEFEFE`	`HighlightText`
Border: pressed	`#FF007ACC`	`#FF007ACC`	`#FF007ACC`	`HighlightText`
Border: disabled	`#FFCCCEDB`	`#FF434346`	`#FFC6C6C6`	`WindowFrame`

Properties grid control elements

Properties grid in Light (left), Dark (center), and Blue (right) themes
Properties grid in Light, Dark, and Blue themes

Note

Content

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF000000`	`WindowText`
Background	`#FFF5F5F5`	`#FF252526`	`#FFFFFFFF`	`Control`
Foreground: selected, focused	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Background: selected, focused	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`
Foreground: selected, unfocused	`#FF1E1E1E`	`#FFF1F1F1`	`#FF000000`	`WindowText`
Background: selected, unfocused	`#FFEEEEF2`	`#FF2D2D30`	`#FFEEEEF2`	`ControlDark`
Divider lines	`#FFEEEEF2`	`#FF2D2D30`	`#FFEEEEF2`	`ControlDark`

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF000000`	`WindowText`
Background	`#FFEEEEF2`	`#FF2D2D30`	`#FFEEEEF2`	`ControlDark`

CodeLens UI

Note

CodeLens UI colors are the same for Light, Dark, and Blue themes.

Note

Body

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FF1E1E1E`	`#FF1E1E1E`	`WindowText`
Background	`#FFFCFCFC`	`#FFFCFCFC`	`#FFFCFCFC`	`Window`
Foreground: selected	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Background: selected	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`
Background: highlighted	`#FFFDFBAC`	`#FFFDFBAC`	`#FFFDFBAC`	`HotTrack`
Border	`#FF6FC2E9`	`#FF6FC2E9`	`#FF6FC2E9`	`WindowFrame`

Hyperlink and separator

	Light theme	Dark theme	Blue theme	High Contrast
Hyperlink foreground	`#FF0E70C0`	`#FF0E70C0`	`#FF0E70C0`	`HotTrack`
Separator foreground	`#FF9C9C9C`	`#FF9C9C9C`	`#FF9C9C9C`	`HotTrack`

Grid control

Grid control in Light (top), Dark (center), and Blue (bottom) themes

Note

Body

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF000000`	`WindowText`
Foreground: selected	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`

Subsection header

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF717171`	`#FF999999`	`#FF717171`	`GrayText`
Background	`#FFF5F5F5`	`#FF252526`	`#FFFFFFFF`	`Window`
Background: selected	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`

Grid lines

	Light theme	Dark theme	Blue theme	High Contrast
Items (foreground)	`#FFF0F0F0`	`#FF000000`	`#FFF0F0F0`	`ScrollBar`
Header (foreground)	`#FFE0E3E6`	`#FF333337`	`#FFBEC3CB`	`ControlDark`

Manifest Designer

Manifest Designer in Light (top), Dark (center), and Blue (bottom) themes

Note

Body

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Background	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`

Active tab

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ActiveCaptionText`
Background	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`ActiveCaption`

Inactive tab

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`InactiveCaptionText`
Background	`#FFFEFEFE`	`#FF333337`	`#FFFEFEFE`	`HighlightText`
Foreground: hover	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`InactiveCaption`
Background: hover	`#FFCCCEDB`	`#FF3F3F46`	`#FFCCCEDB`	`Highlight`

Watermark text

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF999999`	`#FF999999`	`#FF717171`	`GrayText`
Background	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`

Description pane

	Light theme	Dark theme	Blue theme	High Contrast
Foreground	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Background	`#FFEEEEF2`	`#FF252526`	`#FFFFFFFF`	`Control`

TFS tagging

TFS tagging in Light (top), Dark (center), and Blue (bottom) themes

Note

	Light theme	Dark theme	Blue theme	High Contrast
Foreground (text)	`#FF1E1E1E`	`#FFFFFFFF`	`#FF1E1E1E`	`ActiveCaptionText`
Background	`#FFE1E6F1`	`#FF424242`	`#FFE9ECEE`	`ActiveCaption`
Foreground (text): hover	`#FF1E1E1E`	`#FFFFFFFF`	`#FF1E1E1E`	`HighlightText`
Background: hover	`#FFC9DEF5`	`#FF606060`	`#FFFDF4BF`	`Highlight`
Foreground (text): pressed	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Background: pressed	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`
Foreground (text): selected	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Background: selected	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`

Glyph on hover

	Light theme	Dark theme	Blue theme	High Contrast
Glyph	`#FF1E1E1E`	`#FFFFFFFF`	`#FF1E1E1E`	`HighlightText`
Background	`#FFF7F7F9`	`#FF393939`	`#FFFFFCF4`	`HighlightText`
Border	`#FFF7F7F9`	`#FF393939`	`#FFE5C365`	`HighlightText`
Glyph (press and hover)	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`Highlight`
Background (press and hover)	`#FF0E6198`	`#FF007ACC`	`#FFFDF4BF`	`HighlightText`
Border (press and hover)	`#FF0E6198`	`#FF007ACC`	`#FFE5C365`	`HighlightText`

Selected glyph

	Light theme	Dark theme	Blue theme	High Contrast
Glyph	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Background	`#FF52B0EF`	`#FF52B0EF`	`#FF52B0EF`	`HighlightText`
Border	`#FF52B0EF`	`#FF52B0EF`	`#FF52B0EF`	`HighlightText`
Glyph (press and hover)	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`Highlight`
Background (press and hover)	`#FF0E6198`	`#FF0E6198`	`#FF0E6198`	`HighlightText`
Border (press and hover)	`#FF0E6198`	`#FF0E6198`	`#FF0E6198`	`HighlightText`

Button controls

Note

Default

	Light theme	Dark theme	Blue theme	High Contrast
Appearance
Foreground	`#1E1E1E`	`#F1F1F1`	`#1E1E1E`	`ControlText`
Background	`#ECECF0`	`#3F3F46`	`#ECECF0`	`Control`
Border	`#CCCEDB`	`#555555`	`#CCCEDB`	`ControlDark`

Disabled

	Light theme	Dark theme	Blue theme	High Contrast
Appearance
Foreground	`#A2A4A5`	`#656565`	`#A2A4A5`	`InactiveCaptionText`
Background	`#F5F5F5`	`#2D2D30`	`#F5F5F5`	`InactiveCaption`
Border	`#CCCEDB`	`#3F3F46`	`#CCCEDB`	`InactiveBorder`

Hover

	Light theme	Dark theme	Blue theme	High Contrast
Appearance
Foreground	`#1E1E1E`	`#F1F1F1`	`#1E1E1E`	`ActiveCaptionText`
Background	`#C9DEF5`	`#3F3F46`	`#C9DEF5`	`ActiveCaption`
Border	`#CCCEDB`	`#007ACC`	`#3399FF`	`ActiveBorder`

Pressed

	Light theme	Dark theme	Blue theme	High Contrast
Appearance
Foreground	`#FFFFFF`	`#F1F1F1`	`#FFFFFF`	`HighlightText`
Background	`#007ACC`	`#007ACC`	`#007ACC`	`Highlight`
Border	`#007ACC`	`#007ACC`	`#007ACC`	`HighlightText`

Focused

	Light theme	Dark theme	Blue theme	High Contrast
Appearance
Foreground	`#1E1E1E`	`#F1F1F1`	`#1E1E1E`	`HighlightText`
Background	`#C9DEF5`	`#3F3F46`	`#C9DEF5`	`Highlight`
Border	`#3399FF`	`#007ACC`	`#3399FF`	`HighlightText`