# 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](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/que-es-html/). A partir de sencillos ajustes dentro del área [body](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/html-body/) y mediante la [style tag](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/html-tag-style/) puedes personalizar tanto el [fondo HTML](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/fondos-html/), como los marcos y los textos según tu criterio. ## ¿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”. Consejo En el siguiente [artículo de w3schools](https://www.w3schools.com/colors/colors_names.asp "w3schools.com: nombres de colores HTML") 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](https://www.ionos.es/digitalguide/paginas-web/diseno-web/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](https://www.ionos.es/digitalguide/paginas-web/diseno-web/que-es-css/) `background-color`. La sintaxis es la siguiente: ```html ``` En el siguiente ejemplo, utilizamos los **nombres de colores** para establecer el color de fondo del encabezado `

` en “SteelBlue”. El texto se resalta en el primer párrafo con el valor de color “SpringGreen” y en el siguiente con “Yellow”: ```html

Colores HTML para el fondo

Aquí hemos creado un párrafo y su color de fondo es SpringGreen.

Este es otro párrafo y su color de fondo es Yellow.

``` [![Imagen: Colores HTML: ejemplo de fondo](https://www.ionos.es/digitalguide/fileadmin/_processed_/f/e/csm_colores-html-ejemplo-fondo_975c283e36.webp "Colores HTML: ejemplo de fondo")](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/colores-html-ejemplo-fondo.png) En el navegador, vemos los diferentes colores de fondo de los tres elementos como espeficado. ### 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: ```html ``` 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`): ```html

Este título es rojo anaranjado

Esto es un párrafo y su color de texto es MidnightBlue.

Este es otro párrafo y su color de texto es Indigo.

``` [![Imagen: Colores HTML: ejemplo de texto](https://www.ionos.es/digitalguide/fileadmin/_processed_/3/4/csm_colores-html-ejemplo-texto_cc02b07259.webp "Colores HTML: ejemplo de texto")](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/colores-html-ejemplo-texto.png) Tras ejecutar el código del ejemplo, vemos los tres elementos con colores de texto diferentes. ### 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: ```html ``` 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). ```html

El marco del título es rojo fuego

Este marco es color LightSeaGreen.

Este marco es color Peru.

``` [![Imagen: Colores HTML: ejemplo de marco](https://www.ionos.es/digitalguide/fileadmin/_processed_/d/2/csm_colores-html-ejemplo-marco_9ffd927190.webp "Colores HTML: ejemplo de marco")](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/colores-html-ejemplo-marco.png) Los marcos del ejemplo no solo tienen diferentes colores HTML, sino también diferentes formatos. This is a markdown version of: [https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/colores-html/](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/colores-html/) for AI/LLM consumption.