colores en CSS

Colores en CSS

Como bien saben CSS ("Cascading Style Sheet" en español "Hoja de Estilos en Cascada"),es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML. En otras palabras la idea al usar CSS es separar la estructura de un documento de su presentación y mejorar la presentación visualmente.  El color juega un papel muy importante en este tema ya que sin color no llama la atención del usuario a la pagina.

Los colores en CSS se pueden indicar de cinco formas diferentes: 

Palabras clave 

Sistema de Colores

RGB numerico

RGB porcentual

RGB hexadecimal 

Aunque el método más habitual es el del RGB hexadecimal, a continuación mostrare todas las alternativas que ofrece CSS.

Palabras clave

CSS define 17 palabras clave para referirse a los colores básicos. Las palabras se corresponden con el nombre en inglés de cada color:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

Sistema de Colores

La imagen anterior ha sido extraída de la sección sobre colores de la especificación oficial de CSS. Aunque es una forma muy sencilla de referirse a los colores básicos, este método prácticamente no se utiliza en las hojas de estilos de los sitios web reales, ya que se trata de una gama de colores muy limitada.

Además de la lista básica, los navegadores modernos soportan muchos otros nombres de colores RGB hexadecimal que continuación les mostrare.

RGB numerico

En el campo del diseño gráfico, se han definido varios modelos para hacer referencia a los colores. Los dos modelos más conocidos son RGB y CMYK. Simplificando su explicación, el modelo RGB consiste en definir un color indicando la cantidad de color rojo, verde y azul que se debe mezclar para obtener ese color. Técnicamente, el modelo RGB es un modelo de tipo "aditivo", ya que los colores se obtienen sumando sus componentes.

Por lo tanto, en el modelo RGB decimal, un color se define indicando sus tres componentes:

R (rojo)

G (verde)

B (azul)

Cada una de las componentes puede tomar un valor entre cero y un valor máximo.

La sintaxis que se utiliza para indicar los colores es "rgb()" y entre paréntesis se indican las tres componentes RGB, en ese mismo orden y separadas por comas.

R=71, G=98, B=176

             Ejemplo:

                          p { color: rgb(71, 98, 176); }

RGB porcentual

Prácticamente es igual al RGB decimal solo con la diferencia que en vez de poner números se ponen porcentajes. para transformar un valor RGB decimal en un valor RGB porcentual, es preciso realizar una regla de tres considerando que "0" es igual a 0% y 255 es igual a 100% .

El mismo color del ejemplo anterior se puede representar de forma porcentual.

             Ejemplo:

                          p { color: rgb(27%, 38%, 69%); }

RGB hexadecimal

Como les decía anterior mente, los navegadores aceptan una gran variedad de colores con un código hexadecimal, aunque es el método más complicado para indicar los colores, se trata del método más utilizado con mucha diferencia. De hecho, prácticamente todos los sitios web reales utilizan exclusivamente este método.

Para entender el modelo RGB hexadecimal, en primer lugar es preciso introducir un concepto matemático llamado "sistema numérico hexadecimal". Cuando realizamos operaciones matemáticas, siempre utilizamos 10 símbolos para representar los números (del 0 al 9 ). Por este motivo, se dice que utilizamos un sistema numérico decimal.Como sólo conocemos 10 símbolos numéricos, el sistema hexadecimal utiliza también seis letras (de la A a la F ) para representar los números. De esta forma, en el sistema hexadecimal, después del 9  no va el 10 , sino la A . La letra B equivale al número 11 , la C al 12 , la D al 13 , la E  al 14  y la F  al número 15.

Los pasos para definir un color RGB Hexadeciaml en CSS son:

             1. Determinar las componentes RGB decimales del color original. 

                          Ejemplo: R = 47 , G = 62 , B = b0              

             2. Transformar el valor decimal a hexadecimal agregandole el signo "#".

                          Ejemplo: #4762b0

y quedaria de la siguiente manera:

             Ejemplo: 

                          p { color: #4762B0; }

Acuérdate que aunque es el método más complicado para definir un color, se trata del método que utilizan la inmensa mayoría de sitios web, por lo que es imprescindible dominarlo. Afortunadamente, todos los programas de diseño gráfico convierten de forma automática los valores RGB decimales a sus valores RGB hexadecimales, por lo que no tienes que hacer ninguna operación matemática:

A continuación les mostrare un vídeo que muestra en practica como insertar el color de CSS en Paginas HTML.

Gracias por su atención.