DEFINICIÓN DE COLORES
Para que nuestros sitios se llenen de colores, necesitamos un manera de establecer
los valores de estos colores. Existen tres formatos que podemos usar:
1. Usando los nombres de colores
Podemos especificar un color usando un nombre predefinido. Por ejemplo podemos
especificar que el color del párrafo sea rojo con la siguiente regla:
p{
color: red;
}
Nota:
Una lista de los nombres de colores soportados por la mayoría de los navegadores
populares se encuentra en: CSS Color Module Level 3 ([Link])
Ejemplo:
Realizar el ejemplo en la clase
2. Usando el modelo RGB
Podemos establecer el valor de un color mezclando diferentes intensidades de los
tres colores primarios.
Nota: No olvides que un color primario, es un color que no se puede obtener mediante
la mezcla de ningún otro color.
Pensaremos en pintar un cuadro. El pintor obtiene el color que desea, mezclando los
colores que tiene en su paleta.
En CSS, para poder especificar esta mezcla tenemos dos opciones:
2.1 Usando la función rgb(r,g,b)
Para definir un color como la mezcla las intensidades de los colores primarios
podemos usar la función:
rgb(red, green, blue)
Donde:
● El parámetro red
○ Especifica la intensidad del rojo presente en la mezcla
○ Los valores posibles son: [0-255] o [0%-100%]
● El parámetro green
○ Especifica la intensidad del verde presente en la mezcla
○ Los valores posibles son: [0-255] o [0%-100%]
● El parámetro blue
○ Especifica la intensidad del azul presente en la mezcla
○ Los valores posibles son: [0-255] o [0%-100%]
Nota:
La cantidad de colores que se puede representar es : 256 x 256 x 256 = 16 777 216
Escribir en google color picker
Ejemplo:
Realizar el ejemplo en la clase
2.1.1 Opacidad
Podemos definir la transparencia de un color usando la función rgba, esta función es
idéntica a la función rgb, pero con un parámetro adicional denominado opacidad,
para especificar la transparencia.
rgba(r,g,b,a)
Donde:
● El parámetro a
○ Especifica la transparencia
○ Los valores posibles son: [0-1]
■ 0, significa completamente transparente
■ 1, significa completamente opaco (no transparente)
2..2 Usando un valor hexadecimal
Podemos utilizar un número hexadecimal para definir un color. Es una alternativa a
la función rgb, es decir permite definir un color como la mezcla de intensidades de
los colores primarios
#numero_hexadecimal
Donde:
● El número hexadecimal
○ Tiene 6 dígitos
○ Los primeros dos dígitos indican el color rojo
○ Los dos dígitos del medio indican el color verde
○ Los dos últimos dígitos indican el color azul
Nota:
La cantidad de colores que se puede representar es : 256 x 256 x 256 = 16 777 216
Ejemplo:
Realizar el ejemplo en la clase
2.3 Usando una herramienta en línea
3. Usando el modelo HSL
En este modelo utilizamos conceptos que son más fáciles de comprender.
En CSS para poder trabajar con este modelo tenemos la siguiente opción:
3.1 Usando la función hsl(h, s, l)
Podemos definir el color usando la función
hsl(hue, saturation, lightness)
Donde:
● El parámetro hue (tono)
○ Es el color
○ Los valores posibles son: [0-360]
○ Podemos obtener los valores de la rueda de colores
● El parámetro saturation (saturación)
○ Determina que tan fuerte o vivo es un color
○ Los valores posibles son: [0%-100%]
■ Donde 100% significa completamente saturado (color muy vivo)
■ Donde 0% significa sin saturación alguna (color apagado)
● El parámetro ligthness (Luminosidad)
○ Permite establecer la claridad u oscuridad de un color
○ Los valores posibles son de: [0%-100%]
■ Donde 100% significa completamente blanco (brillantez total)
■ Donde 50% es normal
■ Donde 0% es competamente negro (sin brillantez)
Ejemplo:
background-color: hsl(60, 100%, 50%);
3.1.1 Opacidad
Podemos definir la transparencia de un color usando la función hsla, esta función es
idéntica a la función hsl, pero con un parámetro adicional denominado opacidad,
para especificar la transparencia.
hsla(h,s,l,a)
Donde:
● El parámetro a
○ Especifica la transparencia
○ Los valores posibles son: [0-1]
■ 0 significa completamente transparente
■ 1 significa completamente opaco (no transparente)
3.2 Usando una herramienta en línea.
HSL Color Picker
