Colores y fondos

docs.scrimba.com

Quieres que un botón sea un tono específico de azul. Encuentras el color en un archivo de diseño, pegas #1b2130 en tu hoja de estilos y funciona, pero no tienes idea de qué significan esos caracteres ni cómo ajustarías el tono un poco más claro. El color en CSS parece un montón de códigos crípticos hasta que aprendes los pocos sistemas subyacentes. Una vez que puedas leer un color y pintarlo en un fondo, la mayoría del carácter visual de una página está en tus manos.

Nombrar un color

CSS te permite escribir el mismo color de varias formas diferentes. La más simple es una palabra clave: un nombre en español simple que el navegador ya conoce.

.tag {
  color: rebeccapurple;      /* un color nombrado, sin códigos necesarios */
}

Hay alrededor de 140 de estos nombres, lo cual es útil para trabajos rápidos pero demasiado pocos para diseños reales. Las otras formas te permiten describir cualquier color. Un código hex es un # seguido de seis caracteres, y rgb() mezcla rojo, verde y azul por cantidad. Todos apuntan a colores exactos; las palabras clave son el atajo para los comunes.

.tag {
  color: #1b2130;            /* el mismo azul marino oscuro, escrito como código hex */
}

Hay cuatro formas de escribir un color en CSS, y describen los mismos colores a través de sistemas diferentes. Una palabra clave como rebeccapurple es un nombre fijo. Un código hex como #1b2130 empaqueta rojo, verde y azul en seis caracteres. La función rgb() establece esos mismos tres canales como números del 0 al 255. Y hsl() describe un color por matiz, saturación y luminosidad en su lugar.

.badge {
  color: #1b2130;                 /* hex: dos caracteres cada uno para rojo, verde, azul */
  color: rgb(27, 33, 48);         /* el mismo color como cantidades de rojo, verde, azul */
  color: hsl(219, 28%, 15%);      /* el mismo color como matiz, saturación, luminosidad */
}

Las tres líneas pintan un azul marino oscuro idéntico. Recurre a hsl() cuando estés eligiendo colores a mano. Se lee como una descripción en la que una persona puede razonar, donde hex y rgb son números que principalmente copias y pegas.

CSS acepta un color como palabra clave, código hex, rgb() o hsl(), y los primeros tres abordan el mismo espacio sRGB (el espacio de color estándar que las pantallas han usado durante décadas) a través de notaciones diferentes. Un código hex es base-16: #1b2130 es rojo 1b, verde 21, azul 30, cada par un valor de 00 a ff (0 a 255 en decimal). rgb() escribe esos mismos tres canales en decimal simple. Ninguno está construido para que un humano razone, porque mover un color "un poco más claro" significa ajustar tres números a la vez sin una dirección clara.

.badge {
  color: #1b2130;               /* base-16: 1b rojo, 21 verde, 30 azul */
  color: rgb(27 33 48);         /* los mismos canales, decimal, sintaxis moderna separada por espacios */
  color: hsl(219 28% 15%);      /* matiz 219deg, 28% saturación, 15% luminosidad */
}

Prefiere hsl(): sus tres ejes se mapean cada uno a una cosa que puedes ajustar de forma aislada. Matiz es una posición de 0 a 360 en la rueda de color, saturación es qué tan vívido es el color y luminosidad es qué tan brillante. ¿Quieres un estado de desplazamiento un tono más oscuro? Baja la luminosidad unos pocos porcentajes y deja los otros dos. Ese eje único legible es por qué hsl() se compone limpiamente con las propiedades personalizadas que usas para construir una paleta, donde podrías mantener un matiz y variar solo la luminosidad en un conjunto de tonos.

JunoNombrar un color El mismo color se puede escribir como palabra clave como rebeccapurple, código hex como #1b2130 o con rgb(). Las palabras clave son rápidas pero hay solo alrededor de 140 de ellas, así que la mayoría del trabajo real usa los códigos. No intentes leer un código hex a simple vista todavía; copiar valores exactos es completamente normal en esta etapa.

JunoNombrar un color Palabra clave, hex, rgb() e hsl() todos nombran los mismos colores a través de sistemas diferentes. Cuando estés eligiendo colores por ti mismo, usa hsl(), porque matiz, saturación y luminosidad son cosas en las que realmente puedes razonar. Hex y rgb() son para valores que copias de un diseño en lugar de ajustar a mano.

JunoNombrar un color Palabra clave, hex y rgb() todos abordan sRGB a través de notaciones diferentes; hsl() reenmarca el mismo color en tres ejes que puedes mover uno a la vez. Esa es toda la razón para preferirlo: un desplazamiento más oscuro es un número, la luminosidad, en lugar de tres coordinados. Se amortiza en el momento en que construyes una paleta a partir de propiedades personalizadas y varía la luminosidad en una escala.

Transparencia

A veces quieres un color que puedas ver parcialmente a través de él, así que lo que está detrás se muestra un poco. Esta es la transparencia, y la añades con un cuarto valor llamado alpha: 0 es completamente transparente, 1 es completamente sólido.

.overlay {
  background-color: rgb(27 33 48 / 0.5);   /* el azul marino, pero medio transparente */
}

El / 0.5 al final significa "opacidad media". También hay una propiedad llamada opacity que desvanece todo un elemento, texto incluido, a la vez:

.faded {
  opacity: 0.5;              /* desvanece todo el elemento, no un solo color */
}

La diferencia importa: alpha afecta solo ese color, mientras que opacity desvanece todo acerca del elemento.

Haces un color transparente agregando un valor de alpha, donde 0 es invisible y 1 es sólido. Tanto rgb() como hsl() lo toman después de una barra, y un código hex puede llevarlo como dos caracteres extra al final.

.overlay {
  background-color: rgb(27 33 48 / 0.5);    /* azul marino medio transparente */
  background-color: hsl(219 28% 15% / 0.5); /* lo mismo vía hsl */
  background-color: #1b213080;              /* lo mismo de nuevo: 80 es aproximadamente 50% alpha */
}

Hay una distinción importante entre alpha y la propiedad opacity. Alpha hace un color parcialmente transparente y nada más. opacity desvanece todo el elemento, incluido su texto, su borde y cualquier hijo, como una unidad única. Desvanece un color con alpha; desvanece un elemento completo con opacity. Si tu texto se ve débil cuando solo quisiste suavizar un fondo, recurriste a opacity donde querías alpha.

Alpha es un cuarto canal en un color, de 0 (completamente transparente) a 1 (completamente opaco), y pertenece a ese valor de color único. rgb() y hsl() modernos lo toman después de una barra, y hex lo acepta como un cuarto byte, así que #1b213080 es el azul marino en 80/ff, aproximadamente 50%. Porque alpha vive en el color, puedes hacer un fondo translúcido mientras el texto, bordes y todo lo demás permanece completamente sólido.

.overlay {
  background-color: hsl(219 28% 15% / 0.5);  /* solo este relleno es translúcido */
  color: white;                              /* el texto permanece completamente opaco */
}

opacity es una herramienta diferente que resulta ser similar. Establece la transparencia del elemento en su conjunto, y lo hace componiendo el elemento y todos sus descendientes en la página como un grupo. Dos consecuencias se derivan que alpha no tiene. Primero, opacity por debajo de 1 establece un nuevo contexto de apilamiento (una capa autocontenida para cómo se ordenan los elementos superpuestos), que puede cambiar qué se sitúa encima de qué. Segundo, no puedes recuperar un hijo sólido dentro de un padre desvanecido, porque el desvanecimiento se aplica al grupo terminado. Cuando solo quieras que un relleno o un borde sean transparentes, usa alpha en ese color y deja opacity solo.

JunoTransparencia Añade un cuarto valor a un color para hacerlo transparente: 0 es invisible, 1 es sólido, y algo como / 0.5 es a mitad de camino. Ese alpha solo toca el color único. La propiedad opacity separada desvanece todo el elemento, texto incluido, así que elige alpha cuando solo quieras un fondo más suave.

JunoTransparencia Alpha es transparencia en un color único, escrito después de una barra en rgb() o hsl(), o como dos caracteres hex extra. La propiedad opacity es la versión contundente: desvanece todo el elemento y sus hijos a la vez. Cuando tu texto inesperadamente se vuelve débil, usaste opacity donde alpha era la llamada correcta.

JunoTransparencia Alpha vive en el color, así que un relleno translúcido deja texto y bordes sólidos intactos. opacity compone todo el elemento y sus descendientes como un grupo, que es por qué un hijo no puede permanecer sólido dentro de un padre desvanecido, y por qué silenciosamente gira un nuevo contexto de apilamiento. Recurre a alpha a menos que realmente quieras que todo el elemento se desvanezca junto.

