El selector de color proporciona una GUI para cambiar las declaraciones color y *-color, y te permite crear, convertir y depurar colores no HD y HD con un solo clic.
Para obtener información detallada sobre los nuevos espacios de color, consulta la Guía de color CSS de alta definición.
Cómo abrir el selector de color y cambiar los colores
Usa el selector de color para cambiar los valores de color con un solo clic:
- Selecciona un elemento en el panel Elementos.
En el panel Estilos, busca la declaración
coloro*-colorque deseas cambiar.A la izquierda de cada valor
coloro*-color, hay un pequeño ícono cuadrado con una vista previa de ese color.
Para inspeccionar el valor calculado, usa el panel Calculado.
- Haz clic en el cuadrado de vista previa junto a un color para abrir el selector de color.
- Para cambiar el color, usa cualquiera de los elementos de la IU del Selector de color.
Elementos del selector de color
A continuación, se incluye una descripción de cada uno de los elementos de la IU del Selector de color:
- Sombras
- Cuentagotas Consulta Cómo tomar una muestra de un color en cualquier lugar con el cuentagotas.
- Copiar en el portapapeles Copia el Valor de visualización en el portapapeles.
- Valor de visualización Son los argumentos del espacio de color elegido.
- Relación de contraste Solo está disponible para los valores de
color. Es la diferencia entrecolorybackground-color. - Paleta de colores. Haz clic en un cuadrado para cambiar el color al de ese cuadrado.
- Límite de la gama. Esta línea solo está disponible para los nuevos espacios de color y la función
color(). Pueden producir colores en HD y no en HD. La línea te permite distinguir entre HD y no HD. - Círculo de color. Arrastra este círculo por los tonos para cambiar el valor de visualización.
- Control deslizante de tono de color
- Control deslizante de opacidad:
- Selector de valores de visualización Elige un espacio de color de la lista desplegable. Consulta Cómo convertir colores.
- Amplía la relación de contraste. Abre la sección correspondiente que te permite corregir el contraste.
Selector de paleta de colores Haz clic en él para alternar entre las siguientes opciones:
- Paleta de colores de Material Design.
- Paleta Personalizada Para agregar manualmente el color actual a esta paleta, haz clic en
. - Paleta CSS Variables Enumera todas las variables CSS personalizadas (agregadas con
--) en tu página. - Paleta de colores de la página Para generar esta paleta, DevTools busca todos los colores en tus hojas de estilo.
Elige un espacio de color
Para elegir un espacio de color, haz lo siguiente:
Mantén presionada la tecla Mayúsculas y haz clic en el ícono de vista previa junto a un valor de color. Se abrirá una lista desplegable.
Elige uno de los siguientes espacios de color:
O uno de los espacios nuevos:
O un espacio definido por la función
color(<color_space> X X X)
Cómo convertir colores
Cuando cambias de espacio de color con el selector de valores de visualización, DevTools convierte los valores automáticamente.
Coloca el cursor sobre el ícono para ver el valor original.
En el siguiente video, se muestran las conversiones en acción.
Corrige el contraste
Para corregir un problema de contraste en una declaración de color, sigue estos pasos:
- Abre el Selector de color junto al valor
color. - Expande la sección Relación de contraste
. Usa el color sugerido que cumple con un lineamiento:
- Haz clic en
junto al lineamiento. - En la vista previa Sombras de la parte superior, arrastra el círculo de color debajo de la línea correspondiente.
- Haz clic en
De forma predeterminada, el Selector de color sugiere valores que cumplen con el APCA.
Como alternativa, puedes configurarlo para que sugiera valores que cumplan con los lineamientos de WebAIM. En 
Configuración > Preferencias > Elementos, desmarca la casilla de verificación 
Advanced Perceptual Contrast Algorithm (APCA)….
Para obtener una lista de todos los problemas de contraste de una sola vez, sigue la guía Cómo hacer que tu sitio web sea más legible.
Cómo tomar una muestra de un color en cualquier lugar con el Cuentagotas
El 
cuentagotas puede tomar muestras de colores de la página y de cualquier lugar de la pantalla.
Para elegir un color de cualquier parte de la pantalla, haz lo siguiente:
- Abre el Selector de color y realiza una de las siguientes acciones:
- Haz clic en el botón
. - Presiona C para activar el cuentagotas. Para desactivar, presiona Escape.
- Haz clic en el botón
- Con el cuentagotas activo, coloca el cursor sobre el color objetivo y haz clic para tomar una muestra.
En este ejemplo, el selector de color muestra un valor de color actual de rgb(224 255 255 / 15%). Este color cambia a rosa cuando haces clic fuera de Chrome.