Cómo usar códigos de color HTML en tu web

¿Quién quiere un sitio web aburrido en blanco y negro? Aprender a usar códigos de color HTML no solo mejora la apariencia de tu web, sino que puede aumentar las probabilidades de que los visitantes la utilicen. Los códigos de color HTML sirven para el diseño estético y para centrar la atención del visitante en lo que quieres que vea.

Paso 1: Elegir colores seguros para la web

Abre una tabla de códigos de color HTML seguros para la web y examina los colores disponibles. Aunque la mayoría de los ordenadores pueden mostrar cualquier color, usar solo colores web-safe es una opción más accesible. Además, hay muchos colores para elegir. Selecciona colores para tu proyecto que coincidan con el tema y diseño de tu sitio. Una buena regla es elegir dos colores complementarios y uno de acento. Un color neutro como negro, blanco, gris o beige también es buena opción.

Paso 2: Copiar los códigos de 6 caracteres

Copia los códigos de color HTML de 6 caracteres para los colores que deseas usar. Estos consisten en los números 0, 3, 6 y 9, y las letras C y F en diversas combinaciones. Estos códigos de 6 caracteres se usarán en el código HTML de tu web donde quieras crear un acento de color.

Paso 3: Definir el color de fondo

Elige un color para el fondo de tu web. Para cambiar el fondo a ese color, usa el código HTML <body bgcolor="#336699"> y reemplaza el código de 6 caracteres por el de tu color deseado. Como este es el color para todo el fondo del cuerpo de la página, este fragmento reemplaza la etiqueta normal <body>.

Paso 4: Cambiar color de texto, encabezados y enlaces

Cambia el color de cualquier texto, encabezado o enlace en tu página web incluyendo códigos de color y el código HTML adecuado. Cualquier texto puede colorearse añadiendo el atributo <font color="#336699">. Por ejemplo, para cambiar el color de un encabezado grande, añade <h1><font color="#336699">Encabezado</font></h1> a tu código web.

Paso 5: Usar CSS para encabezados (método recomendado)

Cambia el color de todos los encabezados de tu web usando hojas de estilo en cascada (CSS). Usa el código h1 {color:#336699;} entre las etiquetas <head> y </head> de tu código web. Cada vez que uses una etiqueta <h1>, tendrá ese color. CSS es el método estándar para dar estilo a sitios web y facilita futuros cambios de diseño.

Paso 6: Cambiar colores de fuentes, enlaces y otros elementos con CSS

Usa el fragmento CSS p {color:#336699;} para las fuentes. El HTML de cada bloque de texto debe estar delimitado por las etiquetas <p> y </p>. Los colores de los enlaces pueden cambiarse usando a {color:#336699;} y la etiqueta <a href>. Otras etiquetas HTML, como bordes de imágenes, reglas horizontales y celdas de tabla, también pueden cambiarse con el fragmento CSS básico {color:#336699;}.

Consejo

Adapta los colores al tema de tu web: verde para jardinería, tonos pastel para bebés. CSS es el método preferido para añadir color a tu web con códigos HTML.

Advertencia

Elige solo tres o cuatro colores para evitar que tu web parezca recargada. Ten en cuenta que las etiquetas en los pasos anteriores están entre comillas para claridad. Al insertar el código en tu HTML, no uses las comillas externas que rodean las etiquetas.