Color de fondo e imágenes

La propiedad background-color rellena el área detrás de un elemento, hasta su borde. Puedes usar cualquier color que puedas nombrar.

.hero {
  background-color: hsl(219 28% 15%);   /* un azul marino sólido detrás del contenido */
}

También puedes poner una imagen detrás de un elemento con background-image, señalando el archivo con url(...):

.hero {
  background-image: url("mountains.jpg");
  background-size: cover;               /* escala la imagen para llenar el área completa */
}

background-size: cover escala la imagen para que llene la caja completamente, recortando cualquier desbordamiento. Es la configuración que quieres la mayoría de las veces para que no haya espacios vacíos.

background-color pinta el área detrás del contenido, rellenando la caja de relleno hasta el borde. Encima de ese color puedes superponer una imagen con background-image y url(...). Porque se superpone, un color de fondo debajo de una imagen se ve a través de cualquier parte transparente y mientras la imagen se está cargando.

.hero {
  background-color: hsl(219 28% 15%);   /* se muestra a través y carga primero */
  background-image: url("mountains.jpg");
  background-size: cover;               /* llena la caja, recorta el desbordamiento */
  background-position: center;          /* mantén el medio de la imagen a la vista */
  background-repeat: no-repeat;         /* una copia, no mosaico */
}

Tres propiedades controlan cómo se sienta la imagen. background-size es generalmente cover (llena la caja, recorta lo que se derrama) o contain (ajusta toda la imagen adentro, que puede dejar espacios). background-position decide qué parte se ve cuando la imagen se recorta, center siendo el predeterminado seguro. background-repeat: no-repeat detiene una imagen pequeña de hacer mosaico en toda la caja.

background-color rellena el área de fondo del elemento, que por defecto es la caja de relleno, así que el color llega al borde externo del relleno y se detiene en el borde. background-image pinta encima de ese color, y vale la pena mantener un background-color sólido debajo de cualquier imagen fotográfica: es el respaldo mostrado mientras la imagen carga o si la solicitud falla, y se muestra a través de regiones transparentes, así que elegir uno cercano al tono de la imagen evita un destello de página desnuda.

.hero {
  background-color: hsl(219 28% 15%);   /* respaldo y relleno de tiempo de carga */
  background-image: url("mountains.jpg");
  background-size: cover;               /* cover: llena la caja, recorta el desbordamiento */
  background-position: center;          /* ancla el recorte en el centro */
  background-repeat: no-repeat;
}

La opción de tamaño es un verdadero compromiso. cover escala la imagen para llenar la caja en ambos ejes y recorta lo que se derrama, así que nada se deja en blanco pero parte de la imagen se pierde; contain escala hasta que toda la imagen se ajusta, así que nada se recorta pero la caja puede mostrar franjas descubiertas (el background-color llena esas). background-position importa más bajo cover, porque decide qué región sobrevive al recorte: center es seguro, pero un retrato podría querer top para mantener una cara en el marco. Para rellenos nítidos no fotográficos, ten en cuenta que un gradiente también cuenta como background-image, que la siguiente sección usa.

JunoColor de fondo e imágenesbackground-color rellena el espacio detrás de un elemento, e background-image: url(...) pone una imagen ahí en su lugar. Empareja una imagen con background-size: cover para que llene toda la caja sin dejar espacios. Esa combinación cubre la mayoría de lo que alcanzarás al inicio.

JunoColor de fondo e imágenes Una imagen de fondo se superpone al color de fondo, así que mantén un color debajo mientras la imagen carga. cover llena la caja y recorta el desbordamiento, contain ajusta toda la imagen y puede dejar espacios, y background-position decide qué parte permanece visible cuando se recorta. Añade no-repeat a menos que realmente quieras que la imagen haga mosaico.

JunoColor de fondo e imágenes Mantén un background-color bajo cualquier foto: es el respaldo durante la carga y se muestra a través de áreas transparentes. cover versus contain es llenar-y-recortar versus ajustar-y-quizás-espacios, y background-position solo gana su valor bajo cover, donde elige qué sobrevive al recorte. Ancla en center por defecto y muévelo solo cuando una parte específica de la imagen tiene que permanecer en el marco.

Gradientes

Un gradiente es una mezcla suave de un color a otro. CSS lo trata como una especie de imagen, así que va en background-image en lugar de background-color.

