Colores en CSS

Vamos a prender como usar los colores en CSS para darle vida a nuestras páginas web.

Si necesitas ayuda con CSS antes de comenzar puedes hacerlo viendo mi artículo ¿Qué es CSS?

Colores en CSS

CSS usa valores de color para especificar los colores de fondo, márgenes o fuentes.

Los colores se especifican utilizando nombres de colores predefinidos o valores RGB, HEX, HSL, RGBA, HSLA

Aquí te dejo algunos ejemplo de como colocar los valores de los colores:

Con nombres de colores predefinidos:

Aqua

Blue

BlueViolet

Brown

Chartreuse

Crimson

DarkOrange

Gold

<h1 style="background-color: aqua ;">Aqua </h1>
<h1 style="background-color: blue ;">Blue </h1>
<h1 style="background-color: blueViolet ;">BlueViolet </h1>
<h1 style="background-color: brown ;">Brown </h1>
<h1 style="background-color: chartreuse ;">Chartreuse </h1>
<h1 style="background-color: crimson ;">Crimson </h1>
<h1 style="background-color: darkOrange ;">DarkOrange </h1>
<h1 style="background-color: gold ;">Gold </h1>

También puedes cambiar los colores de los textos:

<h3 style="color:green ;">Hola Mundo!!!</h3>

<p style="color:indigo;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:LightSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

Hola Mundo!!!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Y de los bordes:

Hola Mundo!!!

Hola Mundo!!!

Hola Mundo!!!

<h1 style="border:2px solid lime;">Hola Mundo!!!</h1>
<h1 style="border:2px solid mediumblue;">Hola Mundo!!!</h1>
<h1 style="border:2px solid mediumvioletred;">Hola Mundo!!!</h1>

Ahora veremos que estos ejemplos funcionan igual de bien con los otros valores de colores

RGB

En HTML, un color se puede especificar como un valor RGB, usando esta fórmula:

rgb (rojo, verde, azul)

Cada parámetro (rojo, verde y azul) define la intensidad del color entre 0 y 255.

Por ejemplo, rgb (255, 0, 0) se muestra en rojo, porque el rojo se establece en su valor más alto (255) y los demás se establecen en 0.

Para mostrar el color negro, todos los parámetros de color se deben establecer en 0, como este: rgb (0, 0, 0).

Para mostrar el color blanco, todos los parámetros de color se deben establecer en 255, como este: rgb (255, 255, 255).

Veamos un ejemplo con el color RoyalBlue

RoyalBlue

RoyalBlue

<h1 style="background-color: royalblue ;">RoyalBlue</h1>
<h1 style="background-color: rgb(65, 105, 225) ;">RoyalBlue </h1>

Funciona exactamente igual.

HEX

En HTML, un color se puede especificar utilizando un valor hexadecimal en la forma:

#rrggbb

Donde rr (rojo), gg (verde) y bb (azul) son valores hexadecimales entre 00 y ff (igual que el decimal 0-255).

Por ejemplo, # ff0000 se muestra en rojo, porque el rojo se establece en su valor más alto (ff) y los demás se establecen en el valor más bajo (00).

#9acd32

#ffff00

#f5deb3

#ee82ee

#40e0d0

#ff6347

<h1 style="background-color:#9acd32;">#9acd32</h1>
<h1 style="background-color:#ffff00;">#ffff00</h1>
<h1 style="background-color:#f5deb3;">#f5deb3</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#40e0d0;">#40e0d0</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>

HSL

En HTML, un color se puede especificar usando tono, saturación y luminosidad (HSL) en la forma:

hsl (tono, saturación, luminosidad)

El tono es un grado en la rueda de color de 0 a 360. 0 es rojo, 120 es verde y 240 es azul.

La saturación es un valor porcentual, 0% significa un tono de gris y 100% es el color completo.

La claridad es también un porcentaje, 0% es negro, 50% no es claro u oscuro, el 100% es blanco

hsl(210, 100%, 60%)

hsl(150, 100%, 80%)

hsl(340, 100%, 70%)

hsl(60, 100%, 70%)

hsl(120, 60%, 50%)

