Cómo migrar a color HD CSS

Este documento forma parte de la guía de colores de CSS de alta definición.

Adam Argyle
Adam Argyle

Existen dos estrategias principales para actualizar el color de tu proyecto web y admitir pantallas de gama amplia:

  1. Degradación elegante: Usa los nuevos espacios de color y permite que el navegador y el sistema operativo determinen qué color mostrar en función de las capacidades de la pantalla.

  2. Mejora progresiva: Usa @supports y @media para evaluar las capacidades del navegador del usuario y, si se cumplen las condiciones, proporciona colores de gama amplia.

Si un navegador no comprende el color display-p3, haz lo siguiente:

color: red;
color: color(display-p3 1 0 0);

Si un navegador comprende el color display-p3, haz lo siguiente:

color: red;
color: color(display-p3 1 0 0);

Cada uno tiene ventajas y desventajas. Esta es una lista rápida de las ventajas y desventajas:

Degradación elegante

  • Ventajas
    • La ruta más sencilla.
    • El gamut del navegador se asigna o se ajusta a sRGB si no es una pantalla de gama amplia, por lo que la responsabilidad recae en el navegador.
  • Desventajas
    • Es posible que el navegador limite o asigne la gama de colores a un color que no te guste.
    • Es posible que el navegador no comprenda la solicitud de color y falle por completo. Sin embargo, esto se puede mitigar si especificas el color dos veces y permites que la cascada recurra al color anterior que sí comprende.

Mejora progresiva

  • Ventajas
    • Más control con la fidelidad de color administrada
    • Una estrategia aditiva que no afecta los colores actuales.
  • Desventajas
    • Debes administrar dos sintaxis de colores separadas.
    • Debes administrar dos gamas de colores independientes.

Comprueba la compatibilidad con la gama y el espacio de color

El navegador permite verificar la compatibilidad con las funciones de gama amplia y la compatibilidad con la sintaxis de colores de CSS y JavaScript. No se pone a disposición la gama exacta de colores que tiene el usuario, sino que se proporciona una respuesta generalizada para mantener la privacidad del usuario. Sin embargo, la compatibilidad exacta con el espacio de color está disponible, ya que no es específica de las capacidades del hardware del usuario, como lo es la gama.

Consultas de compatibilidad con la gama de colores

En los siguientes ejemplos de código, se verifica el rango de colores del usuario visitante en su pantalla.

Cómo verificar desde CSS

La consulta de asistencia menos específica es la consulta de medios dynamic-range:

Navegadores compatibles

  • Chrome: 98.
  • Edge: 98.
  • Firefox: 100.
  • Safari: 13.1.

Origen

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

Se puede consultar la compatibilidad aproximada o superior con la consulta de medios color-gamut:

Navegadores compatibles

  • Chrome: 58.
  • Edge: 79.
  • Firefox: 110.
  • Safari: 10.

Origen

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

Hay dos consultas de contenido multimedia adicionales para verificar la compatibilidad:

  1. @media (color)
  2. @media (color-index)

Cómo verificar desde JavaScript

En el caso de JavaScript, se puede llamar a la función window.matchMedia() y pasarle una consulta de contenido multimedia para su evaluación.

Navegadores compatibles

  • Chrome: 9.
  • Edge: 12.
  • Firefox: 6.
  • Safari: 5.1.

Origen

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

El patrón anterior se puede copiar para el resto de las consultas de medios.

Consultas de compatibilidad con el espacio de color

En los siguientes ejemplos de código, se verifica el navegador del usuario visitante y su selección de espacios de color con los que trabajar.

Cómo verificar desde CSS

La compatibilidad con espacios de color individuales se puede consultar con una consulta @supports:

Navegadores compatibles

  • Chrome: 28.
  • Edge: 12.
  • Firefox: 22.
  • Safari: 9.

Origen

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

Cómo verificar desde JavaScript

En el caso de JavaScript, se puede llamar a la función CSS.supports() y pasarle un par de propiedad y valor para ver si el navegador lo comprende.

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

Cómo combinar las verificaciones de hardware y análisis

Mientras esperas a que cada navegador implemente estas nuevas funciones de color, es una buena idea verificar la capacidad de hardware y la capacidad de análisis de colores. Esto es lo que suelo usar cuando mejoro los colores de forma progresiva a alta definición:

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

Cómo depurar el color con las Herramientas para desarrolladores de Chrome

Chrome DevTools se actualizó y está equipado con nuevas herramientas para ayudar a los desarrolladores a crear, convertir y depurar colores HD.

Selector de color actualizado

El selector de color ahora admite todos los espacios de color nuevos. Permite que los autores interactúen con los valores del canal de la misma manera que lo harían.

Herramientas para desarrolladores que muestran compatibilidad con el color Display P3.

Límites de gama

También se agregó una línea de límite de gama que traza una línea entre las gamas sRGB y Display P3. Se aclara en qué gama se encuentra el color seleccionado.

DevTools muestra una línea de gama en el selector de color.

Esto ayuda a los autores a diferenciar visualmente entre los colores HD y los que no son HD. Es especialmente útil cuando se trabaja con la función color() y los nuevos espacios de color, ya que pueden producir colores no HD y HD. Si quieres verificar en qué gama se encuentra tu color, abre el selector de color y compruébalo.

Cómo convertir colores

DevTools puede convertir colores entre formatos admitidos, como hsl, hwb, rgb y hexadecimal, desde hace muchos años. shift + click en una muestra de color cuadrada en el panel Estilos para realizar esta conversión. Las nuevas herramientas de color no solo alternan entre las conversiones, sino que generan un diálogo en el que los autores pueden ver y elegir la conversión que deseen.

Cuando se realiza la conversión, es importante saber si se recortó para que se ajuste al espacio. DevTools ahora tiene un ícono de advertencia en el color convertido que te alerta sobre este recorte.

Captura de pantalla del recorte de gama de DevTools, con un ícono de advertencia junto al color.

Descubre más funciones de depuración de CSS en DevTools.

Próximos pasos

Mayor intensidad, manipulaciones y interpolación coherentes, y, en general, brinda una experiencia más colorida a los usuarios.

Obtén más información sobre los recursos de color en la guía.