Color.

Color es la propiedad de CSS que permite cambiar el color de la letra en cualquier elemento y sus valores pueden ser de tipo cadena, hexadecimal, rgb o rgba.

El siguiente es un ejemplo sencillo del uso de la propiedad color en CSS:

<html>

   <head>

       <style type="text/css">

            .miEstilo {

                color:#F00;

            }

        </style>

   </head>

   <body>

        <section>

                <p class="miEstilo">Texto de muestra</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Texto de muestra

Como se puede ver en las zonas resaltadas tenemos un parrafo con la clase miEstilo (<p class="miEstilo">) y un CSS que apunta a este con la propiedad color y el valor en hexadecimal #F00 (rojo).

 

Valores de cadena.

El valor de color en CSS puede ser una cadena (en palabras sencillas un texto) con el nombre del color, pero para que funcione debe existir en las palabras clave. Entre las palabras clave para color estan:

  • Black
  • White
  • Red
  • Yellow
  • y muchas más.

Aun cuando esta técnica es posible no la aconsejo ya que es muy limitada.

RGB.

El valor RGB se divide en rojo (R - Red), verde (G - Green) y azul (B - Blue).

Cada uno de estos valores va desde el 0 al 255 y es el modo de color de las pantallas (Aditivo) donde a mayor valor mas intenso y a menor valor más oscuro.

Por esta razón el negro es R-0, G-0 y B-0 y el blanco es R-255, G-255 y B-255.

La sintaxis correcta del uso de RBG como valor en CSS es la siguiente:

rgb (x, y, z)

Donde x es el valor de 0 a 255 de rojo, y es el valor de 0 a 255 de verde y z es el valor de 0 a 255 de azul.

El siguiente es un ejemplo donde utilizaremos RGB para cambiar el color de un texto:

<html>

   <head>

       <style type="text/css">

            .miEstilo {

                color: rgb(36, 179, 74);

            }

        </style>

   </head>

   <body>

        <section>

                <p class="miEstilo">Texto de muestra</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Texto de muestra

Como se puede ver en las zonas resaltadas tenemos un parrafo con la clase miEstilo (<p class="miEstilo">) y un CSS que apunta a este con la propiedad color y el valor en rgb(36, 179, 74) que da una tonalidad de verde.

RGBA.

El valor RGBA incluye una nueva opción llamada alpha (A) que es la transparencia de un objeto y va de 0 (trasparente) a 1 (sólido).

La sintaxis correcta del uso de RBGA como valor en CSS es la siguiente:

rgba (x, y, z, a)

Donde x es el valor de 0 a 255 de rojo, y es el valor de 0 a 255 de verde, z es el valor de 0 a 255 de azul y a es el valor de 0 a 1 de alpha.

Es importante tener en cuenta que CSS acepta números fraccionarios como 0.1 o 0.3, etc, y que en estos se debe usar el punto y no la coma, ya que esta es para separar los valores.

El ejemplo de transparencia se logra mejor con imágenes de fondo como veremos más adelante.

En el siguiente ejemplo utilizaremos RGBA para cambiar el color de un texto y darle transparencia:

<html>

   <head>

       <style type="text/css">

            .miEstilo {

                color: rgba(36, 179, 74, 0.5);

            }

        </style>

   </head>

   <body>

        <section>

                <p class="miEstilo">Texto de muestra</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Texto de muestra

Como se puede ver en las zonas resaltadas tenemos un parrafo con la clase miEstilo (<p class="miEstilo">) y un CSS que apunta a este con la propiedad color y el valor en rgba(36, 179, 74, 0.5) que da una tonalidad de verde con transparencia al 50%.

Hexadecimal.

El valor hexadecimal esta compuesto por el signo # y una cadena alfanumérica (Letras y números) de 3 o 6 caracteres.

Los valores alfanuméricos van del 0 a la F así: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E y F. Donde 0 es el valor más bajo y F el más alto.

A pesar de lo complejo que parece, este sistema es muy sencillo. Funciona como un simple RGB (colores de pantalla) donde al usar solo 3 caracteres (ejemplo. #123) estamos usando el primer caracter (1) para R, el segundo caracter (2) para G y el tercer caracter (3) para B, o si usamos 6 caracteres (ejemplo. #AABBCC) estamos usando los primeros 2 caracteres para R (AA), el tercero y cuarto para G (BB) y el quinto y sexto para B (CC).

Por lo tanto con tres caracteres podemos tener los siguientes colores:

  • #000 - Negro
  • #F00 - Rojo
  • #0F0 - Verde
  • #00F - Azul
  • #FFF - Blanco

y si lo hacemos con 6 caracteres sería así:

  • #000000 - Negro
  • #FF0000 - Rojo
  • #00FF00 - Verde
  • #0000FF - Azul
  • #FFFFFF - Blanco

El siguiente es un ejemplo utilizaremos Hexadecimal para cambiar el color de un texto:

<html>

   <head>

       <style type="text/css">

            .miEstilo {

                color: #00F;

            }

        </style>

   </head>

   <body>

        <section>

                <p class="miEstilo">Texto de muestra</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Texto de muestra

Como se puede ver en las zonas resaltadas tenemos un parrafo con la clase miEstilo (<p class="miEstilo">) y un CSS que apunta a este con la propiedad color y el valor #00F que da una tonalidad de azul intenso.

Conclusiones:

  • Las mejores opciones de uso de color son hexadecimal, RGB y RGBA.
  • El RGB se debe utilizar cuando se busca que el color sea lo más parecido al RGB de una marca.
  • El RGBA se debe usar siempre que sea necesario contar con transparecias.