Colores HTML
Los colores HTML se especifican utilizando nombres de colores
predefinidos o valores RGB, HEX, HSL, RGBA, HSLA.
Nombres de colores
En HTML, un color se puede especificar mediante el uso de un nombre
de color:
Tomate
naranja
DodgerBlue
MediumSeaGreen
gris
SlateBlue
Violeta
Gris claro
HTML admite 140 nombres de colores estándar .
Color de fondo
Puede establecer el color de fondo para los elementos HTML:
Hola Mundo
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ejemplo
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Color de texto
Puedes establecer el color del texto:
Hola Mundo
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ejemplo
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Color del borde
Puedes establecer el color de los bordes:
Hola Mundo
Hola Mundo
Hola Mundo
Ejemplo
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Valores de color
En HTML, los colores también se pueden especificar utilizando valores
RGB, valores HEX, valores HSL, valores RGBA y valores HSLA:
Igual que el nombre de color "Tomate":
rgb (255, 99, 71)
# ff6347
hsl (9, 100%, 64%)
Igual que el nombre de color "Tomate", pero 50% transparente: 100%,
64%, 0.5)
Ejemplo
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Valor RGB
En HTML, un color se puede especificar como un valor RGB, usando 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 en rojo, porque el rojo se
establece en su valor más alto (255) y los demás se establecen en 0.
Para mostrar el color negro, todos los parámetros de color se deben
establecer en 0, como este: rgb (0, 0, 0).
Para mostrar el color blanco, todos los parámetros de color se deben
establecer en 255, como este: rgb (255, 255, 255).
Ejemplo
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
Las sombras de gris a menudo se definen usando valores iguales para
las 3 fuentes de luz:
Ejemplo
rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 25
Valor HEX
En HTML, un color se puede especificar utilizando un valor hexadecimal
en la forma:
# rrggbb
Donde rr (rojo), gg (verde) y bb (azul) son valores hexadecimales entre
00 y ff (igual que el decimal 0-255).
Por ejemplo, # ff0000 se muestra en rojo, porque el rojo se establece en
su valor más alto (ff) y los demás se establecen en el valor más bajo
(00).
Ejemplo
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
Las sombras de gris a menudo se definen usando valores iguales para
las 3 fuentes de luz:
Ejemplo
#000000
#3c3c3c
#787878
#b4b4b4
#f0f0f0
#ffffff
Valor de HSL
En HTML, un color se puede especificar usando tono, saturación y
luminosidad (HSL) en la forma:
hsl ( matiz , saturación , luminosidad )
El tono es un grado en la rueda de color de 0 a 360. 0 es rojo, 120 es
verde y 240 es azul.
La saturación es un valor porcentual, 0% significa un tono de gris y
100% es el color completo.
La claridad es también un porcentaje, 0% es negro, 50% no es claro u
oscuro, el 100% es blanco
Ejemplo
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Saturación
La saturación se puede describir como la intensidad de un color.
El 100% es de color puro, sin sombras de gris
50% es 50% gris, pero aún puede ver el color.
0% es completamente gris, ya no puedes ver el color.
Ejemplo
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
Ligereza
La claridad de un color se puede describir como la cantidad de luz que
desea dar al color, donde 0% significa que no hay luz (negro), 50%
significa 50% de luz (ni oscuro ni claro) 100% significa ligereza total
(blanco).
Ejemplo
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
Los tonos de gris a menudo se definen ajustando el tono y la saturación
a 0, y ajustan la luminosidad de 0% a 100% para obtener tonos más
oscuros / claros:
Ejemplo
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
Valor de RGBA
Los valores de color RGBA son una extensión de los valores de color RGB
con un canal alfa, que especifica la opacidad para un color.
Un valor de color RGBA se especifica con:
rgba ( rojo, verde , azul, alfa )
El parámetro alfa es un número entre 0.0 (totalmente transparente) y
1.0 (no transparente en absoluto):
Ejemplo
rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
, 99, 71, 0.8)
rgba(255, 99, 71, 1)
Valor HSLA
Los valores de color HSLA son una extensión de los valores de color HSL
con un canal alfa, que especifica la opacidad para un color.
Un valor de color HSLA se especifica con:
hsla ( matiz, saturación , claridad, alfa )