GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Colores en CSS
Los colores se especifican utilizando nombres de color predefinidos, o los valores RGB, HEX, HSL,
RGBA, HSLA.
Nombres del color
tomato naranja dodge blue medium sea green
gray stateblue violet lightgray
Color de fondo
Con CSS podemos determinar el color de fondo de los elementos HTML.
Hola Mundo!!!
Este párrafo es para hacer una prueba de color de fondo a diferentes elementos de la página
HTML
Ver: Código [Link]
Color de texto
Con CSS podemos determinar el color de los textos de en el documento HTML.
Hola Mundo!!!
Este párrafo es para hacer una prueba de color de texto de la página HTML.
Este párrafo también prueba color de texto.
Ver: Código [Link]
GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Color de borde
Con CSS podemos determinar el color de los bordes.
Hola Mundo
Hola Mundo
Hola Mundo
Ver: Código [Link]
Los valores del color
En HTML, los colores también pueden ser especificados usando valores RGB, valores HEX, valores
HSL, valores RGBA y valores HSLA:
Igual que el nombre del color "tomate":
rgb (255,99,71)
#ff6347
hsl (9, 100%, 64%)
Igual que el nombre del color "tomate", pero el 50% transparente:
rgb (255,99,71, 0.5)
hsla (9, 100%, 64%, 0.5)
Ver: Código [Link]
Valor RGB
En HTML, un color se puede especificar como un valor RGB, utilizando esta fórmula:
RGB (rojo, verde , azul )
Cada parámetro (rojo, verde, y azul) define la intensidad del color entre 0 y 255. Por ejemplo, RGB
(255, 0, 0) se muestra como rojo, porque el rojo está ajustado a su valor más alto (255) y los otros
se establecen en 0.
Para mostrar el color negro, todos los parámetros de color se deben establecerse en 0, de esta
manera: rgb (0, 0, 0).
GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Para mostrar el color blanco, todos los parámetros de color se deben establecerse en 255, así:
rgb (255, 255, 255).
rgb (255, 0, 0) rgb (0, 0, 255)
rgb (60, 179, 113) rgb (238, 130, 238)
rgb (255, 165, 0) rgb (106, 90, 205)
Ver: Código [Link]
En los tonos grises ocurre una particularidad, los valores generalmente se repiten para los tres
tonos de luz.
rgb (0, 0, 0) rgb (60, 60, 60)
rgb (120, 120, 120) rgb (180, 180, 180)
rgb (240, 240, 240) rgb (255, 255, 255)
Ver: Código [Link]
Valor HEX
En HTML, un color se puede especificar como un valor hexadecimal, utilizando esta fórmula:
#rrggbb
Donde rr (rojo), gg (verde) y bb (azul) son los valores hexadecimales entre 00 y ss (igual que en
decimal 0 -255).
Como ejemplo #FF0000 se muestra como rojo, porque el rojo se establece en su valor más alto
(FF) mientras verde y azul están en su valor mínimo (00).
#ff0000 #0000ff
#3cb371 #ee82ee
#ffa500 #6ª5acd
Ver: Código [Link]
GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
En los tonos grises ocurre la particularidad, los valores generalmente se repiten para los tres tonos
de luz.
#000000 #3c3c3c
#787878 #b4b4b4
#f0f0f0 #ffffff
Ver: Código [Link]
Valor HEX
En HTML, un color se puede especificar como matiz, saturación y luminosidad (HSL) utilizando esta
fórmula:
hsl (tonalidad, saturación, luminosidad)
Hue (tonalidad) es una medida de la rueda de color de 0 a 360. 0 es el rojo, el verde es 120, y 240
es de color azul.
La saturación es un valor de porcentaje, 0% significa un tono de gris, y el 100% es el color
completo.
La ligereza es también un porcentaje, 0% es negro, 50% no es ni claro u oscuro, 100% es de color
blanco
hsl(0, 100%, 50%) hsl(240, 100%, 50%)
hsl(147, 50%, 47%) hsl(300, 76%, 72%)
hsl(39, 100%, 50%) hsl(248, 53%, 58%)
Ver: Código [Link]
Saturación
La saturación se puede describir como la intensidad de un color, 100% será el color puro, sin tonos
de gris, 50% representa un 50% de tonalidad gris, pero aún se percibe el color y 0% será
completamente gris, no se aprecia el color.
hsl(0, 100%, 50%) hsl(240, 100%, 50%)
hsl(147, 50%, 47%) hsl(300, 76%, 72%)
hsl(39, 100%, 50%) hsl(248, 53%, 58%)
Ver: Código [Link]
GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Luminosidad
La luminosidad de un color se refiere a la cantidad de luz que quiere transmitir el color, donde 0%
significa que no hay luz (negro), el 50% significa el 50% de luz ( ni oscuro, ni claro) y 100% significa
luminosidad total (blanco).
hsl(0, 100%, 50%) hsl(240, 100%, 50%)
hsl(147, 50%, 47%) hsl(300, 76%, 72%)
hsl(39, 100%, 50%) hsl(248, 53%, 58%)
Ver: Código [Link]
Tonos de gris a menudo se definen fijando el tono y la saturación a 0, y ajustar la luminosidad de
0% a 100% para obtener tonos más oscuros / más ligeros:
hsl(0, 0%, 0%) hsl(0, 0%, 24%)
hsl(0, 0%, 47%) hsl(0, 0%, 71%)
hsl(0, 0%, 94%) hsl(0, 0%, 100%)
Ver: Código [Link]
Valores RGBA
Son una extensión del color RGB pero con un canal “alfa”, que especifica la opacidad de un color.
Se expresan mediante la fórmula:
RGBA (rojo, verde, azul, alfa)
El parámetro alfa es un valor numérico entre 0.0 (completamente transparente) y 1.0 (no
transparente).
rgba(255, 99, 71, 0) rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4) rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8) rgba(255, 99, 71, 1)
Ver: Código [Link]
GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Valores HSLA
Son una extensión del color HSL pero con un canal “alfa”, que especifica la opacidad de un color.
Se expresan mediante la fórmula:
HSLA (tonalidad, saturación, luminosidad, alfa)
El parámetro alfa es un valor numérico entre 0.0 (completamente transparente) y 1.0 (no
transparente).
hsla(9, 100%, 645, 0) hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4) hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8) hsla(9, 100%, 64%, 1)
Ver: Código [Link]