Cómo migrar a color HD CSS

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

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

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 visualización.

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

Si un navegador no entiende el color display-p3:

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

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

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

Cada uno tiene ventajas y desventajas. A continuación, se incluye una lista rápida de ventajas y desventajas:

Degradación correcta

• Ventajas
  • La ruta más sencilla.
  • Si el gamut del navegador se aplica o se limita a sRGB, no es una pantalla de amplia gama, por lo tanto, el navegador es responsable de ella.
• Desventajas
  • El navegador puede restringir el gamut o restringirlo 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 se especifica el color dos veces, lo que permite que la cascada recurra al color anterior que sí comprenda.

Mejora progresiva

• Ventajas
  • Más control con la fidelidad de colores administrada
  • Es una estrategia adicional que no afecta los colores actuales.
• Desventajas
  • Debes administrar dos sintaxis de color separadas.
  • Debes administrar dos gamuts de color separados.

Cómo verificar la compatibilidad con la gama y el espacio de color

El navegador permite comprobar la compatibilidad con una amplia gama de capacidades y la compatibilidad con la sintaxis de colores de CSS y JavaScript. La gama exacta de colores que tiene el usuario no está disponible, se proporciona una respuesta generalizada para mantener la privacidad del usuario. Sin embargo, está disponible la compatibilidad exacta con el espacio de color, ya que no es específica de las capacidades del hardware del usuario, como la gama.

Consultas de compatibilidad con la gama de colores

Los siguientes ejemplos de código verifican el rango de colores del usuario que visita en su pantalla.

Verificar desde CSS

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

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

Se puede solicitar asistencia aproximada o superior con la consulta de medios color-gamut:

@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 medios adicionales para verificar la asistencia:

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

Revisa desde JavaScript

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

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

Los siguientes ejemplos de código verifican el navegador del usuario que visita y su selección de espacios de color con los que trabajar.

Verificar desde CSS

La compatibilidad con espacios de color individuales se puede solicitar a través de una consulta @supports:

@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 */
}

Revisa desde JavaScript

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

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 reunir el hardware y analizar las verificaciones

Mientras esperas a que cada navegador implemente estas nuevas funciones de color, se recomienda comprobar la capacidad del hardware y la de análisis de color. Esto suele ser lo que uso cuando mejoro progresivamente los colores 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);
  }
}

Depura el color con las Herramientas para desarrolladores de Chrome

Se actualizaron las Herramientas para desarrolladores de Chrome y están equipadas con herramientas nuevas para ayudar a los desarrolladores a crear, convertir y depurar el color HD.

Se actualizó el selector de color

El selector de color ahora admite todos los nuevos espacios de color. Esto permite que los autores interactúen con los valores del canal como lo harían.

Límites de Gamut

También se agregó una línea de límite de gamut, que dibuja una línea entre srgb y display-p3 gamuts. Definir con claridad el gamut del color seleccionado

Esto ayuda a los autores a diferenciar visualmente los colores HD y los que no son HD. Resulta especialmente útil cuando se trabaja con la función color() y los nuevos espacios de color porque pueden producir colores que no sean HD y HD. Si quieres comprobar en qué gamut se encuentra tu color, abre el selector de color y descúbrelo.

Convertir colores

Desde hace muchos años, Herramientas para desarrolladores pudo convertir colores entre formatos compatibles, como hsl, hwb, rgb y hexadecimal. shift + click en una muestra de color cuadrada en el panel Estilos para realizar esta conversión Las nuevas herramientas de color no solo recorren las conversiones, sino que también generan un diálogo en el que los autores pueden ver y elegir la conversión que desean.

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

Descubre más sobre la función de depuración de CSS en Herramientas para desarrolladores.

Próximos pasos

Más vitalidad, interpolaciones y manipulaciones coherentes y, en general, ofrecen una experiencia más colorida a tus usuarios.

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