hsl(0, 100%, 50%)

<h1 style="background-color:hsl(210, 100%, 60%);">hsl(210, 100%, 60%)</h1>
<h1 style="background-color:hsl(150, 100%, 80%);">hsl(150, 100%, 80%)</h1>
<h1 style="background-color:hsl(340, 100%, 70%);">hsl(340, 100%, 70%)</h1>
<h1 style="background-color:hsl(60, 100%, 70%);">hsl(60, 100%, 70%)</h1>
<h1 style="background-color:hsl(120, 60%, 50%);">hsl(120, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>

Tengamos en cuenta que si manipulamos solo la saturación estaremos cambiando la intensidad del color.
100% de saturación será puro color. 50% de saturación 50% de color y 50% gris. 0% de saturación será puro gris.

hsl(0, 100%, 50%)

hsl(0, 750%, 50%)

hsl(0, 500%, 50%)

hsl(0, 250%, 50%)

hsl(0, 0%, 50%)

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 75%, 50%);">hsl(0, 750%, 50%)</h1>
<h1 style="background-color:hsl(0, 50%, 50%);">hsl(0, 500%, 50%)</h1>
<h1 style="background-color:hsl(0, 25%, 50%);">hsl(0, 250%, 50%)</h1>
<h1 style="background-color:hsl(0, 00%, 50%);">hsl(0, 0%, 50%)</h1>

RGBA

Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad para un color.

Un valor de color RGBA se especifica con:

rgba (rojo, verde, azul, alfa)

El parámetro alfa es un número entre 0.0 (totalmente transparente) y 1.0 (no transparente en absoluto):

rgba(0, 51, 153, 0)

rgba(0, 51, 153, 0.2)

rgba(0, 51, 153, 0.4)

rgba(0, 51, 153, 0.6)

rgba(0, 51, 153, 0.8)

rgba(0, 51, 153, 1)

<h1 style="background-color:rgba(0, 51, 153, 0);">rgba(0, 51, 153, 0)</h1>
<h1 style="background-color:rgba(0, 51, 153, 0.2);">rgba(0, 51, 153, 0.2)</h1>
<h1 style="background-color:rgba(0, 51, 153, 0.4);">rgba(0, 51, 153, 0.4)</h1>
<h1 style="background-color:rgba(0, 51, 153, 0.6);">rgba(0, 51, 153, 0.6)</h1>
<h1 style="background-color:rgba(0, 51, 153, 0.8);">rgba(0, 51, 153, 0.8)</h1>
<h1 style="background-color:rgba(0, 51, 153, 1);">rgba(0, 51, 153, 1)</h1>

HSLA

Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa, que especifica la opacidad para un color.

Un valor de color HSLA se especifica con:

hsla (matiz, saturación, claridad, alfa)

El parámetro alfa es un número entre 0.0 (totalmente transparente) y 1.0 (no transparente en absoluto):

hsla(0, 100%, 50%, 0)

hsla(0, 100%, 50%, 0.2)

hsla(0, 100%, 50%, 0.4)

hsla(0, 100%, 50%, 0.6)

hsla(0, 100%, 50%, 0.8)

hsla(0, 100%, 50%, 1)

<h1 style="background-color:hsla(0, 100%, 50%, 0);">hsla(0, 100%, 50%, 0)</h1>
<h1 style="background-color:hsla(0, 100%, 50%, 0.2);">hsla(0, 100%, 50%, 0.2)</h1>
<h1 style="background-color:hsla(0, 100%, 50%, 0.4);">hsla(0, 100%, 50%, 0.4)</h1>
<h1 style="background-color:hsla(0, 100%, 50%, 0.6);">hsla(0, 100%, 50%, 0.6)</h1>
<h1 style="background-color:hsla(0, 100%, 50%, 0.8);">hsla(0, 100%, 50%, 0.8)</h1>
<h1 style="background-color:hsla(0, 100%, 50%, 1);">hsla(0, 100%, 50%, 1)</h1>

Puedes revisar una lista con los nombres y los códigos de los colores dándole clic aquí.

Te gustó? Espero tus comentarios aquí abajo.

Deja un comentario