Inspecciona y depura colores HD y no HD con el selector de color

Jecelyn Yeen

Sofia Emelianova

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 clic.

Punto clave: En este video, se muestra una versión anterior a la 112 de las Herramientas para desarrolladores de Chrome. En versiones posteriores, el panel Estilos admite 12 espacios de color nuevos y 7 gamas nuevas de la especificación CSS Color Level 4 y la función color-mix() de CSS Color Level 5.

Para obtener un análisis detallado de los nuevos espacios de color, consulta la Guía de colores de CSS de alta definición.

Abre el selector de color y cambia los colores

Usa el Selector de color para cambiar los valores de color con un clic:

1. Selecciona un elemento en el panel Elementos.

2. En el panel Styles, busca la declaración color o *-color que deseas cambiar.

   A la izquierda de cada valor color o *-color, hay un pequeño ícono cuadrado con una vista previa de ese color.

   

   Nota: En este ejemplo, se muestran dos círculos que se cruzan junto a la función color-mix(): . La intersección es una vista previa del color resultante.

Para inspeccionar el valor calculado, usa el panel Cálculo.

1. Haz clic en el cuadrado de vista previa junto a un color para abrir el Selector de color.
2. 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:

1. Sombras.
2. Cuentagotas. Consulta Cómo tomar muestras de un color en cualquier lugar con el cuentagotas.
3. Copiar en el portapapeles. Copia el valor visible en el portapapeles.
4. Valor de visualización. Argumentos del espacio de color elegido.
5. Relación de contraste: Disponible solo para valores color. Es la diferencia entre color y background-color.
6. Paleta de colores: Haz clic en un cuadrado para cambiar el color al del cuadrado.
7. Límite de gama: Esta línea solo está disponible para los nuevos espacios de color y la función color(). Pueden producir colores HD y no HD. La línea te permite distinguir entre HD y no HD.
8. Círculo de colores. Arrastra este círculo sobre los tonos para cambiar el valor de visualización.
9. Control deslizante de tono:
10. Control deslizante de opacidad:
11. Interruptor de valor de visualización: Elige un espacio de color de la lista desplegable. Consulta Cómo convertir colores.
    Nota: Como alternativa, para abrir el menú desplegable directamente, mantén presionada la tecla Mayúsculas y haz clic en el ícono de vista previa del color junto al valor del color.
12. Expande la relación de contraste. Se abrirá la sección correspondiente que te permitirá corregir el contraste.

13. Interruptor 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 Variables de CSS. Muestra todas las variables CSS personalizadas (agregadas con --) de tu página.
    • Paleta 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:

1. 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.

   Nota: Como alternativa, haz clic en el Interruptor de valor de visualización en el Selector de color.

   

2. Elige uno de los siguientes espacios de color:

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   O bien uno de los espacios nuevos:

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   O un espacio definido por la función color(<color_space> X X X).

Cómo convertir colores

Cuando cambias entre espacios de color con el Selector de valores de visualización, DevTools convierte los valores automáticamente.

Precaución: Cuando se realiza la conversión de HD a no HD, DevTools recorta las gamas para que se ajusten al espacio y marca los valores recortados con íconos de advertencia .

Coloca el cursor sobre el ícono para ver el valor original.

En el siguiente video, se muestran las conversiones en acción.

Cómo corregir el contraste

Punto clave: El Selector de color calcula las proporciones de contraste solo para los valores de color y en relación con los valores de background-color correspondientes. Por lo tanto, solo los valores de color tienen secciones de relación de contraste.

Para solucionar un problema de contraste de una declaración color, sigue estos pasos:

1. Abre el Selector de color junto al valor color.
2. Expande la sección Proporción de contraste .

3. Usa el color sugerido que cumpla con un lineamiento:

   • Haz clic en junto al lineamiento.
   • En la vista previa de Sombras en la parte superior, arrastra el círculo de color debajo de la línea correspondiente.

Nota: De forma predeterminada, el Selector de color te sugiere que sigas los lineamientos de WebAIM. Como alternativa, puedes configurarlo para que sugiera valores que cumplan con el APCA: En Configuración > Experimentos, marca Habilitar nuevo algoritmo de contraste perceptual avanzado (APCA)…

.

Para obtener una lista de todos los problemas de contraste de una sola vez, sigue las instrucciones de la guía Cómo hacer que tu sitio web sea más legible.

Cómo tomar muestras 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 desde cualquier parte de la pantalla, haz lo siguiente:

1. Abre el Selector de color y haz una de las siguientes acciones:
   • Haz clic en el botón .
   • Presiona C para activar el cuentagotas. Para desactivarlo, presiona Escape.
2. Con el cuentagotas activo, coloca el cursor sobre el color de destino y haz clic para tomar una muestra.

Nota: El cuentagotas toma muestras de colores solo en el espacio de color sRGB. Cuando tomas muestras fuera de este espacio, el cuentagotas recorta el color al más cercano. Consulta Cómo convertir colores.

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.