Podcast de CSS - 006: Color Part One
El color es una parte importante de cualquier sitio web y en las CSS hay muchas opciones de tipos de color, funciones y tratamientos.
¿Cómo decides qué tipo de color usar? ¿Cómo puedes hacer que los colores sean semitransparentes? En esta lección, descubrirás qué opciones tienes para ayudarte a tomar las decisiones correctas para tu proyecto y equipo.
CSS tiene varios tipos de datos, como cadenas y números. El color es uno de estos tipos y usa otros, como números para sus propias definiciones.
Colores numéricos
Es muy probable que tu primera exposición a colores en CSS sea a través de colores numéricos. Podemos trabajar con valores numéricos de color de diferentes formas.
Colores 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 rojo, verde y azul, que son los tres colores primarios.
Los rangos hexadecimales son 0-9 y A-F. Cuando se usa en una secuencia de seis dígitos, se traducen a los rangos numéricos RGB que son de 0 a 255 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, agregas otros dos dígitos a la secuencia de seis dígitos,
haciendo una secuencia de ocho dígitos.
Por ejemplo, para establecer el color negro en código hexadecimal, escribe #000000
.
Para agregar una transparencia del 50%, cámbiala a #00000080
.
Debido a que la escala hexadecimal es 0-9 y A-F, los valores de transparencia probablemente no sean exactamente los que esperas.
Estos son algunos valores comunes de clave agregados al código hexadecimal negro, #000000
:
- Alfa del 0% (que es completamente transparente) es 00:
#00000000
- El valor alfa del 50% es 80:
#00000080
- El alfa del 75% es BF:
#000000BF
Para convertir un hexadecimal de dos dígitos en un decimal, tomar el primer dígito y multiplicarlo por 16 (porque X es la base 16) luego agrega el segundo dígito. Uso de BF como ejemplo para un alfa del 75%:
- 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 alfa es 191-75% de 255
RGB (rojo, verde, azul)
h1 {
color: rgb(183, 21, 64);
}
Los colores RGB se definen con el
función de color rgb()
,
usando números o porcentajes como parámetros.
Los números deben estar entre 0 y 255, y los porcentajes deben estar entre 0% y 100%.
RGB funciona en la escala de 0 a 255
por lo que 255 equivaldría a 100% y 0 a 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 color blanco es exactamente lo opuesto: rgb(255, 255, 255)
o rgb(100%, 100%, 100%)
.
Se configura una versión alfa en rgb()
de dos maneras diferentes.
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% Alfa negro en navegadores modernos, escribe: rgb(0 0 0 / 50%)
o rgb(0 0 0 / 0.5)
.
Para una compatibilidad más amplia, con la función rgba()
,
escribe: rgba(0, 0, 0, 50%)
o rgba(0, 0, 0, 0.5)
.
HSL (matiz, saturación, luminosidad)
h1 {
color: hsl(344, 79%, 40%);
}
HSL significa tono, saturación y luminosidad. El matiz describe el valor en la rueda de colores, de 0 a 360 grados, comenzando con el rojo (que es 0 y 360). Un matiz de 180, o 50%, estaría en el rango azul. Es el origen del color que vemos.
La saturación es la intensidad del tono seleccionado.
Aparecerá un color completamente desaturado (con una saturación de 0%
) en una escala de grises.
Por último, la luminosidad es el parámetro que describe la escala de blanco a negro de la luz agregada.
Una luminosidad de 100%
siempre te dará blanco.
Con la función de color hsl()
,
defines un verdadero negro escribiendo hsl(0 0% 0%)
, o incluso hsl(0deg 0% 0%)
.
Esto se debe a que el parámetro de matiz define el grado en la paleta de colores,
que, si usas el tipo de número, es 0-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.
Alfa se define en hsl()
,
de la misma manera que rgb()
si agregas /
después de los parámetros de matiz, saturación y luminosidad, o usa el
función hsla()
.
El valor alfa se puede definir con un porcentaje o un decimal entre 0 y 1.
Por ejemplo, para establecer un negro alfa del 50%, 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)
.
Palabras clave de color
Hay 148 colores con nombres en CSS. Estos son nombres simples en inglés, como púrpura, tomate y vara de oro. Algunos de los nombres más populares, según el almanaque web, son negro, blanco, rojo, azul y gris. Nuestras favoritas incluyen vara dorada, aliceblue y hotpink.
Además de los colores estándares, 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 de forma contextual de la propiedadcolor
. Si tienes un color de texto dered
y, luego, configurasborder-color
comocurrentColor
, también será rojo. Si el elemento en el que definescurrentColor
no tiene un valor paracolor
definido, En cambio,currentColor
se calculará por la cascada.
Dónde usar el color en las reglas de CSS
Si una propiedad de CSS acepta
<color>
como un valor.
aceptará cualquiera de los métodos anteriores para expresar el color.
Para darle estilo al texto, usa las propiedades color
, text-shadow
y text-decoration-color
que aceptan el color como valor o el color 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 gradientes, como linear-gradient
.
Los gradientes son un tipo de imagen que se puede definir de manera 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 contornos de tus cuadros.
La propiedad box-shadow
también acepta el color como uno de los valores.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre color
¿Cuáles de los siguientes son colores válidos?
#0f08
hotpink
rbga(400 0 1)
hsl(180deg 50% 50%)
rgb(255, 0, 0)
#OOFZ2
Localiza el color hsl no válido.
hsl(0 0% 0% / 20%)
hsl(0, 0, 0)
hsl(5, 0%, 90%)
hsl(2rad 50% 50%)
hsl(.5turn 40% 60%)