The CSS Podcast - 006: Color Part One
El color es una parte importante de cualquier sitio web y, en CSS, hay muchas opciones para especificar y manipular colores.
¿Cómo decides qué tipo de color usar? ¿Cómo haces que tus colores sean semitransparentes? En esta lección, aprenderás qué opciones tienes para tomar las decisiones correctas para tu proyecto y equipo.
CSS tiene varios tipos de datos diferentes, como cadenas y números. El color es uno de estos tipos y usa otros, como los números, para sus propias definiciones.
Cómo elegir los colores
Colores con nombre
La forma más sencilla de elegir un color es elegir uno de los 148 colores con nombre en CSS.
Estos son nombres en inglés simple, como purple
, tomato
y goldenrod
. Algunos de los nombres más populares, según el Web Almanac, son black
, white
, red
, blue
y gray
. Entre nuestros favoritos, se incluyen goldenrod
, aliceblue
y hotpink
.
Colores numéricos
Si bien los colores con nombre pueden ser convenientes, es probable que debas usar colores específicos que no están disponibles en ese conjunto. Puedes especificar colores con valores numéricos de diferentes formas.
Códigos hexadecimales
h1 {
color: #b71540;
}
La notación hexadecimal (a menudo abreviada como hexadecimal) es una sintaxis abreviada para RGB, que asigna un valor numérico a los colores rojo, verde y azul, que son los tres colores primarios.
Los rangos hexadecimales son 0-9 y A-F. Cuando se usan en una secuencia de seis dígitos, se traducen a los rangos numéricos RGB que van del 0 al 255 y que corresponden a los canales de color rojo, verde y azul, respectivamente.
También puedes definir un valor alfa con cualquier color numérico.
Un valor alfa es un porcentaje de transparencia.
En el código hexadecimal, se agregan otros dos dígitos a la secuencia de seis dígitos, lo que genera una secuencia de ocho dígitos.
Por ejemplo, para establecer el negro en código hexadecimal, escribe #000000
.
Para agregar una transparencia del 50%, cámbiala a #00000080
.
Debido a que la escala hexadecimal es de 0 a 9 y de A a F, es probable que los valores de transparencia no sean exactamente lo que esperas.
Estos son algunos valores clave y comunes que se agregaron al código hexadecimal negro, #000000
:
- El 0% de alfa, que es completamente transparente, es 00:
#00000000
- El 50% de alfa es 80:
#00000080
- El 75% de alfa es BF:
#000000BF
Para convertir un hexadecimal de dos dígitos a decimal, toma el primer dígito y multiplícalo por 16 (porque el hexadecimal es de base 16) y, luego, suma el segundo dígito. Usando BF como ejemplo para un 75% de alfa:
- B es igual a 11, que, cuando se multiplica por 16, es igual a 176.
- F es igual a 15.
- 176 + 15 = 191
- El valor de alfa es 191 (el 75% de 255).
RGB (rojo, verde y azul)
h1 {
color: rgb(183 21 64);
}
Los colores RGB se definen con la función de color rgb()
, que usa números o porcentajes como parámetros.
Los números deben estar dentro del rango de 0 a 255 y los porcentajes deben estar entre 0% y 100%.
RGB funciona en la escala de 0 a 255, por lo que 255 equivale al 100% y 0 al 0%.
Para establecer el negro en RGB, defínelo como rgb(0 0 0)
, que es cero rojo, cero verde y cero azul.
El negro también se puede definir como rgb(0% 0% 0%)
.
El blanco es exactamente lo opuesto: rgb(255 255 255)
o rgb(100% 100% 100%)
.
Se establece un alfa en rgb()
de una de las siguientes dos maneras.
Agrega un /
después de los parámetros rojo, verde y azul, o usa la función rgba()
.
El valor alfa se puede definir con un porcentaje o un decimal entre 0 y 1.
Por ejemplo, para establecer un 50% de alfa negro en navegadores modernos, escribe: rgb(0 0 0 / 50%)
o rgb(0 0 0 / 0.5)
.
HSL (matiz, saturación y luminosidad)
h1 {
color: hsl(344 79% 40%);
}
HSL significa tono, saturación y luminosidad. El tono describe el valor en la rueda de colores, de 0 a 360 grados, comenzando con el rojo (0 y 360). Un tono de 180 o 50% estaría en el rango azul. Es el origen del color que vemos.
La saturación indica qué tan intenso es el tono seleccionado. Un color completamente desaturado (con una saturación de 0%
) aparecerá en escala de grises.
Por último, la luminosidad es el parámetro que describe la escala del blanco al negro de la luz agregada.
Una luminosidad de 100%
siempre te dará un color blanco.
Con la función de color hsl()
, puedes escribir hsl(0 0% 0%)
o incluso hsl(0deg 0% 0%)
para definir un negro verdadero.
Esto se debe a que el parámetro de tono define el grado en la rueda de colores, que, si usas el tipo de número, es de 0 a 360.
También puedes usar el tipo de ángulo, que es (0deg
) o (0turn)
.
Tanto la saturación como la luminosidad se definen con porcentajes.
El alfa se define en hsl()
, de la misma manera que rgb()
, agregando un /
después de los parámetros de tono, saturación y luminosidad o con la función hsla()
.
El valor alfa se puede definir con un porcentaje o un decimal entre 0 y 1.
Por ejemplo, para establecer un 50% de negro alfa, usa: hsl(0 0% 0% / 50%)
o hsl(0 0% 0% / 0.5)
.
Con la función hsla()
, escribe: hsla(0, 0%, 0%, 50%)
o hsla(0, 0%, 0%, 0.5)
.
Colores de alta definición
RGB y HSL definen los colores en la gama sRGB. Los monitores más nuevos admiten muchos más colores que los que pueden describir estos formatos y fuera de la gama sRGB. Puedes elegir estos colores con una variedad de funciones de CSS.
.La función color()
h1 {
color: color(srgb 0.9 0.2 0.4);
}
La función color()
de CSS te permite elegir un color en un espacio de color específico.
El primer argumento es el espacio de color que se usará, que define las opciones para los siguientes canales. Al igual que con rgb()
, puedes establecer el canal alfa configurando un número entre 0
y 1
, o un porcentaje, después de un /
.
Por ejemplo, el color RGB rojo oscuro en el fragmento de código anterior, que se define como rgb(183 21 64)
, se puede definir con porcentajes como rgb(72% 8% 25%)
. Puedes usar la función color()
con la palabra clave srgb
para especificar el mismo color con color(srgb .72 .08 .25)
.
srgb
establece el espacio de color y nos indica que los siguientes tres argumentos son rojo, verde y azul. Los valores van de 0
a 1
en lugar de 0
a 255
.
Al igual que con rgb()
, podemos establecer la alfa con un /
y un porcentaje, o un decimal entre 0
y 1
.
Hay muchos espacios de color que puedes usar con la función color()
, cada uno con diferentes fortalezas y casos de uso.
P3 de pantalla
h1 {
color: color(display-p3 0.9 0.2 0.4);
}
La gama Display P3 contiene un 50% más de colores que sRGB. Puedes especificar todos los colores de la gama Display P3 con el espacio de color Display P3 mediante la función color()
.
Para establecer el negro en Display P3, defínelo como color(display-p3 0 0 0)
. Después de especificar el espacio de color display-p3
para la función color()
, tienes tres canales: rojo, verde y azul, similares a color(srgb)
. Sin embargo, como los valores de los canales representan coordenadas en un espacio de color más amplio, los mismos valores de los canales tendrán significados diferentes.
color(srgb 1 .5 0)
es un color naranja que equivale a color(display-p3 0.93596 0.52724 0.1983)
. Podemos hacer que el naranja sea aún más vibrante extendiéndolo fuera del espacio sRGB, a color(display-p3 1 .5 0)
.
Oklab
Oklab se define con la función oklab()
, con canales de luminosidad, a
y b
. Es útil para crear gradientes suaves y ajustar la saturación de un color, a la vez que se mantiene el tono y la luminosidad.
h1 {
color: oklab(75% 0.1 0.1)
}
El canal de luminosidad va de 0
a 1
o de 0%
a 100%
. Los colores con una luminosidad de 0
siempre serán negros.
El canal a
va de -0.4
a 0.4
o de 0%
a 100%
. Los valores más bajos son más verdes y los más altos son más rojos.
El canal b
va de -0.4
a 0.4
o de 0%
a 100%
. Los valores más bajos son más azules y los más altos son más amarillos.
OkLCh
OkLCh es la forma polar o cilíndrica de OKLab y se define con canales de luminosidad, cromaticidad y tono. Es útil para ajustar los colores de manera uniforme a nivel perceptivo. Esto significa que los cambios en el tono no afectarán la apariencia de un color, ya sea claro o saturado.
h1 {
color: oklch(80% 0.1 200)
}
Ya trabajaste con la luminosidad y el tono en HSL, y la cromaticidad es similar a la saturación. Puedes establecer el negro con oklch(0 0 0)
y el blanco con oklch(1 0 0)
.
El canal de luminosidad va de 0
a 1
o de 0%
a 100%
. Los colores con una luminosidad de 0
siempre serán negros.
El canal de cromatismo establece la intensidad de un color: 0 o 0% se desaturará, y los valores más altos tendrán más color. Un valor de 100%
es igual a .4
, pero es posible salir rápidamente del gamut con valores cercanos a .4
.
El tono se especifica en grados, al igual que hsl()
.
OkLCh no está limitado por una gama como Display P3, por lo que debes asegurarte de crear colores que se puedan mostrar. oklch(80% 50% 200)
es un azul brillante que, numéricamente, parece un color razonable, pero está fuera de la gama de Display P3.
Otros espacios
Existen muchas formas de especificar colores en CSS, y no necesitas aprenderlos todos. Los formatos rgb()
y hexadecimal se usan comúnmente en herramientas de diseño y en código existente, y es útil conocerlos. También es útil familiarizarse con un formato que se pueda manipular de manera predecible. Puedes cambiar los valores de hsl
o oklch
directamente y tener una idea de cuál será el color resultante.
Obtén más información en Accede a más colores y espacios nuevos.
Colores del sistema
Además de los colores con nombre, como púrpura o verde azulado, también hay palabras clave especiales disponibles:
transparent
es un color completamente transparente. También es el valor inicial debackground-color
.currentColor
es el valor dinámico calculado contextual de la propiedadcolor
. Si tienes un color de texto dered
y, luego, configurasborder-color
comocurrentColor
, también seráred
. Si el elemento en el que definescurrentColor
no tiene un valor de color definido, la cascada calcularácurrentColor
.
Cómo manipular colores
Si bien es posible que tengas una paleta de colores para usar en tu sitio, es posible que necesites variantes de esos colores para los estados de desplazamiento del mouse, los bordes y otros elementos de la IU. Podrías especificar cada color, pero CSS también proporciona formas de transformar los colores para crear estas variantes.
color-mix()
Para usar el resultado de mezclar dos colores, puedes usar el método color-mix()
.
Esto es útil para mezclar un color con blanco o negro y crear una variante más clara o más oscura.
Para usar color-mix()
, deberás definir los dos colores, cómo deseas que se mezclen (el método de interpolación) y cuánto de cada color deseas.
En el caso de los espacios de color que tienen un tono, también puedes decidir en qué dirección quieres girar la rueda de color. La opción predeterminada es usar la ruta de acceso shorter
, pero también puedes elegir longer
, increasing
y decreasing
.
Juntos, el espacio de color y la dirección son el método de interpolación.
También puedes proporcionar la cantidad de cada color que se combinará.
Sintaxis de color relativa
También puedes trabajar más directamente con un color usando la sintaxis de color relativa, que te permite tomar cualquier color y realizar cálculos en él para crear uno nuevo.
h1 {
color: oklch(from red l c h);
}
Si usas la función oklch()
, trabajarás con los canales de luminosidad, croma y tono. Después de la palabra clave from
, puedes especificar cualquier color en cualquier sintaxis. Luego, se te muestra cada valor de canal para usarlo como una letra. Esto se resolverá en un color rojo, sin ningún ajuste.
Para realizar ajustes, puedes usar la función calc()
para cambiar los valores del canal o reemplazarlo por completo. Aquí, usamos el mismo color red
, pero lo definimos con oklch(62% 0.25 29)
.
h1 {
color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}
El canal de luminosidad es 62% / 2
o 31%
. El canal de cromatismo no cambia, por lo que es 0.25
. El canal de tono es 180
. Esto crea el nuevo color oklch(31% 0.25 180)
, un color verde oscuro.
A menudo, usarás una propiedad personalizada como el color de entrada. Esto te permite crear variaciones de color de forma dinámica.
Puedes hacerlo con cualquier función de color, y es útil hacerlo con funciones de color que tengan canales que describan los cambios que deseas realizar. Por ejemplo, si deseas ajustar la luminosidad de un color, elige oklch
o hsl
, ya que puedes cambiar directamente el canal de luminosidad.
h1 {
color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}
Con la sintaxis de colores relativa, o RCS, puedes crear una paleta de colores para usar en tu sitio.
Colores fuera de la gama
Tu contenido se mostrará en diferentes pantallas que pueden admitir o no colores de gama amplia. Si especificas un color que no es compatible con una pantalla, se realizará un proceso llamado asignación de gama para encontrar un color similar que se pueda mostrar en la pantalla. Si deseas definir colores específicos en esos casos, puedes usar la consulta de medios color-gamut
.
Dónde usar el color en las reglas de CSS
Si una propiedad CSS acepta el tipo de datos <color>
como valor, aceptará cualquiera de los métodos descritos anteriormente para expresar el color.
Para aplicar diseño al texto, usa las propiedades color
, text-shadow
y text-decoration-color
, que aceptan el color como valor o como parte del valor.
Para los fondos, puedes establecer un color como el valor de background
o background-color
.
Los colores también se pueden usar en degradados, como linear-gradient
.
Los gradientes son un tipo de imagen que se puede definir de forma programática en CSS.
Los gradientes aceptan dos o más colores en cualquier combinación de formato de color, como hexadecimal, RGB o HSL.
Por último, border-color
y outline-color
establecen el color de los bordes y los contornos de tus cuadros.
La propiedad box-shadow
también acepta el color como uno de los valores.
Verifica tu comprensión
Pon a prueba tus conocimientos sobre el color
¿Cuáles de las siguientes opciones son colores válidos?
rbga(400 0 1)
#0f08
#OOFZ2
rgb(255, 0, 0)
hsl(180deg 50% 50%)
hotpink
Identifica el color hsl no válido.
hsl(5, 0%, 90%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)