Ejemplo: En este ejemplo, simplemente imprimimos los diferentes códigos de color hexadecimales utilizando el estilo de color de fondo en la etiqueta de encabezado HTML.
HTML
<!DOCTYPE html> <html> <head> <title>HTML Hex Color Codes</title> </head> <body> <h1>Welcome To GeeksforGeeks</h1> <h2 style="background-color:#808000;">#808000</h2> <h2 style="background-color:#CD5C5C;">#CD5C5C</h2> <h2 style="background-color:#FFA07A;">#FFA07A</h2> <h2 style="background-color:#DC143C;">#DC143C</h2> </body> </html>
Producción:
Los códigos de color HTML son el medio para representar el formato de colores que una computadora podría leer y mostrar. Los códigos de color más utilizados son los códigos hexadecimales. Los códigos hexadecimales son números hexadecimales de tres bytes (constan de seis variables), con un par de caracteres en el código hexadecimal, que representan la intensidad de rojo, verde y azul en el color, respectivamente.
Formato de los códigos de color hexadecimales: cada código de color hexadecimal contiene el símbolo «#» seguido de 6 letras o números. Los números están en el sistema numérico hexadecimal. Hay 1,67,77,216 posibilidades de colores diferentes. El rango de valores 00 del código representa la intensidad de color más baja, por otro lado, el rango de valores FF del código representa la intensidad más alta.
Significado de un código hexadecimal:
- La primera y segunda variable en el código de color hexadecimal representa la intensidad del color rojo .
- La 3ra y 4ta variable representa la intensidad del verde.
- La variable 5 y 6 representa la intensidad del azul .
- Combinando las intensidades de rojo, verde y azul se puede hacer casi cualquier color.
El color blanco es una mezcla de los tres colores primarios a máxima intensidad que representan el código de color hexadecimal #FFFFFF .
El color negro es una mezcla de los tres colores primarios en la intensidad más baja que representa el código de color #000000 .
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>HTML Hex Color Codes Examples</title> </head> <body> <h1>Welcome To GeeksforGeeks</h1> <h2 style="background-color:#FF0000;">#FF0000</h2> <h2 style="background-color:#00FF00;">#00FF00</h2> <h2 style="background-color:#0000FF;">#0000FF</h2> <h2 style="background-color:#FFFF00;">#FFFF00</h2> <h2 style="background-color:#CCEEFF;">#CCEEFF</h2> </body> </html>
Producción:
#FF0000: este código de color HTML muestra solo rojo y no verde ni azul.
#00FF00: este código de color HTML muestra solo verde y no rojo ni azul.
#0000FF: este código de color HTML muestra solo azul y no rojo ni verde.
#FFFF00: este código de color HTML es una mezcla de colores rojo y verde definidos como amarillo.
#CCEEFF: este código de color HTML es una mezcla de más verde y azul máximo que proporciona color como el cielo.
Lista de algunos códigos de color HTML comunes:
|
NOMBRE DEL COLOR |
CÓDIGO HEXAGONAL DE COLORES |
CÓDIGO DE COLOR RGB |
|---|---|---|
|
PLATA |
#C0C0C0 |
RGB(192, 192, 192) |
|
GRIS |
#808080 |
RGB(128, 128, 128) |
|
GRANATE |
#800000 |
RGB(128, 0, 0) |
|
ACEITUNA |
#808000 |
RGB(128, 128, 0) |
|
LIMA |
#00FF00 |
RGB(0, 255, 0) |
|
AGUA |
#00FFFF |
RGB(0, 255, 255) |
|
VERDE |
#008080 |
RGB(0, 128, 128) |
|
ARMADA |
#000080 |
RGB(0, 0, 128) |
|
FUCSIA |
#FF00FF |
RGB(255, 0, 255) |
|
VIOLETA |
#800080 |
RGB(128, 0, 128) |
|
ROJO INDIO |
#CD5C5C |
RGB (205, 92, 92) |
|
CORAL CLARO |
#F08080 |
RGB (240, 128, 128) |
|
SALMÓN |
#FA8072 |
RGB (250, 128, 114) |
|
SALMÓN OSCURO |
#E9967A |
RGB (233, 150, 122) |
|
SALMÓN CLARO |
#FFA07A |
RGB (255, 160, 122) |
Códigos hexadecimales de color con la saturación de colores únicos básicos y la luminosidad de esos colores que se pueden usar:
Tonos de colores ROJOS:
Ejemplo:
|
Nombre del color |
Código de color HTML |
Código de colores RGB |
|---|---|---|
|
salmón claro |
#FFA07A |
rgb(255,160,122) |
|
salmón |
#FA8072 |
RGB (250.128.114) |
|
salmón oscuro |
#E9967A |
rgb(233,150,122) |
|
coral claro |
#F08080 |
RGB (240.128.128) |
|
indiorojo |
#CD5C5C |
rgb(205,92,92) |
|
carmesí |
#DC143C |
rgb(220,20,60) |
|
ladrillo refractario |
#B22222 |
rgb(178,34,34) |
|
rojo |
#FF0000 |
rgb(255,0,0) |
|
rojo oscuro |
#8B0000 |
rgb(139,0,0) |
HTML
<!DOCTYPE html> <html> <head> <title>Shades of Red Colors</title> </head> <body> <h1>Welcome To GeeksforGeeks</h1> <h2 style="background-color:#FFA07A;">#FFA07A</h2> <h2 style="background-color:#FA8072;">#FA8072</h2> <h2 style="background-color:#FF0000;">#FF0000</h2> <h2 style="background-color:#8B0000;">#8B0000</h2> </body> </html>
Producción:
Del mismo modo, podemos tener sombras de otros colores también.
Tonos de NARANJA Colores:
|
Nombre del color |
Código de color HTML |
Código de colores RGB |
|---|---|---|
|
coral |
#FF7F50 |
rgb(255,127,80) |
|
tomate |
#FF6347 |
rgb(255,99,71) |
|
rojo naranja |
#FF4500 |
rgb(255,69,0) |
|
oro |
#FFD700 |
rgb(255,215,0) |
|
naranja |
#FFA500 |
rgb(255,165,0) |
|
naranja oscuro |
#FF8C00 |
rgb(255,140,0) |
Tonos de AMARILLO Colores:
|
Nombre del color |
Código de color HTML |
Código de colores RGB |
|---|---|---|
|
amarillo claro |
#FFFFE0 |
rgb(255,255,224) |
|
limonchiffon |
#FFFACD |
rgb(255,250,205) |
|
Papayawhip |
#FFEFD5 |
rgb(255,239,213) |
|
mocasín |
#FFE4B5 |
rgb(255,228,181) |
|
melocotonero |
#FFDAB9 |
rgb(255,218,185) |
|
vara de oropalido |
#EEE8AA |
rgb(238,232,170) |
|
caqui |
#F0E68C |
rgb(240,230,140) |
|
caqui oscuro |
#BDB76B |
rgb(189,183,107) |
|
amarillo |
#FFFF00 |
rgb(255,255,0) |
Tonos de VERDE Colores:
|
Nombre del color |
Código de color HTML |
Código de colores RGB |
|---|---|---|
|
verde césped |
#7CFC00 |
rgb(124,252,0) |
|
verde lima |
#32CD32 |
rgb(50,205,50) |
|
Lima |
#00FF00 |
rgb(0,255,0) |
|
bosque verde |
#228B22 |
rgb(34,139,34) |
|
verde oscuro |
#006400 |
rgb(0,100,0) |
|
primavera verde |
#00FF7F |
rgb(0,255,127) |
|
medianoprimaveraverde |
#00FA9A |
rgb(0,250,154) |
|
Verde pálido |
#98FB98 |
rgb(152,251,152) |
|
Mar verde |
#2E8B57 |
rgb(46,139,87) |
Tonos de colores AZULES:
|
Nombre del color |
Código de color HTML |
Código de colores RGB |
|---|---|---|
|
azul pálido |
#B0E0E6 |
rgb(176,224,230) |
|
cielo azul claro |
#87CEFA |
rgb(135,206,250) |
|
cielo azul |
#87CEEB |
rgb(135,206,235) |
|
azul cieloprofundo |
#00BFFF |
rgb(0,191,255) |
|
dodgerblue |
#1E90FF |
rgb(30,144,255) |
|
azul aciano |
#6495ED |
rgb(100,149,237) |
|
azul acero |
#4682B4 |
rgb(70,130,180) |
|
azul real |
#4169E1 |
rgb(65,105,225) |
|
azul medio |
#0000CD |
rgb(0,0,205) |
Tonos de colores BLANCO:
| Nombre del color | Código de color HTML | Código de colores RGB |
|---|---|---|
| nieve | #FFFAFA | rgb(255,250,250) |
| gotas de miel | #F0FFF0 | rgb(240,255,240) |
| azur | #F0FFFF | rgb(240,255,255) |
| fantasmablanco | #F8F8FF | rgb(248,248,255) |
| humo blanco | #F5F5F5 | rgb(245,245,245) |
| crema de menta | #F5FFFA | rgb(245,255,250) |
| Marfil | #FFFFF0 | rgb(255,255,240) |
| floralblanco | #FFFAF0 | rgb(255,250,240) |
| blanco antiguo | #FAEBD7 | rgb(250,235,215) |
Tonos de MARRÓN Colores:
| Nombre del color | Código de color HTML | Código de colores RGB |
|---|---|---|
| almendras blanqueadas | #FFEBCD | rgb(255,235,205) |
| sopa de mariscos | #FFE4C4 | RGB (255228196) |
| trigo | #F5DEB3 | RGB (245222179) |
| burlywood | #DEB887 | rgb(222,184,135) |
| broncearse | #D2B48C | rgb(210,180,140) |
| marrón rosado | #BC8F8F | rgb(188,143,143) |
| marrón arena | #F4A460 | rgb(244,164,96) |
| chocolate | #D2691E | rgb(210,105,30) |
| marron | #8B4513 | rgb(139,69,19) |
| tierra de siena | #A0522D | rgb(160,82,45) |
| marrón | #A52A2A | rgb(165,42,42) |
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
Publicación traducida automáticamente
Artículo escrito por khushboogoyal499 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA