Colores en CSS

Temario colores css

1. Colores en CSS
2. Colores por nombre
3. Sistema de colores Hexadecimall
4. Sistema de colores RGB (Red, Green, Blue)
5. Sistema de colores HSL (Tono, saturacion, Luminocidad)
6. Transparent & currentColor
7. Propiedad opacity

Colores en CSS

Hay 4 formas principales de trabajar con colores en css:

1. Por el nombre del color en ingles, por ejemplo: red, blue, whithe, orange, black, etc.
2. Sistema Hexadecimal.
3. RGB (Red, Green, Blue).
4. HSL.

Enlace al sitio web htmlcolorcodes.com que es una guía de los diferentes sistemas de colores que se pueden manejar en css

Colores por nombre

Si escribimos en la caja de busqueda del navegador Google Chrome las palabras rgb to hex nos aparece un convertidor de colores.

Ejemplos:

Sistema de colores Hexadecimal

Se llama hexadecimal porque esta basado en el sistema de numeración hexadecimal, es decir que tiene 16 digitos así: 0123456789ABCDEF.

En este sistema hexadecimal hay dos subsistemas de colores:

• RGB (Red, Green, Blue): Que se utiliza para medios digitales como las pantallas.
• CMYK (Cyan, Magenta, Yellow, Key):Que es para los medios impresos.

Los colores en hexadecimal son de seis digitos, y empiezan con el símbolo de númeral, por ejemplo: #ff6600

• Los primeros dos digitos representan el color rojo (red): ff del RGB.
• Los siguientes dos representan el canal del color verde (green): 66 del RGB
• los dos números finales van a representar el canal azul (blue): 00 del RGB.

Desde hace algunos años ya se puede aplicar opacidad en el sistema de colores RGB, la opacidad va de 0% (que es totalmente transparente) hasta 100% (que es totalmente saturado el color) y esto se logra poniendo otros dos digitos al final del número del color hexadecimal (quedando con untotal de ocho digitos), así: #00000050, esto seria un negro con opacidad del 50%.

NOTA: Tambien se puede simplicar de ocho números (#00000050) a solo cuatro números (#0005) y da lo mismo, 50% de opacidad.

Ejemplos:

Sistema de colores RGB (Red, Green, Blue)

Tiene tres canales (Red, green, Blue) o (255, 255, 255) y el maximo número que acepta cada canal va de 0 a 255.

Para utilizar el sistema de colores RGB en css tenemos que utilizar una función llamada rgb(255, 255, 255).

El sistema de colores RGB acepta 8 bits por canal, y un bit puede tener dos posibles valores 0 o 1 porque el lenguaje de las computadoras es el sistema binario dode solo hay ceros y unos.

Por cada canal de color tenemos valores que van del 0 al 255.

Para aplicar la opacidad utilizamos la funcion rgba() que egrega la "a" que es el canal alfa que va de 0 a 100, ejemplo: rgba(0, 0, 0, .33), el .33 seria opacidad al 33%.

Ejemplos:

Sistema de colores HSL (Tono, saturacion, Luminocidad)

El sistema de color HSL son la siglas de Hue (Tono) sauration (saturación que es la intensidad del color) y lightness (luminosidad del color).

El primer valor es Hue el tono (Circulo cromático) y representa un angulo de 0° a 360° grados, donde:

• 0° grados seria el color red.
• 60° grados seria el color yellow.
• 102° grados seria el color green.
• 180° grados seria el colo cyan.
• 240° grados seria el color blue.
• 300° grados seria el color magenta.

Para utilizar el sistema de colores HSL en css tenemos que utilizar una función llamada hsl(Tono, saturacion, Luminocidad), ejemplo:
background-color: hsl(120, 100%, 50%);

Para aplicar la opacidad utilizamos la funcion hsla() que egrega la "a" que es el canal alfa que va de 0 a 100, ejemplo: hsla(210, 75%, 65%, .33), el .33 seria opacidad al 33%.

Ejemplos:

Transparent & currentColor

Para quitarle el color a un elemento utilizamos el valor de atributo transparent que se puede aplicar a cualquiera de los sistemas de colores vistos anteriormente.

El valor currentColor hereda el valor por defeco (es decir el que le da el navegador) o asignado por el usuario en la propiedad color (que es la que le da color al texto) del ancestro que tenga definida esta propiedad, busca del ancestro mas cercano al mas alejado.

Ejemplos:

Propiedad opacity

La propiedad opacity aplica el nível de opacidad y va de 0 a 100 o de 0 a 1 y aplica para todas las propiedades css que tenga el selector al que le estamos aplicando esa opacidad.

Ejemplos: