Colores por valor en CSS3

Colores en CSS
Los colores en el CSS se pueden clasificar a través de distintos métodos:

• Colores Hexadecimales. <—— Para saber como funcionan
• Colores RGB.
• Colores RGBA.
• Colores HSL.
• Colores HSLA.
• Colores Predeterminados por el buscador. ——-> [Click Aquí]

Colores Hexadecimales:

Los colores Hexadecimales son soportados por en todos los buscadores reconocidos.
Para Reconocer un Color Hexadecimal se debe colocar primero un Numeral o Hashtag “#” seguido del numero Hexadecimal que dará origen al color, cuando se utilizan números Hexadecimales para un color los primeros 2 números seran el rojo, los siguientes 2 números seran el verde y los últimos dos números seran el azul teniendo en cuenta que los numeros a llenar van desde el cero (0) hasta la Efe (F). dando como resultado el siguiente formato: #RRGGBB De Sus Siglas en Ingles Red, Green, Blue.
Ejemplo:

• #p1 {background-color: #ff0000;} // Color de Fondo Completamente Rojo
• #p2 {background-color: #00ff00;} // Color de Fondo Completamente Verde
• #p3 {background-color: #0000ff;} // Color De Fondo Completamente Azul

Colores RGB:

Los Colores RGB son soportados por todos los buscadores.
Los colores RGB se denotan como: rgb(red, green, blue) definiendo cada uno como la intensidad que tiene el color (rojo, verde y azul) dentro del color que se va a imprimir y pueden ser valores desde el cero (0) hasta el doscientos cincuenta y cinco (255) o porcentajes desde el cero (0) hasta el cien (100) %.

Ejemplo:

• #p1 {background-color: rgb(255,0,0) // Color de Fondo Completamente Rojo
• #p2 {background-color: rgb(0,255,0) // Color de Fondo Completamente Verde
• #p3 {background-color: rgb(0,0,255) // Color de Fondo Completamente Azul

Colores RGBA:

Los Colores RGBA son soportados por IE9 +, Firefox 3 +, Chrome, Safari y Opera 10 +.
Los colores RGBA se denotan como: rgb(red, green, blue, alpha) Su difirencia en cuanto a los colores anteriormente vistos en el post (rgb) es un dato extra llamado alpha, este dato se encarga de dar una opacidad al color que puede ir desde cero (0.0) hasta uno (1). Siendo el cero la transparencia total y el uno completamente opaco.

Ejemplo:

• #p1 {background-color: rgba(255,0,0,0.5) // Color de Fondo Rojo semi opaco
• #p2 {background-color: rgba(0,255,0,0.4) // Color de Fondo Verde semi transparente
• #p3 {background-color: rgba(0,0,255,0.3) // Color de Fondo Azul semi transparente

Colores HSL:

Los Colores HSL son soportados por IE9 +, Firefox, Chrome, Safari y Opera 10 +.
El Significado de HSL Viene de Hue, Saturation and Lightness, que en español vendría siendo Matiz, Saturación y Luminosidad se denotan: hsl(Hue,Saturation,Lightness). En cuanto a los valores que puede tomar son:

Hue (Matiz) : Es una rueda cromatica, toma valores del cero (0) al trecientos sesenta (360) donde:

• 360 = Rojo.
• 240 = Azul.
• 120 = Verde.

Saturation (Saturación): Es un porcentaje desde cero (0) hasta cien (100) y significa el tono de gris donde:

• 100% = Todo Color.
• 0% = Completamente Saturado.

Lightness (Luminosidad): Es un porcentaje también, donde:

• 100% = Blanco.
• 0% = Negro.

Ejemplo:

• #p1 {background-color: hsl(120, 100%, 50%); // Color de Fondo Verde
• #p2 {background-color: hsl(120, 100%, 75%); // Color de Fondo Verde Iluminado
• #p3 {background-color: hsl(120, 100%, 25%); // Color de Fondo Verde Oscuro
• #p4 {background-color: hsl(120, 60%, 70%); // Color de Verde Pastel

Colores HSLA:

Los Colores HSLA son soportados por IE9 +, Firefox 3 +, Chrome, Safari y Opera 10 +.
Se denotan: hsla(Hue,Saturation,Lightness,Alpha). Su diferencia en cuanto a los colores anteriormente vistos en el post (rgb) es un dato extra llamado Alpha, este dato se encarga de dar una opacidad al color que puede ir desde cero (0.0) hasta uno (1). Siendo el cero la transparencia total y el uno completamente opaco.
Ejemplo:

• #p1 {background-color: hsl(120, 100%, 50%,0.6); // Color de Fondo Verde Semi Opaco
• #p2 {background-color: hsl(120, 100%, 75%,0.5); // Color de Fondo Verde Iluminado Semi Opaco
• #p3 {background-color: hsl(120, 100%, 25%,0.3); // Color de Fondo Verde Oscuro Semi Transparente
• #p4 {background-color: hsl(120, 60%, 70%,0.2); // Color de Verde Pastel Casi Transparente