Farbwertreferenz für Visual Studio

2025-06-12

Dieses Thema ist ein Verweis zum Erstellen neuer Farbtoken. Wenn Sie eine neue Benutzeroberfläche erstellen, können Sie ähnliche Farben aus der vorhandenen Benutzeroberfläche verwenden, um die Farben für jedes Standard Design und den Systemfarbnamen für dieses Element für Designs mit hohem Kontrast auszuwählen.

Informationen zur Implementierung zum Erstellen neuer Farbtoken finden Sie unter Farbdesigntools.

Informationen zur Verwendung mit Farbtoken mit vorhandener Benutzeroberfläche finden Sie unter "Freigegebene Farben für Visual Studio".

Beachten Sie bei Verwendung dieses Referenzhandbuchs Folgendes:

Kopieren Sie immer vordergrund- und hintergrundfarbene Farbtöne zusammen. Wählen Sie keinen Vordergrund aus einem UI-Element und einem Hintergrund aus einem anderen aus, nur weil Ihnen die Farbtons gefallen.
Hierbei handelt es sich um Hexaxcodes, nicht um Farbtoken. Sie können die tatsächlichen Farbtokennamen dieser UI-Elemente nicht verwenden, da Sie nicht steuern können, wie die Token in Zukunft geändert werden können. Erstellen Sie stattdessen Token in Ihrer eigenen Kategorie, und verwenden Sie die farbtonischen Werte in den Tabellen. Farbtoken für vorhandene UI finden Sie in freigegebenen Farben für Visual Studio.
Farbmuster mit hohem Kontrast werden nur für den Vergleich angezeigt. Verwenden Sie den Systemfarbnamen für die Ui mit hohem Kontrast, und verwenden Sie keine Pipette oder Farbauswahl für diese Farbmuster. Farbmuster mit hohem Kontrast in diesem Thema spiegeln das Design "Hoher Kontrast #1" in Windows wider. Die Farben sehen in anderen Designs mit hohem Kontrast anders aus.
Um optimale Ergebnisse zu erzielen, koppeln Sie Farbsätze mit ui ähnlich dem Beispiel.

Eigenschaftenfenster

Properties window in Light (left), Dark (center), and Blue (right) themes
Eigenschaftenfenster in den Designs "Hell", "Dunkel" und "Blau"

Hinweis

Farbmuster mit hohem Kontrast werden nur für den Vergleich angezeigt. Verwenden Sie den Systemfarbnamen für die Ui mit hohem Kontrast, und verwenden Sie keine Pipette oder Farbauswahl für diese Farbmuster. Farbmuster mit hohem Kontrast in diesem Thema spiegeln das Design "Hoher Kontrast #1" in Windows wider. Die Farben sehen in anderen Designs mit hohem Kontrast anders aus.

Trennlinien

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Standard	`#FFEEEEF2`	`#FF2D2D30`	`#FFEEEEF2`	`ControlDark`

Expander-Glyphe

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Hintergrund	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Vordergrund: Hovern	`#FF007ACC`	`#FF007ACC`	`#FF007ACC`	`HighlightText`
Hintergrund: Daraufzeigen	`#FFC9DEF5`	`#FF3E3E40`	`#FFFFFCF4`	`Highlight`
Border	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Rahmen: Daraufzeigen	`#FFC9DEF5`	`#FF3E3E40`	`#FFE5C365`	`WindowFrame`

Eingebettetes Registerkartensteuerelement: Textkörper

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Hintergrund	`#FFE7E8EC`	`#FF1B1B1C`	`#FFE7E8EC`	`Control`
Border	`#FFE7E8EC`	`#FF1B1B1C`	`#FFE7E8EC`	`WindowFrame`

Eingebettetes Registerkartensteuerelement: aktive Registerkarte

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Hintergrund	`#FFE7E8EC`	`#FF1B1B1C`	`#FFE7E8EC`	`Highlight`
Border	`#FFE7E8EC`	`#FF1B1B1C`	`#FFE7E8EC`	`WindowFrame`

Eingebettetes Registerkartensteuerelement: inaktive Registerkarte

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Hintergrund	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`
Vordergrund: Hovern	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Hintergrund: Daraufzeigen	`#FFC9DEF5`	`#FF3E3E40`	`#FFFEFEFE`	`Highlight`
Vordergrund: deaktiviert	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`GrayText`
Hintergrund: deaktiviert	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`
Border	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`WindowFrame`
Rahmen: Daraufzeigen	`#FFC9DEF5`	`#FF3E3E40`	`#FFFEFEFE`	`WindowFrame`
Rahmen: deaktiviert	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`WindowFrame`

Abschnittsüberschrift

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Vordergrund: Hovern	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Hintergrund	`#FFEEEEF2`	`#FF292929`	`#FFEEEEF2`	`Control`
Hintergrund: Daraufzeigen	`#FFC9DEF5`	`#FF3E3E40`	`#FFFFFCF4`	`Highlight`
Border	Keine	Nein	Nein	Keine
Rahmen: Daraufzeigen	`#FFC9DEF5`	`#FF3E3E40`	`#FFE5C365`	`WindowFrame`

Kategoriegruppe

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrundkörper	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Textkörperhintergrund	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`
Glyphen-Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`WindowText`
Glyphen-Vordergrund: Hovern	`#FF007ACC`	`#FF007ACC`	`#FF007ACC`	`WindowText`

Umschalter

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`WindowText`
Hintergrund	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Vordergrund: Hovern	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Hintergrund: Daraufzeigen	`#FFC9DEF5`	`#FF3E3E40`	`#FFFFFCF4`	`Highlight`
Vordergrund: ausgewählt	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Hintergrund: ausgewählt	`#FFF5F5F5`	`#FF252526`	`#FFFDF4BF`	`Highlight`
Vordergrund: deaktiviert	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`ControlText`
Hintergrund: deaktiviert	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Border	`#FFCCCEDB`	`#FF3F3F46`	`#FFCCCEDB`	`Window`
Rahmen: Daraufzeigen	`#FFC9DEF5`	`#FF3E3E40`	`#FFE5C365`	`WindowFrame`
Rahmen: ausgewählt	`#FF007ACC`	`#FF007ACC`	`#FFE5C365`	`WindowFrame`
Rahmen: deaktiviert	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`WindowFrame`

Eingabefelder

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Hintergrund	`#FFFFFFFF`	`#FF333337`	`#FFFCFCFC`	`Control`
Vordergrund: deaktiviert	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`GrayText`
Hintergrund: deaktiviert	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`
Border	`#FFCCCEDB`	`#FF434346`	`#FFCCCEDB`	`ControlDark`
Rahmen: deaktiviert	`#FFCCCEDB`	`#FF434346`	`#FFC6C6C6`	`ControlDark`

Listenelemente

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Vordergrund: Hovern	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Hintergrund: Daraufzeigen	`#FFC9DEF5`	`#72555555`	`#FFFDF4BF`	`Highlight`
Vordergrund: ausgewählt	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Hintergrund: ausgewählt	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`
Vordergrund: deaktiviert	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`GrayText`
Rahmen: Daraufzeigen	`#FFC9DEF5`	`#72555555`	`#FFFDF4BF`	`WindowFrame`
Rahmen: ausgewählt	`#FFCCCEDB`	`#FF3399FF`	`#FF3399FF`	`WindowFrame`

Befehlsschaltflächen

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Hintergrund: Daraufzeigen	`#FFC9DEF5`	`#FF3E3E40`	`#FFFEFEFE`	`Highlight`
Vordergrund: ausgewählt	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Hintergrund: gedrückt	`#FF007ACC`	`#FF007ACC`	`#FF007ACC`	`Highlight`
Vordergrund: deaktiviert	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`GrayText`
Hintergrund: deaktiviert	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Rahmen: Daraufzeigen	`#FFC9DEF5`	`#FF3E3E40`	`#FFFEFEFE`	`HighlightText`
Rahmen: gedrückt	`#FF007ACC`	`#FF007ACC`	`#FF007ACC`	`HighlightText`
Rahmen: deaktiviert	`#FFCCCEDB`	`#FF434346`	`#FFC6C6C6`	`WindowFrame`

Eigenschaften-Rastersteuerelementelemente

Properties grid in Light (left), Dark (center), and Blue (right) themes
Eigenschaftenraster in Designs "Hell", "Dunkel" und "Blau"

Hinweis

Inhalt

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF000000`	`WindowText`
Hintergrund	`#FFF5F5F5`	`#FF252526`	`#FFFFFFFF`	`Control`
Vordergrund: ausgewählt, fokussiert	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Hintergrund: ausgewählt, fokussiert	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`
Vordergrund: ausgewählt, nicht fokussiert	`#FF1E1E1E`	`#FFF1F1F1`	`#FF000000`	`WindowText`
Hintergrund: ausgewählt, nicht fokussiert	`#FFEEEEF2`	`#FF2D2D30`	`#FFEEEEF2`	`ControlDark`
Trennlinien	`#FFEEEEF2`	`#FF2D2D30`	`#FFEEEEF2`	`ControlDark`

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF000000`	`WindowText`
Hintergrund	`#FFEEEEF2`	`#FF2D2D30`	`#FFEEEEF2`	`ControlDark`

CodeLens-Benutzeroberfläche

CodeLens UI

Hinweis

CodeLens-UI-Farben sind für helle, dunkle und blaue Designs identisch.

Hinweis

Text

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FF1E1E1E`	`#FF1E1E1E`	`WindowText`
Hintergrund	`#FFFCFCFC`	`#FFFCFCFC`	`#FFFCFCFC`	`Window`
Vordergrund: ausgewählt	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Hintergrund: ausgewählt	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`
Hintergrund: hervorgehoben	`#FFFDFBAC`	`#FFFDFBAC`	`#FFFDFBAC`	`HotTrack`
Border	`#FF6FC2E9`	`#FF6FC2E9`	`#FF6FC2E9`	`WindowFrame`

Hyperlink und Trennzeichen

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Hyperlink-Vordergrund	`#FF0E70C0`	`#FF0E70C0`	`#FF0E70C0`	`HotTrack`
Trennzeichen-Vordergrund	`#FF9C9C9C`	`#FF9C9C9C`	`#FF9C9C9C`	`HotTrack`

Rastersteuerelement

Grid control in Light (top), Dark (center), and Blue (bottom) themes
Rastersteuerelement in Hellen Designs (oben), Dunkel (Mitte) und Blau (unten)

Hinweis

Text

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF000000`	`WindowText`
Vordergrund: ausgewählt	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`

Unterabschnittsheader

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF717171`	`#FF999999`	`#FF717171`	`GrayText`
Hintergrund	`#FFF5F5F5`	`#FF252526`	`#FFFFFFFF`	`Window`
Hintergrund: ausgewählt	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`

Rasterlinien

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Elemente (Vordergrund)	`#FFF0F0F0`	`#FF000000`	`#FFF0F0F0`	`ScrollBar`
Kopfzeile (Vordergrund)	`#FFE0E3E6`	`#FF333337`	`#FFBEC3CB`	`ControlDark`

Manifest-Designer

Manifest Designer in Light (top), Dark (center), and Blue (bottom) themes
Manifest-Designer in Hellen Designs (oben), Dunkel (Mitte) und Blau (unten)

Hinweis

Text

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Hintergrund	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`

Aktive Registerkarte

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ActiveCaptionText`
Hintergrund	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`ActiveCaption`

Inaktive Registerkarte

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`InactiveCaptionText`
Hintergrund	`#FFFEFEFE`	`#FF333337`	`#FFFEFEFE`	`HighlightText`
Vordergrund: Hovern	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`InactiveCaption`
Hintergrund: Daraufzeigen	`#FFCCCEDB`	`#FF3F3F46`	`#FFCCCEDB`	`Highlight`

Wasserzeichentext

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF999999`	`#FF999999`	`#FF717171`	`GrayText`
Hintergrund	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`

Beschreibungsbereich

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Hintergrund	`#FFEEEEF2`	`#FF252526`	`#FFFFFFFF`	`Control`

TFS-Tagging

TFS tagging in Light (top), Dark (center), and Blue (bottom) themes
TFS-Tagging in Hellen (oben), Dunkel (Mitte) und Blau (unten) Designs

Hinweis

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Vordergrund (Text)	`#FF1E1E1E`	`#FFFFFFFF`	`#FF1E1E1E`	`ActiveCaptionText`
Hintergrund	`#FFE1E6F1`	`#FF424242`	`#FFE9ECEE`	`ActiveCaption`
Vordergrund (Text): Daraufzeigen	`#FF1E1E1E`	`#FFFFFFFF`	`#FF1E1E1E`	`HighlightText`
Hintergrund: Daraufzeigen	`#FFC9DEF5`	`#FF606060`	`#FFFDF4BF`	`Highlight`
Vordergrund (Text): gedrückt	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Hintergrund: gedrückt	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`
Vordergrund (Text): ausgewählt	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Hintergrund: ausgewählt	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`

Glyphe beim Daraufzeigen

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Glyph	`#FF1E1E1E`	`#FFFFFFFF`	`#FF1E1E1E`	`HighlightText`
Hintergrund	`#FFF7F7F9`	`#FF393939`	`#FFFFFCF4`	`HighlightText`
Border	`#FFF7F7F9`	`#FF393939`	`#FFE5C365`	`HighlightText`
Glyphe (Drücken und Daraufzeigen)	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`Highlight`
Hintergrund (Drücken und Daraufzeigen)	`#FF0E6198`	`#FF007ACC`	`#FFFDF4BF`	`HighlightText`
Rahmen (Drücken und Daraufzeigen)	`#FF0E6198`	`#FF007ACC`	`#FFE5C365`	`HighlightText`

Ausgewählte Glyphe

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Glyph	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Hintergrund	`#FF52B0EF`	`#FF52B0EF`	`#FF52B0EF`	`HighlightText`
Border	`#FF52B0EF`	`#FF52B0EF`	`#FF52B0EF`	`HighlightText`
Glyphe (Drücken und Daraufzeigen)	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`Highlight`
Hintergrund (Drücken und Daraufzeigen)	`#FF0E6198`	`#FF0E6198`	`#FF0E6198`	`HighlightText`
Rahmen (Drücken und Daraufzeigen)	`#FF0E6198`	`#FF0E6198`	`#FF0E6198`	`HighlightText`

Schaltflächen-Steuerelemente

Hinweis

Standard

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Darstellung
Vordergrund	`#1E1E1E`	`#F1F1F1`	`#1E1E1E`	`ControlText`
Hintergrund	`#ECECF0`	`#3F3F46`	`#ECECF0`	`Control`
Border	`#CCCEDB`	`#555555`	`#CCCEDB`	`ControlDark`

Deaktiviert

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Darstellung
Vordergrund	`#A2A4A5`	`#656565`	`#A2A4A5`	`InactiveCaptionText`
Hintergrund	`#F5F5F5`	`#2D2D30`	`#F5F5F5`	`InactiveCaption`
Border	`#CCCEDB`	`#3F3F46`	`#CCCEDB`	`InactiveBorder`

Draufzeigen

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Darstellung
Vordergrund	`#1E1E1E`	`#F1F1F1`	`#1E1E1E`	`ActiveCaptionText`
Hintergrund	`#C9DEF5`	`#3F3F46`	`#C9DEF5`	`ActiveCaption`
Border	`#CCCEDB`	`#007ACC`	`#3399FF`	`ActiveBorder`

Gedrückt

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Darstellung
Vordergrund	`#FFFFFF`	`#F1F1F1`	`#FFFFFF`	`HighlightText`
Hintergrund	`#007ACC`	`#007ACC`	`#007ACC`	`Highlight`
Border	`#007ACC`	`#007ACC`	`#007ACC`	`HighlightText`

Fokus

	Hell-Design	Design „Dunkel“	Blaues Design	Hoher Kontrast
Darstellung
Vordergrund	`#1E1E1E`	`#F1F1F1`	`#1E1E1E`	`HighlightText`
Hintergrund	`#C9DEF5`	`#3F3F46`	`#C9DEF5`	`Highlight`
Border	`#3399FF`	`#007ACC`	`#3399FF`	`HighlightText`