.banner {
  background-image: linear-gradient(hsl(219 28% 15%), hsl(219 40% 35%));
}

Eso mezcla el primer color en la parte superior al segundo en la parte inferior. Puedes enumerar más de dos colores y cambiar la dirección:

.banner {
  background-image: linear-gradient(to right, hsl(340 80% 55%), hsl(30 90% 60%));
  /* mezcla de izquierda a derecha en lugar de arriba a abajo */
}

No se necesita archivo de imagen; el navegador dibuja la mezcla por ti.

Un gradiente es una imagen generada, que es por qué linear-gradient() va en background-image y no en background-color. Su primer argumento es la dirección, luego una lista de colores para mezclar. Omite la dirección y se ejecuta de arriba a abajo.

.banner {
  background-image: linear-gradient(
    to right,                    /* dirección: borde izquierdo a borde derecho */
    hsl(340 80% 55%),            /* color inicial */
    hsl(30 90% 60%)              /* color final */
  );
}

radial-gradient() funciona de la misma manera pero mezcla hacia afuera desde un punto central en anillos, en lugar de a lo largo de una línea recta. Es la herramienta para un resplandor suave o un efecto de foco.

.spotlight {
  background-image: radial-gradient(hsl(0 0% 100%), hsl(219 28% 15%));
  /* centro brillante que se desvanece en bordes oscuros */
}

Porque un gradiente es una imagen de fondo, se apila con imágenes reales y con otros gradientes bajo la misma propiedad background-image, separados por comas.

Un gradiente es una imagen generada, así que vive en background-image y obedece las mismas reglas de tamaño y capas que un url(...). linear-gradient() toma una dirección opcional primero (to right, o un ángulo como 135deg), luego una lista de paradas de color que mezcla. Dale a una parada una posición explícita y controlas exactamente dónde aterriza un color, lo que convierte un gradiente en una franja dura cuando dos paradas se encuentran en el mismo punto.

.banner {
  background-image: linear-gradient(
    135deg,                      /* ángulo: 0deg es arriba, 90deg es derecha */
    hsl(340 80% 55%) 0%,
    hsl(30 90% 60%) 100%
  );
}

radial-gradient() mezcla desde un centro hacia afuera y toma una forma y tamaño opcionales antes de sus paradas. Ambos son imágenes en todos los sentidos, así que se superponen bajo un background-image separado por comas, gradientes anteriores pintando sobre los posteriores, que es cómo un gradiente translúcido se convierte en un matiz sobre una foto:

.hero {
  background-image:
    linear-gradient(hsl(219 28% 15% / 0.6), hsl(219 28% 15% / 0.6)),  /* matiz oscuro en la parte superior */
    url("mountains.jpg");                                             /* foto debajo */
  background-size: cover;
}

Porque hsl() expone la luminosidad directamente, un gradiente de dos paradas entre el mismo matiz en dos valores de luminosidad da un desvanecimiento limpio y controlable, que es uno de los lugares más donde elegir hsl sobre hex se amortiza.

JunoGradientes Un gradiente es una mezcla suave entre colores, y CSS lo cuenta como una imagen, así que va en background-image. linear-gradient() mezcla en línea recta, de arriba a abajo por defecto, o añade to right para cambiar la dirección. Sin archivo necesario, el navegador dibuja la mezcla por sí mismo.

JunoGradientes Tanto linear-gradient() como radial-gradient() son imágenes generadas, así que pertenecen a background-image. Linear mezcla a lo largo de una línea que apuntas con una dirección; radial mezcla hacia afuera desde un centro en anillos, bueno para un resplandor. Porque son imágenes, puedes apilar varios bajo un background-image separado por comas.

JunoGradientes Los gradientes son imágenes, así que toman posiciones, se superponen bajo un background-image, y obedecen background-size. Dale a las paradas de color posiciones explícitas para desvanecimientos precisos o franjas duras, y superpón un gradiente translúcido sobre un url(...) para matizar una foto sin un segundo elemento. Un desvanecimiento hsl() de dos paradas entre el mismo matiz en dos valores de luminosidad es el tipo más limpio de controlar.

Color que se adapta y permanece legible

Una palabra clave útil es currentColor. Representa cualquier que sea el color del texto del elemento, así que un borde o icono puede coincidir con el texto automáticamente:

.chip {
  color: hsl(219 28% 15%);
  border: 2px solid currentColor;   /* el borde coincide con el color del texto */
}

