Referencia de valor de color para Visual Studio

2025-06-12

Este tema es una referencia para crear nuevos tokens de color. Al crear una nueva interfaz de usuario, puede usar colores similares de la interfaz de usuario existente para elegir los colores de cada tema principal y el nombre del color del sistema para ese elemento para los temas de contraste alto.

Para obtener información sobre la implementación sobre cómo crear nuevos tokens de color, consulte Herramientas de creación de temas de color.

Para que los tokens de color se usen con la interfaz de usuario existente, consulte Colores compartidos para Visual Studio.

Al usar esta guía de referencia, recuerde:

Copie siempre los tonos de primer plano y de fondo juntos. No elija un primer plano de un elemento de interfaz de usuario y un fondo de otro solo porque le gustan los tonos.
Estos son códigos hexadecimales, no tokens de color. No puede usar los nombres de token de color reales de estos elementos de interfaz de usuario porque no puede controlar cómo se pueden cambiar los tokens en el futuro. En su lugar, cree tokens dentro de su propia categoría y use los valores de tono que se muestran en las tablas. Los tokens de color para la interfaz de usuario existente se pueden encontrar en Colores compartidos para Visual Studio.
Solo se muestran muestras de contraste alto para la comparación. Use el nombre del color del sistema para la interfaz de usuario de contraste alto y no use un selector de ojos o selector de colores en estas muestras. Las muestras de contraste alto de este tema reflejan el tema Contraste alto #1 en Windows. Los colores tendrán un aspecto diferente en otros temas de contraste alto.
Para obtener los mejores resultados, empareja los conjuntos de colores con la interfaz de usuario similar al ejemplo.

Propiedades (ventana)

Properties window in Light (left), Dark (center), and Blue (right) themes
ventana Propiedades en los temas Claro, Oscuro y Azul

Nota:

Solo se muestran muestras de contraste alto para la comparación. Use el nombre del color del sistema para la interfaz de usuario de contraste alto y no use un selector de ojos o selector de colores en estas muestras. Las muestras de contraste alto de este tema reflejan el tema Contraste alto #1 en Windows. Los colores tendrán un aspecto diferente en otros temas de contraste alto.

Líneas divisorias

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Valor predeterminado	`#FFEEEEF2`	`#FF2D2D30`	`#FFEEEEF2`	`ControlDark`

Glifo de expansión

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Fondo	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Primer plano: mantener el puntero	`#FF007ACC`	`#FF007ACC`	`#FF007ACC`	`HighlightText`
Fondo: mantener el puntero	`#FFC9DEF5`	`#FF3E3E40`	`#FFFFFCF4`	`Highlight`
Border	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Borde: mantener el puntero	`#FFC9DEF5`	`#FF3E3E40`	`#FFE5C365`	`WindowFrame`

Control de pestaña incrustado: cuerpo

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Fondo	`#FFE7E8EC`	`#FF1B1B1C`	`#FFE7E8EC`	`Control`
Border	`#FFE7E8EC`	`#FF1B1B1C`	`#FFE7E8EC`	`WindowFrame`

Control de pestaña incrustado: pestaña activa

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Fondo	`#FFE7E8EC`	`#FF1B1B1C`	`#FFE7E8EC`	`Highlight`
Border	`#FFE7E8EC`	`#FF1B1B1C`	`#FFE7E8EC`	`WindowFrame`

Control de pestaña incrustado: pestaña inactiva

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Fondo	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`
Primer plano: mantener el puntero	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Fondo: mantener el puntero	`#FFC9DEF5`	`#FF3E3E40`	`#FFFEFEFE`	`Highlight`
Primer plano: deshabilitado	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`GrayText`
Fondo: deshabilitado	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`
Border	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`WindowFrame`
Borde: mantener el puntero	`#FFC9DEF5`	`#FF3E3E40`	`#FFFEFEFE`	`WindowFrame`
Borde: deshabilitado	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`WindowFrame`

Encabezado de sección

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Primer plano: mantener el puntero	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Fondo	`#FFEEEEF2`	`#FF292929`	`#FFEEEEF2`	`Control`
Fondo: mantener el puntero	`#FFC9DEF5`	`#FF3E3E40`	`#FFFFFCF4`	`Highlight`
Border	None	None	None	None
Borde: mantener el puntero	`#FFC9DEF5`	`#FF3E3E40`	`#FFE5C365`	`WindowFrame`

Grupo de categorías

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano del cuerpo	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Fondo del cuerpo	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`
Primer plano del glifo	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`WindowText`
Primer plano del glifo: mantener el puntero	`#FF007ACC`	`#FF007ACC`	`#FF007ACC`	`WindowText`

Botones de alternancia

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`WindowText`
Fondo	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Primer plano: mantener el puntero	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Fondo: mantener el puntero	`#FFC9DEF5`	`#FF3E3E40`	`#FFFFFCF4`	`Highlight`
Primer plano: seleccionado	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Fondo: seleccionado	`#FFF5F5F5`	`#FF252526`	`#FFFDF4BF`	`Highlight`
Primer plano: deshabilitado	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`ControlText`
Fondo: deshabilitado	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Border	`#FFCCCEDB`	`#FF3F3F46`	`#FFCCCEDB`	`Window`
Borde: mantener el puntero	`#FFC9DEF5`	`#FF3E3E40`	`#FFE5C365`	`WindowFrame`
Borde: seleccionado	`#FF007ACC`	`#FF007ACC`	`#FFE5C365`	`WindowFrame`
Borde: deshabilitado	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`WindowFrame`

Campos de entrada

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Fondo	`#FFFFFFFF`	`#FF333337`	`#FFFCFCFC`	`Control`
Primer plano: deshabilitado	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`GrayText`
Fondo: deshabilitado	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`
Border	`#FFCCCEDB`	`#FF434346`	`#FFCCCEDB`	`ControlDark`
Borde: deshabilitado	`#FFCCCEDB`	`#FF434346`	`#FFC6C6C6`	`ControlDark`

Elementos de lista

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Primer plano: mantener el puntero	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`HighlightText`
Fondo: mantener el puntero	`#FFC9DEF5`	`#72555555`	`#FFFDF4BF`	`Highlight`
Primer plano: seleccionado	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Fondo: seleccionado	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`
Primer plano: deshabilitado	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`GrayText`
Borde: mantener el puntero	`#FFC9DEF5`	`#72555555`	`#FFFDF4BF`	`WindowFrame`
Borde: seleccionado	`#FFCCCEDB`	`#FF3399FF`	`#FF3399FF`	`WindowFrame`

Botones de comando

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Fondo: mantener el puntero	`#FFC9DEF5`	`#FF3E3E40`	`#FFFEFEFE`	`Highlight`
Primer plano: seleccionado	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Fondo: presionado	`#FF007ACC`	`#FF007ACC`	`#FF007ACC`	`Highlight`
Primer plano: deshabilitado	`#FFA2A4A5`	`#FF656565`	`#FFA2A4A5`	`GrayText`
Fondo: deshabilitado	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Window`
Borde: mantener el puntero	`#FFC9DEF5`	`#FF3E3E40`	`#FFFEFEFE`	`HighlightText`
Borde: presionado	`#FF007ACC`	`#FF007ACC`	`#FF007ACC`	`HighlightText`
Borde: deshabilitado	`#FFCCCEDB`	`#FF434346`	`#FFC6C6C6`	`WindowFrame`

Elementos de control de cuadrícula de propiedades

Properties grid in Light (left), Dark (center), and Blue (right) themes
Cuadrícula de propiedades en temas claros, oscuros y azules

Nota:

Contenido

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF000000`	`WindowText`
Fondo	`#FFF5F5F5`	`#FF252526`	`#FFFFFFFF`	`Control`
Primer plano: seleccionado, centrado	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Fondo: seleccionado, centrado	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`
Primer plano: seleccionado, sin foco	`#FF1E1E1E`	`#FFF1F1F1`	`#FF000000`	`WindowText`
Fondo: seleccionado, sin enfoque	`#FFEEEEF2`	`#FF2D2D30`	`#FFEEEEF2`	`ControlDark`
Líneas divisoras	`#FFEEEEF2`	`#FF2D2D30`	`#FFEEEEF2`	`ControlDark`

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF000000`	`WindowText`
Fondo	`#FFEEEEF2`	`#FF2D2D30`	`#FFEEEEF2`	`ControlDark`

IU de CodeLens

CodeLens UI

Nota:

Los colores de la interfaz de usuario de CodeLens son los mismos para los temas Claro, Oscuro y Azul.

Nota:

Body

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FF1E1E1E`	`#FF1E1E1E`	`WindowText`
Fondo	`#FFFCFCFC`	`#FFFCFCFC`	`#FFFCFCFC`	`Window`
Primer plano: seleccionado	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Fondo: seleccionado	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`
Fondo: resaltado	`#FFFDFBAC`	`#FFFDFBAC`	`#FFFDFBAC`	`HotTrack`
Border	`#FF6FC2E9`	`#FF6FC2E9`	`#FF6FC2E9`	`WindowFrame`

Hipervínculo y separador

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano del hipervínculo	`#FF0E70C0`	`#FF0E70C0`	`#FF0E70C0`	`HotTrack`
Separador en primer plano	`#FF9C9C9C`	`#FF9C9C9C`	`#FF9C9C9C`	`HotTrack`

Control de cuadrícula

Grid control in Light (top), Dark (center), and Blue (bottom) themes
Control de cuadrícula en temas claro (superior), oscuro (centro) y azul (inferior)

Nota:

Body

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF000000`	`WindowText`
Primer plano: seleccionado	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`

Encabezado de subsección

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF717171`	`#FF999999`	`#FF717171`	`GrayText`
Fondo	`#FFF5F5F5`	`#FF252526`	`#FFFFFFFF`	`Window`
Fondo: seleccionado	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`

Líneas de cuadrícula

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Elementos (primer plano)	`#FFF0F0F0`	`#FF000000`	`#FFF0F0F0`	`ScrollBar`
Encabezado (primer plano)	`#FFE0E3E6`	`#FF333337`	`#FFBEC3CB`	`ControlDark`

Diseñador de manifiestos

Manifest Designer in Light (top), Dark (center), and Blue (bottom) themes
Diseñador de manifiestos en claro (superior), oscuro (centro) y temas azul (inferior)

Nota:

Body

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Fondo	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`

Pestaña Activa

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ActiveCaptionText`
Fondo	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`ActiveCaption`

Pestaña Inactivo

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`InactiveCaptionText`
Fondo	`#FFFEFEFE`	`#FF333337`	`#FFFEFEFE`	`HighlightText`
Primer plano: mantener el puntero	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`InactiveCaption`
Fondo: mantener el puntero	`#FFCCCEDB`	`#FF3F3F46`	`#FFCCCEDB`	`Highlight`

Texto de marca de agua

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF999999`	`#FF999999`	`#FF717171`	`GrayText`
Fondo	`#FFF5F5F5`	`#FF252526`	`#FFF6F6F6`	`Control`

Panel de descripción

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano	`#FF1E1E1E`	`#FFF1F1F1`	`#FF1E1E1E`	`ControlText`
Fondo	`#FFEEEEF2`	`#FF252526`	`#FFFFFFFF`	`Control`

Etiquetado de TFS

TFS tagging in Light (top), Dark (center), and Blue (bottom) themes
Etiquetado de TFS en temas claro (superior), Oscuro (centro) y Azul (inferior)

Nota:

Etiquetas

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Primer plano (texto)	`#FF1E1E1E`	`#FFFFFFFF`	`#FF1E1E1E`	`ActiveCaptionText`
Fondo	`#FFE1E6F1`	`#FF424242`	`#FFE9ECEE`	`ActiveCaption`
Primer plano (texto): mantenga el puntero	`#FF1E1E1E`	`#FFFFFFFF`	`#FF1E1E1E`	`HighlightText`
Fondo: mantener el puntero	`#FFC9DEF5`	`#FF606060`	`#FFFDF4BF`	`Highlight`
Primer plano (texto): presionado	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Fondo: presionado	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`
Primer plano (texto): seleccionado	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Fondo: seleccionado	`#FF3399FF`	`#FF3399FF`	`#FF3399FF`	`Highlight`

Glifo al mantener el puntero

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Glifo	`#FF1E1E1E`	`#FFFFFFFF`	`#FF1E1E1E`	`HighlightText`
Fondo	`#FFF7F7F9`	`#FF393939`	`#FFFFFCF4`	`HighlightText`
Border	`#FFF7F7F9`	`#FF393939`	`#FFE5C365`	`HighlightText`
Glifo (presione y mantenga el puntero)	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`Highlight`
Fondo (presione y mantenga el puntero)	`#FF0E6198`	`#FF007ACC`	`#FFFDF4BF`	`HighlightText`
Borde (presione y mantenga el puntero)	`#FF0E6198`	`#FF007ACC`	`#FFE5C365`	`HighlightText`

Glifo seleccionado

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Glifo	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`HighlightText`
Fondo	`#FF52B0EF`	`#FF52B0EF`	`#FF52B0EF`	`HighlightText`
Border	`#FF52B0EF`	`#FF52B0EF`	`#FF52B0EF`	`HighlightText`
Glifo (presione y mantenga el puntero)	`#FFFFFFFF`	`#FFFFFFFF`	`#FFFFFFFF`	`Highlight`
Fondo (presione y mantenga el puntero)	`#FF0E6198`	`#FF0E6198`	`#FF0E6198`	`HighlightText`
Borde (presione y mantenga el puntero)	`#FF0E6198`	`#FF0E6198`	`#FF0E6198`	`HighlightText`

Controles de botón

Nota:

Valor predeterminado

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Appearance (Apariencia)
Primer plano	`#1E1E1E`	`#F1F1F1`	`#1E1E1E`	`ControlText`
Fondo	`#ECECF0`	`#3F3F46`	`#ECECF0`	`Control`
Border	`#CCCEDB`	`#555555`	`#CCCEDB`	`ControlDark`

Deshabilitado

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Appearance (Apariencia)
Primer plano	`#A2A4A5`	`#656565`	`#A2A4A5`	`InactiveCaptionText`
Fondo	`#F5F5F5`	`#2D2D30`	`#F5F5F5`	`InactiveCaption`
Border	`#CCCEDB`	`#3F3F46`	`#CCCEDB`	`InactiveBorder`

Mantener presionado

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Appearance (Apariencia)
Primer plano	`#1E1E1E`	`#F1F1F1`	`#1E1E1E`	`ActiveCaptionText`
Fondo	`#C9DEF5`	`#3F3F46`	`#C9DEF5`	`ActiveCaption`
Border	`#CCCEDB`	`#007ACC`	`#3399FF`	`ActiveBorder`

Presionado

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Appearance (Apariencia)
Primer plano	`#FFFFFF`	`#F1F1F1`	`#FFFFFF`	`HighlightText`
Fondo	`#007ACC`	`#007ACC`	`#007ACC`	`Highlight`
Border	`#007ACC`	`#007ACC`	`#007ACC`	`HighlightText`

Enfocado

	Tema claro	Tema oscuro	Tema azul	Contraste alto
Appearance (Apariencia)
Primer plano	`#1E1E1E`	`#F1F1F1`	`#1E1E1E`	`HighlightText`
Fondo	`#C9DEF5`	`#3F3F46`	`#C9DEF5`	`Highlight`
Border	`#3399FF`	`#007ACC`	`#3399FF`	`HighlightText`