Color en CSS

Color en CSS

Color en CSS

La inclusión de color en estilos en cascada se maneja de cuatro formas posibles:

  • El nombre del color (en inglés)
  • Código hexadecimal
  • RGB (Red Green Blue)
  • HSL (Hue Saturation Lightness)

Formas de inclusión de color en CSS

El nombre del color

La forma más simple de emplear un color en CSS es simplemente llamándolo por su nombre (en inglés). Aunque es la forma más simple, su paleta se encuentra limitada a 147 colores (CSS3).

En la práctica solo son útiles los valores de los colores blanco y negro, a no ser que se utilice con fines demostrativos, pocas veces utilizaremos en un proyecto el color steelblue, por ejemplo.

Una lista completa de los nombres de los colores se puede encontrar en :
http://www.colors.commutercreative.com/grid/

See the Pen coloresNombre by Miguel Méndez (@codigo-web) on CodePen.0

Código hexadecimal

La forma más común de incluir color en CSS, sobre todo en los textos, es mediante el código hexadecimal, que consiste en un signo de número (#) seguido por seis caracteres, cada uno de ellos con un valor que va del 0 (cero) al 9 y de las letras a a la f, estas letras, representan a los valores que serían del 10 al 15. El 0 (cero) representa ausencia de iluminación, mientras f representa una iluminación completa.

Estos seis caracteres se dividen en pares, el primer par representa al color rojo, el segundo al color verde y el tercero al color azul:

Color en código Hexadecimal

See the Pen colorHexadecimal by Miguel Méndez (@codigo-web) on CodePen.0

Si los caracteres que forman pares (que representan a los colores rojo, verde y azul) se repiten, es posible abreviar la representación del color, omitiendo un caracter de cada par:

Negro:

#000

Rojo:

#f00

Verde:

#0f0

Azul:

#00f

Blanco:

#fff

RGB (Red Green Blue)

RGB (Rojo Verde Azul) es la segunda forma más común de incluir color en CSS. Se basa en una forma bastante conocida: mezclando los colores Rojo, Verde y Azul, mediante valores que van del 0 al 255, siendo 0 ausencia de iluminación y 255 una iluminación completa.

Estos valores se incorporan escribiendo las siglas rgb, seguido por paréntesis que abre y cierra (). Entre el paréntesis van los valores del color Rojo, Verde y Azul separados cada uno de ellos por una coma (,):

rgb

See the Pen colorRGB by Miguel Méndez (@codigo-web) on CodePen.0

rgba(Red Green Blue Alpha)

Como una variante a este esquema con CSS3, podemos incorporar transparencia al color de una forma muy simple: agregando una a al término rgb, quedando rgba y, enmedio de los paréntesis, agregamos su valor como un cuarto elemento, el llamado Alpha o transparencia, cuyo valor va de 0 (cero) -transparente- a 1 -opaco-

See the Pen colorRGBA by Miguel Méndez (@codigo-web) on CodePen.0

hsl (Hue Saturation Lightness)

Con CSS3 llegó una nueva forma de aplicar el color en CSS, mediante la denominada Rueda de Matices (Hue Wheel), Saturación e Iluminación.

Su composición radica en las siglas hsl, seguida de paréntesis que abre y cierra (), entre el paréntesis, separados por coma (,) van los valores de hue -aunque su valor representa grados, se coloca solo el número entero-, Saturación -incluye el símbolo de porcentaje (%)- e Iluminación -incluye el símbolo de porcentaje(%)-.

hsl

HUE

La Rueda de Matices está formada por los colores Rojo, Naranja, Amarillo, Verde, Azul, Indigo y Violeta, formando un círculo, cada uno de ellos tiene un valor en grados, que va de 0 a los 360.

hueGrados

Saturación

La saturación es la cantidad de gris que se agrega a un color, su medición es en porcentaje, siendo 0% completamente gris y 100% la completa saturación del color.

saturación hsl

Iluminación

La iluminación es la cantidad de blanco o negro que se agrega a un color, su medición es en porcentaje, siendo 0% completamente negro, 50% la iluminación normal del color y 100% completamente blanco.

Iluminación hsl

See the Pen colorHSL by Miguel Méndez (@codigo-web) on CodePen.0

hsla (Hue Saturation Lightness Alpha)

De igual forma que en RGB, mediante HSL también podemos agregar transparencia en el color (alpha), agregando la letra a a las siglas hsl y un cuarto valor (Alpha), que indica la transparencia, este valor va de 0 (cero) -transparente- a 1 -opaco-.

See the Pen colorHSLA by Miguel Méndez (@codigo-web) on CodePen.0

Aplicación del color

Color al texto
color

Para indicar el color del texto se emplea la propiedad color al selector del texto, seguido de dos puntos y el color deseado, cerrando con punto y coma(;).

color:white;

Color de fondo
background-color

Para aplicar un color de fondo a un elemento se emplea la propiedad background-color al selector del texto, seguido de dos puntos y el color deseado, cerrando con punto y coma(;).

background-color:black;

Conclusión

Como pudimos observar, contamos con cuatro opciones para declarar el color en css, dos con colores sólidos y dos con opción de manejar transparencia. Podemos utilizarlas a conveniencia, no necesariamente una sola forma para todas las reglas.

See the Pen colorTipos by Miguel Méndez (@codigo-web) on CodePen.0

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz