Colores en CSS

Una opción entre varias es llamar a los colores por nombres; veamos ejemplos:

<h1 style="background-color:Gray;">Gray = Gris</h1>
<h1 style="background-color:LightGray;">LightGray = Gris claro</h1>
<h1 style="background-color:Fuchsia ;">Fuchsia  = Fucsia</h1>
<h1 style="background-color:Violet;">Violet = Violeta</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue =El azul de los Dodgers</h1>
<h1 style="background-color:SlateBlue;">SlateBlue = Pizarra azul</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen = Verde del medio del Mar</h1>
<h1 style="background-color:Gold;">Gold = Oro</h1>
<h1 style="background-color:Orange;">Orange = Naranja</h1>
<h1 style="background-color:Tomato;">Tomato = Tomate</h1>

Gray = Gris

LightGray = Gris claro

Fuchsia = Fucsia

Violet = Violeta

DodgerBlue =El azul de los Dodgers

SlateBlue = Pizarra azul

MediumSeaGreen = Verde del medio del Mar

Gold = Oro

Orange = Naranja

Tomato = Tomate


Fuera de lo que son los nombres, dentro de un documento html el color puede especificarse de estas maneras:

1. Valores RGB.
2. Valores HEX.
3. Valores HSL.
4. Valores RGBA.
5. Valores HSLA.


Vertámonos en detalles:

1. RGB que significa Rojo, verde y Azul; donde cada valor de 0 a 255, es decir:
Primer valor: Rojo de 0 a 255.
Segundo valor: Verde de 0 a 255.
Tercer valor: Azul de 0 a 255.

RGB (0, 0, 0) es blanco
RGB (255, 255, 255) es Negro.

Ejemplo: rgb (99 , 255 , 20)


2. HEX es hexadecimal y tiene la forma #rrvvaa correspondiente a rojo, verde y azul; o en inglés #rrggbb.

Rojo puro #ff0000
Verde puro #00ff00
Azul puro #0000ff

para cada uno de los dos dígitos se puede establecer los siguientes valores: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
Son 16 posibles valores por dígito y que combinados dan un total de 16 x 16 = 256 elementos posibles, siendo el último el ff.


3. HSL (Hue, Saturation, Lightness); traducido como matriz o tonalidad, saturación, e intensidad o luminosidad para el último caso.
H: (Matriz) de 0 a 359. [0 es rojo, 120 es verde y 240 es azul].
S: (Saturación) de 0 a 100%. [0 es gris y 100% es el color puro].
L: (Luminosidad) de 0 a 100%.[0 es negro y 100% es blanco].

Ejemplo: hsl (120, 100%, 50%)


4. RGBA: es el tradicional RGB con una opción más de transparencia.
rgba (rojo, verde, azul, alfa)
Siendo alfa un valor del 0.0 al 1.0.
Con 0.0 totalmente transparente y 1.0 sin transparencia.


5. HSLA: es el tradicional HSL con una opción más de transparencia.
La A corresponde exactamente con el caso anterior, es decir, es el alfa o transparencia del elemento.

Ejemplo:
hsla(120, 90%, 60%, 0.6)


Ejemplo para el body:
<h1 style="background-color:hsla(25, 90%, 55%, 0.4);">Esto es color hsla(25, 90%, 55%, 0.4)</h1>

Esto es color hsla(25, 90%, 55%, 0.4)


ok!