Colores HTML: determinar el color de fondo, texto y marco
Los colores HTML se utilizan para seleccionar colores para fondos, textos o marcos en un documento HTML. Una elección correcta del color mejora el diseño y la legibilidad de una página web. Existen tres opciones diferentes para su definición.
¿Qué son los colores HTML?
Los colores HTML se utilizan para definir los valores de color de determinados elementos de un documento HTML. A partir de sencillos ajustes dentro del área body y mediante la style tag puedes personalizar tanto el fondo HTML, como los marcos y los textos según tu criterio.
- 3x más rápido, ahora un 60 % de ahorro
- Alta disponibilidad >99.99 %
- Solo en IONOS: hasta 500 GB incluidos
¿Qué métodos existen para especificar los colores HTML?
Existen tres métodos diferentes, pero equivalentes, para definir los colores HTML. Las diferencias principales de estas tres variantes se especifican en las siguientes secciones.
Nombres de colores
Todos los navegadores modernos admiten un total de 140 nombres de colores. El nombre correspondiente se inserta simplemente en inglés dentro del código. Además de valores estándar como “Blue”, “Gray” o “Red”, también son posibles valores más especializados como “Chocolate”, “Cornsilk” o “DarkSeaGreen”.
En el siguiente artículo de w3schools encontrarás una lista de todos los nombres de colores HTML disponibles.
Códigos de colores hexadecimales
Los códigos de colores hexadecimales consisten en un número hexadecimal de seis dígitos que se indican mediante una almohadilla (#). Se utilizan los dígitos del 0 al 9 y las letras de la A a la F. En este número hexadecimal, la proporción de los colores rojo, verde y azul se expresa por pares, siendo 00 el valor más pequeño y FF el más grande. Así, el color azul se expresa mediante el código hexadecimal #0000FF, mientras que el rosa oscuro (DeepPink) tiene el valor de color #FF1493. En los dos extremos del espectro están el negro (#000000) y el blanco (#FFFFFF).
Valores RGB
De forma similar a la definición del color con códigos de colores hexadecimales, la codificación del color HTML funciona con la ayuda de colores RGB. Estos también se definen por sus proporciones de rojo, verde y azul, por lo que la intensidad de un componente puede estar entre 0 y 255. Por ejemplo, se define el color azul con el código rgb(0, 0, 255), el cian con rgb(0, 255, 255) y el rosa oscuro con rgb(255, 20, 147).
Definir colores HTML: sintaxis y ejemplos
Por último, ilustraremos la sintaxis y funcionalidad de cada uno de los métodos para especificar colores en HTML mediante algunos ejemplos prácticos.
Cambiar el color del fondo
Si quieres cambiar el color del fondo en HTML, necesitas el atributo style y la propiedad inline CSS background-color. La sintaxis es la siguiente:
<element style="background-color: valor de color;">En el siguiente ejemplo, utilizamos los nombres de colores para establecer el color de fondo del encabezado <h2> en “SteelBlue”. El texto se resalta en el primer párrafo con el valor de color “SpringGreen” y en el siguiente con “Yellow”:
<body>
<h2 style="background-color: SteelBlue;">
Colores HTML para el fondo
</h2>
<p style="background-color: SpringGreen; padding: 5px;">
Aquí hemos creado un párrafo y su color de fondo es <b>SpringGreen</b>.
</p>
<p style="background-color: Yellow;">
Este es otro párrafo y su color de fondo es <b>Yellow</b>.
</p>
</body>
Ajustar el color de texto
Si deseas cambiar el color del texto de tus páginas web, el proceso es similar. Sin embargo, en este caso, se trabaja con la propiedad color. La sintaxis es la siguiente:
<element style="color: valor de color;">Para la especificación del color en este ejemplo, utilizamos los valores hexadecimales de los colores HTML con fines ilustrativos. Para ello, especificamos OrangeRed (#FF4500) como color de fuente para el título. La primera sección se mantiene en el color MidnightBlue (#191970) y la segunda sección en Indigo (#4B0082):
<body>
<h2 style="color: #FF4500;">
Este título es rojo anaranjado
</h2>
<p style="color: #191970;">
Esto es un párrafo y su color de texto es <b>MidnightBlue</b>. </p>
<p style="color: #4B0082;">
Este es otro párrafo y su color de texto es <b>Indigo</b>.
</p>
</body>
Establecer valores de color para los marcos
También puedes cambiar los marcos con los colores HTML que quieras. Además de la propiedad border, puedes utilizar otros parámetros para definir el formato del marco. En este caso, la sintaxis es la siguiente:
<element style="border: otros parámetros del valor del color;">En este ejemplo utilizamos la tercera variante para la definición del color, esto es, los valores RGB. El marco de nuestro título recibe el valor rgb(178, 34, 34) (FireBrick). Los dos párrafos están enmarcados con rgb(32, 178, 170) (LightSeaGreen) y rgb(205, 133, 63) (Peru).
<body>
<h2 style="border: 2.5px solid rgb(178, 34, 34);">
El marco del título es rojo fuego</h2>
<p style="border: 2.5px dashed rgb(32, 178, 170); padding: 5px;">
Este marco es color <b>LightSeaGreen</b>.
</p>
<p style="border: 2.5px dotted rgb(205, 133, 63); padding: 5px;">
Este marco es color <b>Peru</b>.
</p>
</body>
- Tu dominio protegido con Certificado SSL Wildcard gratis
- Función Domain Connect para una configuración DNS simplificada gratis
- Registro privado y gratis para mayor seguridad