Colores CSS
Los colores en CSS son especificados usando nombres de colores predefinicos o valores RGB, HEX, HSL, RGBA, HSLA.
Nombres de Colores
En CSS, un color puede ser especificado utilizando un nombre de color.
Color de Fondo
Se puede establecer el color fondo para las etiquetas HTML en el atributo style como se muestra a continuación:
<h3 style="background-color: DodgerBlue"></h3>
<p style="background-color: Tomato"></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.
Color del Texto
Se puede también cambiar el color del texto de la siguiente manera:
<h3 style="color: tomato;">Hola mundo</h3>
<p atyle="color: dodgerblue;"></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.
Color del Borde
Para cambiar el color del borde de una etiqueta HTML lo podemos realizar de la siguiente manera:
<h3 style="border: 2px solid Tomato">Hola mundo</h3>
<h3 style="border: 2px solid dodgerblue">Hola mundo</h3>
<h3 style="border: 2px solid violet">Hola mundo</h3>
Hola mundo
Hola mundo
Hola mundo
Valores de Colores
En CSS, los colores también pueden ser especificados usando valores HEX, RGB, HSL, RGBA y HSLA.
Para el mismo nombre de color "Tomato" podríamos establecerlo de las siguientes maneras:
El mismo color "Tomato" pero con transparencia del 60% y 50% respectivamente:
Por ejemplo:
<h3 style="background-color: #ff6347">HEX</h3> <h3 style="background-color: rgb(255,99,71,0.9)">RGB</h3> <h3 style="background-color: hsl(9,100%,64%,0.5)">HSL</h3>
HEX
RGB
HSL
Por Valores RGB
En CSS, un color puede ser especificado con valores RGB usando esta formula:
rgb ( red , green , blue )
Cada parámetro (red, green, blue) define la intensidad de cada color entre 0 y 255. Por ejemplo: rgb(255,0,0) es mostrado como rojo, porque el parámetro "red" es definido en su totalidad y los demás son definidos en 0. Para mostrar el color negro, todos los parámetros deben estar definidos en 0 así: rgb(0,0,0). Y para mostrar el color blanco todos los parámetros deben estar definidos en 255 así: rgb(255,255,255).
Para escalas de grises puede lograrse igualando las tres intensidades de color, es decir, los tres parámetros igualados.
La propiedad Opacity
La propiedad opacity especifica la opacidad para un elemento completo y aplica tanto para el color de fondo y como para el texto con un efecto de opacidad/transparencia.
El valor de la propiedad opacity debe ser un número entre 0.0 (que es la transparencia al máxico) a 1.0 (que es la opacidad al máxico).
<div style="background: rgb(255, 0, 0); opacity:0.2;"></div>
<div style="background: rgb(255, 0, 0); opacity:0.4;"></div>
<div style="background: rgb(255, 0, 0); opacity:0.6;"></div>
<div style="background: rgb(255, 0, 0); opacity:0.8;"></div>
<div style="background: rgb(255, 0, 0); opacity:1.0;"></div>
Muestra:
Por valores Hexadecimales
En CSS, un color también puede ser especificado con valores hexadecimales de la forma siguiente:
#rrggbb
Donde "rr" (red), gg (green), y bb (blue) son valores hexadecimales entre el "00" y "ff" (de igual manera que de 0-255). Por ejemplo: #ff0000 muestra el color rojo, porque el valor hexadecimal para el rojo esta definido en su totalidad con FF y los otros dos valores para verde y azul estan definidos en el minimo valor, es decir 00.
Ejemplos:
Las escalas en grises se pueden definir igualoando los valores hexadecimales para los tres colores:
Por valores HSL
En CSS, también un color puede ser especificado usando matiz, saturación y luminosidad (Hue, Saturation, Lightness) de la siguiente forma:
hsl(matiz, saturación, luminosidad)
- Matiz es un grado de una rueda de 0 a 360. En donde 0 es rojo, 120 es verde y 240 es azul.
- Saturación es valor de porcentaje. En donde 0% significa una sombra de grises y 100% significa el color completo.
- Luminosidad significa también un valor de porcentaje. En donde 0% es negro, 50% no es ni claro ni obscuro y 100 es blanco.
Ejemplos:
Saturación
Saturación se puede describir como la intensidad de un color.
- 100% es color puro, sin escala de grises.
- 50% es 50% de escala de gris, pero aún puede verse el color.
- 0% es completamente gris, y no se puede ver el color.
Ejemplos:
Luminosidad
La luminosidad de un color puede describirse como la cantidad de luz que se desea darle al color, donde:
- 0% significa sin luz, es decir, negro.
- 50% significa 50% de luz, es decir, ni claro ni obscuro.
- 100% significa completo de luz, es decir, blanco.
Ejemplos:
Las escalas de grises se obtinenen definiendo la matiz y la saturación a 0, y definiendo la luminosidad de 0% a 100% para obtener las escalas de más obscuro a más claro.
Por valores RGBA
Valores de color RGBA son una extensión de Valores de color RGB con una canal alfa; el cual especifica la opacidad de un color. Y es especificado de la siguiente forma:
rgb ( rojo , verde , azul , alfa )
El parámetro Alfa debe ser un número de entre 0.0 (completamente transparente) a 1.0 (sin transparencia).
Por Valores HSLA
Valores de color HSLA son una extensión de Valores de color HSL con canal alfa; el cual especifica la opacidad de un color. Y es especificado de la siguiente forma:
hsla ( matiz , saturación , luminusidad, alfa )
El Parámetro Alfa debe ser un númro de entre 0.0 (completamente transparente) a 1.0 (sin transparencia).