Cambia el color del texto más tarde y el borde lo sigue por su cuenta, sin una segunda edición.

Una cosa más a tener en mente: asegúrate de que el texto se destaque de su fondo. Texto oscuro sobre un fondo oscuro es difícil de leer, y gris pálido sobre blanco fatiga los ojos. Apunta a una diferencia clara en el brillo entre los dos.

currentColor es una palabra clave que se resuelve al valor color del elemento, así que bordes, contornos e iconos SVG pueden rastrear el color del texto sin repetirlo. Establece el texto una vez y todo lo vinculado a currentColor se actualiza con él.

.chip {
  color: hsl(219 28% 15%);
  border: 2px solid currentColor;   /* sigue el color, sin valor duplicado */
}

La propiedad a vigilar junto con esto es el contraste: la diferencia de brillo entre el texto y su fondo. El contraste bajo es difícil de leer, y las directrices de accesibilidad establecen una relación mínima para el texto del cuerpo. Este es el lugar donde hsl() gana su lugar de nuevo: porque la luminosidad es su propio eje, puedes mantener un matiz y empujar la luminosidad del texto y fondo lo suficientemente separadas para mantener la legibilidad, sin adivinar tres canales a la vez.

currentColor se resuelve al color calculado del elemento, lo que lo convierte en una forma ligera de vincular bordes, contornos, sombras de caja y fill SVG al color del texto. Hereda como cualquier valor, así que establecer color en un contenedor propaga un color de fuente único hasta cada descendiente que referencia currentColor, que es un patrón limpio para tematizar un componente desde una declaración.

La restricción más difícil es el contraste, la diferencia medida en luminancia relativa entre primer plano y fondo. El estándar de accesibilidad, WCAG (las Directrices de Accesibilidad del Contenido Web), establece una relación mínima de 4.5 a 1 para texto de cuerpo normal y 3 a 1 para texto grande, y el texto por debajo de eso es difícil de leer para muchas personas, no solo aquellas con baja visión. hsl() te ayuda a alcanzarlo: la luminosidad es un eje separado, así que puedes mantener un matiz y saturación y mover solo los dos valores de luminosidad aparte hasta que el par pase, en lugar de empujar seis canales a ciegas. Es una ayuda para razonar, no una garantía, ya que colores con igual luminosidad aún pueden fallar el cálculo verdadero de luminancia, así que verifica la relación final con un verificador.

Dos cosas más valen la pena saber en este nivel. El atajo background establece muchas propiedades de fondo a la vez, y su única regla es que background-size viene después de background-position, separado por una barra: background: url("bg.jpg") center / cover no-repeat. Y CSS ahora tiene funciones de color más allá de hsl(), como oklch(), que alcanzan colores fuera del espacio sRGB en pantallas que soportan un gama más amplio (el rango de colores que puede mostrar una pantalla). No los necesitas todavía, pero saber que las funciones más nuevas existen significa que los reconocerás cuando un sistema de diseño alcance un color más vívido de lo que sRGB puede expresar. Empareja esto con tipografía legible y el texto lleva su significado a cada lector.

JunoColor que se adapta y permanece legiblecurrentColor es una palabra clave que copia el color del texto del elemento, así que un borde puede coincidir con el texto y seguirlo si lo cambias más tarde. Más allá de eso, mantén el texto legible: asegúrate de que es claramente más brillante u oscuro que lo que está detrás. El contraste bajo es la razón más común por la que una página es difícil de leer.

JunoColor que se adapta y permanece legiblecurrentColor vincula bordes, contornos e iconos al color del texto para que lo establezcas en un lugar. Vigila el contraste, la diferencia de brillo entre el texto y el fondo, porque las reglas de accesibilidad establecen un mínimo para el texto del cuerpo. Separar los valores de luminosidad en hsl() es la forma confiable de mantener esa brecha lo suficientemente amplia.

JunoColor que se adapta y permanece legiblecurrentColor hereda, así que un color en un contenedor tematiza cada descendiente que lo referencia. WCAG quiere 4.5 a 1 para texto de cuerpo, y hsl() te permite mover solo la luminosidad para alcanzarlo, aunque la luminosidad igual aún puede fallar la verificación verdadera de luminancia, así que verifica con una herramienta. Recuerda que el atajo background pone tamaño después de posición con una barra, y existen funciones más nuevas como oklch() para gamas más amplios cuando un diseño las necesita.