COLORES CSS
En CSS podemos definir los colores de varias formas: color names (names color), color
hexadecimal (HEX color), color rgb y color rgba.
A continuación, conoceremos las dos primeras formas de dar color a un elemento html.
Podemos usar estas formas de traer colores a nuestro HTML por medio de las propiedades CSS
color, background-color y otras más que nos permitan agregar color a un elemento.
Todos los ejemplos los haremos con la propiedad background-color, pero esto se puede aplicar para
cualquier otra propiedad que nos permita dar color a una etiqueta html.
● Color names (names color)
Esto son los nombres de los colores que queremos usar. Son aquellos que vienen
predeterminados en los navegadores ya que éstos los soportan de muy buena manera.
A pesar de haber una cantidad de 140 color names no son una paleta muy amplia, flexible
ni dinámica ya que no tenemos control sobre ellos para dar más claridad, nitidez,
profundidad y demás factores a la hora de realizar un buen diseño web.
color: nombre del color;
BIT - Bogotá Institute of Technology SAS | Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
● Color Hexadecimal (HEX color)
Estos colores nos dan una paleta más amplia para poder estilizar nuestras etiquetas HTML.
Contienen un máximo de seis caracteres que pueden ser alfanuméricos precedidos de una
almohadilla o numeral. El color hexadecimal permite letras mayúsculas y minúsculas.
#FFFFFF
#000000
#CCFF00
#99FF69
La composición de los colores hexadecimales es la siguiente:
color: #RRGGBB;
Los dos primeros parámetros representan la cantidad de color rojo (Red) empleada.
Los dos segundos parámetros representan la cantidad de color verde (Green) empleada.
Los últimos dos parámetros representan la cantidad de color azul (Blue) empleada.
Los colores hexadecimales toman valores desde el 0 al 9 y desde A hasta F siendo el valor
BIT - Bogotá Institute of Technology SAS | Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
FF el uso total de un color y 00 la ausencia de uso de ese color.
#FF0000 = Da un color rojo en su totalidad
#00FF00 = Da un color verde en su totalidad
#0000FF = Da un color azul en su totalidad
#FFFFFF = La saturación al máximo de cada color nos da el color
blanco
#000000 = La ausencia total de cada color nos da el color
Negro
Con esto en mente podemos combinar los colores a nuestro antojo obteniendo resultados
mucho más variados a nivel de diseño dando así mayor peso visual a nuestro sitio web.
BIT - Bogotá Institute of Technology SAS | Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
Para usar estos colores, nos podemos apoyar en la siguiente página:
https://htmlcolorcodes.com/es/
Seleccionamos el color deseamos
BIT - Bogotá Institute of Technology SAS | Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
Copiamos el código hexadecimal que nos indica en la parte superior
Pegamos ese código en nuestra propiedad CSS que queremos usar (background- color,
color, etc)
BIT - Bogotá Institute of Technology SAS | Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
Guardamos y refrescamos el navegador
Ya tenemos nuestro color hexadecimal aplicado.
BIT - Bogotá Institute of Technology SAS | Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
● Color rgb
El color rgb (red, green blue) nos permite usar una paleta de colores muchísimo más amplia y
extensa a partir de tres colores: Red (rojo), Green (verde) y Blue (Azul) manejando a
nuestra voluntad la cantidad empleada de cada color, combinándolos a nuestro gusto
siendo 255 la mayor intensidad de cada color y 0 la menor. Este valor también se puede
manejar por porcentaje, siendo su 0% el porcentaje mínimo empleado de color y 100% el
valor máximo.
El color rgb es el tipo de color más empleado en el diseño web debido a que se basa
también en la luminosidad permitida de las pantallas.
rgb (235, 242, 120)
rgb (170, 50, 255)
rgb (0, 50, 220)
La composición de los colores rgb es la siguiente:
color: rgb(red, green, blue);
El primer canal representan la cantidad de color rojo (Red) empleada.
El segundo canal representan la cantidad de color verde (Green) empleada.
El tercer y último canal representan la cantidad de color azul (Blue) empleada.
rgb(255, 0, 0) = Da un color rojo en su totalidad
rgb(0, 255, 0) = Da un color verde en su totalidad
rgb(0, 0, 255) = Da un color azul en su totalidad
rgb(255, 255, 255)= La saturación al máximo de cada color nos da el color blanco
rgb(0, 0, 0) = La saturación al máximo de cada color nos
da el color blanco
Con esto en mente podemos combinar los colores a nuestro antojo obteniendo resultados
mucho más variados a nivel de diseño dando así mayor peso visual a nuestro sitio web.
BIT - Bogotá Institute of Technology SAS | Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
Como se mencionó anteriormente, estos valores también pueden ser indicados en
porcentaje % consiguiendo el mismo resultado. Esta elección de valores es a gusto de cada
diseñador web.
BIT - Bogotá Institute of Technology SAS | Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
● Color rgba
El color rgba (red, Green, blue, alpha) es una extensión del color rgb solo que se añade el
canal alpha (alfa) el cual nos va a permitir dar opacidad a un elemento.
Funciona de forma similar al color rgb solo que el valor del canal alpha se maneja con
números decimales entre 0 y 1, siendo 0 el valor de transparencia u opacidad total de
nuestro elemento y 1 ningún tipo de opacidad o transparencia aplicado.
rgba (235, 242, 120, 1)
rgba (170, 50, 255, 0.5)
rgba (0, 50, 220, 0)
La composición de los colores rgba es la siguiente:
color: rgba(red, green, blue, alpha);
El primer canal representan la cantidad de color rojo (Red) empleada.
El segundo canal representan la cantidad de color verde (Green) empleada. El tercer canal
representan la cantidad de color azul (Blue) empleada.
El cuarto y último canal representan qué tanto opacidad debe aplicar al elemento.
rgba(0, 0, 255, 0) = El color azul será totalmente
transparente
rgba(0, 0, 255, 0.5) = El color azul será medianamente
transparente
rgba(0, 0, 255, 1) = El color azul será totalmente
visible
A mayor proximidad al valor 1 mayor será la visibilidad de nuestro elemento
disminuyendo su opacidad o transparencia.
A mayor proximidad al valor 0 menor será la visibilidad de nuestro elemento aumentando
en su opacidad o transparencia.
BIT - Bogotá Institute of Technology SAS | Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
A mayor proximidad al 0 mayor opacidad:
BIT - Bogotá Institute of Technology SAS | Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
