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

Jecelyn Yeen

Sofia Emelianova

El Selector de colores proporciona una GUI para cambiar declaraciones color y *-color, y te permite crear, convertir y depurar colores que no sean HD y HD con un solo clic.

Punto clave: En este video, se muestra la 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 gamuts nuevos de la especificación de nivel de color 4 de CSS, y la función color-mix() del nivel de color 5 de CSS.

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

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

   A la izquierda de cada valor de 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 interseccionados junto a la función color-mix(): . La intersección es una vista previa del color resultante.

Para inspeccionar el valor procesado, usa el panel Computed.

1. Haz clic en el cuadrado de vista previa junto a un color para abrir el Selector de colores.
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 Toma una muestra de un color en cualquier lugar con el cuentagotas.
3. Copiar en el portapapeles. Copia el Valor de visualización en el portapapeles.
4. Valor de visualización: Argumentos del espacio de color elegido.
5. Relación de contraste: Disponible solo para valores de 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 que no sean HD. La línea te permite distinguir entre HD y no HD.
8. Círculo de color. Arrastra este círculo entre las sombras para cambiar el valor de visualización.
9. Control deslizante de tonalidad.
10. Control deslizante de opacidad.
11. Mostrar el selector de valores 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. Expandir la relación de contraste. Abre la sección correspondiente que te permite Corregir contraste.

13. Selector de paleta de colores: Haz clic en él para alternar entre las siguientes opciones:

    • Paleta de Material Design.
    • Paleta Custom. Para agregar manualmente el color actual a esta paleta, haz clic en .
    • Variables de CSS (CSS Variables). Muestra una lista de todas las variables de CSS personalizadas (se adjuntan con --) en tu página.
    • Paleta de colores de página. Para generar esta paleta, Herramientas para desarrolladores busca todos los colores en tus hojas de estilo.

Elige un espacio de color

Para elegir un espacio de color, sigue estos pasos:

1. Mantén presionada la tecla mayúscula y haz clic en el ícono de vista previa junto al valor de color. Se abrirá una lista desplegable.

   Nota: También puedes hacer clic en el Selector de valor de visualización del 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 uno de los nuevos espacios:

   • 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).

Convertir colores

Cuando alternas entre espacios de color con el selector de valores de Display, las Herramientas para desarrolladores convierten automáticamente los valores.

Precaución: Cuando se realiza la conversión de HD a HD, Herramientas para desarrolladores recorta los gamuts 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.

Corregir contraste

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

Para corregir un problema de contraste en una declaración color, haz lo siguiente:

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

3. Usa el color sugerido que cumpla con los lineamientos:

   • Haz clic en junto a los lineamientos.
   • 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 seguir los lineamientos de WebAIM. Como alternativa, puedes establecer que se sugieran valores que cumplen con la APCA: En Configuración > Experimentos, marca Habilitar nuevo algoritmo de contraste perceptivo avanzado (APCA)...

Para obtener una lista de todos los problemas de contraste de una sola vez, sigue la guía Haz que tu sitio web sea más legible.

Toma muestras de un color en cualquier lugar con el cuentagotas

El Cuentagotas puede tomar muestras de colores tanto de la página como de cualquier parte de la pantalla.

Para elegir un color desde cualquier parte de la pantalla:

1. 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 desactivarla, presiona Escape.
2. Con el Cuentagotas activo, coloca el cursor sobre el color de destino y haz clic para tomar muestras.

Nota: El Cuentagotas muestra colores solo en el espacio de colores 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 cambiará a rosa cuando hagas clic fuera de Chrome.