Cómo indicar colores en HTML (con tabla y ejemplos)

Descarga gratis nuestra guía con tablas de colores HTML
Ana Isabel Sordo
Ana Isabel Sordo

Actualizado:

Publicado:

Darle color a tu sitio web puede provocar emociones, establecer un ambiente adecuado y hacer que tu diseño en general sea más coherente y cohesivo. 

Colores HTML

Todos los días vemos diferentes colores, y desde tiempos antiguos los hemos clasificado: colores primarios, secundarios, entre otros. Amarillo, azul y rojo se encuentran dentro de estos colores primarios. Adicionalmente, hay cientos de tonos diversos que también tienen su propio nombre: el rosa, por ejemplo, cuenta con diferentes tonalidades como neón, fucsia, magenta, chicle, entre otros.

No obstante, lo que para alguien es de un modo para otra persona puede ser algo completamente diferente. Por ejemplo, cuando algunas personas piensan en turquesa aseguran que proviene de un tono azul y otras del verde. Lo mismo pasa con el rosa neón y el fucsia. Los colores HTML ayudan a evitar este tipo de imprecisiones a la hora de diseñar un sitio web en HTML.

50 gamas cromáticas para tu sitio web

Explora una amplia selección de combinaciones de colores diseñadas para tu sitio web, que brindan armonía visual y mejoran la experiencia del usuario.

Más información

    Descargar ahora

    Todos los campos son obligatorios.

    ¡Listo!

    Haz clic en este enlace para acceder a este recurso en cualquier momento.

    Si bien la utilización de colores es parte de las tareas más simples y comunes para un diseñador web, es probable que para alguien sin experiencia suene realmente complicado. Seguramente piensas que requerirás un amplio conocimiento de programación y un dominio de códigos realmente complejos, pero no hay nada más alejado de la verdad.

    Para ayudarte a conocer el proceso del uso de colores en HTML hemos creado este contenido que te ayudará a elegir una paleta de colores paso a paso y con ejemplos. 

    Los píxeles son las unidades básicas de las imágenes computacionales que generalmente están compuestos por 3 canales (o bytes) que representan el color rojo (Red), verde (Green) y azul (Blue), y cada uno de ellos está compuesto por 8 bits. Es por ello que suele decirse que cada píxel está compuesto por 24 bits. El resultado de esto es que cada byte puede tener un valor que va del 0 al 255 (producto de las 256 combinaciones posibles de 0 y 1 en los 8 bits), siendo 0 la tonalidad más oscura y 255 la más luminosa. 

    Esta es una explicación simplificada del funcionamiento del modelo RGB de color; en él, cada uno de los canales debe tener un valor del 0 al 255, permitiendo hasta 16.777.216 combinaciones de valores de azul, rojo y verde; por tanto, esa misma cantidad colores es posible. 

    Esto significa que cada color puede tener 256 valores diferentes y, por tanto, el mismo número de colores que el modelo de color RGB.

    Los valores se representan de la siguiente manera: de 00 (la intensidad más baja de un color primario) a FF (la intensidad más alta de un color primario). Esto significa que cada código hexadecimal consta de 3 pares o 6 caracteres en total. Estos pueden ser cualquier combinación de diez números (0-9) y seis letras (a-f). En total, hay 16.777.216 combinaciones posibles. Te compartimos algunos de ellos.

    • El código de color hexadecimal del blanco es #FFFFFF, ya que es una mezcla de los tres colores primarios en su máxima intensidad.
    • El código de color hexadecimal del negro es #000000, ya que es una falta de color primario total.
    • El código hexadecimal del rojo es #FF0000, pues requiere una mayor intensidad de color rojo que del resto de los otros dos colores primarios.

    En el diagrama presentado a continuación puedes observar otras combinaciones:

    Colores hexadecimales

    Imagen de Smashing Magazine

    Tabla de colores para HTML en HEX y RGB

    En HTML tienes la opción de utilizar diferentes códigos de color, como RGB y HEX, así como HSL y otros que incluso utilizan el nombre de forma directa y no códigos alfanuméricos.

    Veamos algunos ejemplos de los colores más comunes:

    Color Nombre del color Código de color HEX Código de color RGB
      Blanco #FFFFFF 255, 255, 255
              Plata #C0C0C0 192, 192, 192
              Negro #000000 0, 0, 0
              Rojo #FF0000 255, 0, 0
              Marrón #800000 128, 0, 0
              Amarillo #FFFF00 255, 255, 0
              Oliva #808000 128, 128, 0
              Lima #00FF00 0, 255, 0
              Verde #008000 0, 128, 0
              Aqua #00FFFF 0, 255, 255
              Turquesa #008080 0, 128, 128
              Azul #0000FF 0, 0, 255
              Azul marino #000080 0, 0, 128
              Fucsia #FF00FF 255, 0, 255
              Púrpura #800080 128, 0, 128
              Gris #808080 128, 128, 128
              Rojo oscuro #8B0000 139, 0, 0
              Coral #FF7F50 255, 127, 80
              Dorado #FFD700 255, 215, 00
              Azul cielo #87CEEB 135, 206, 150

    << Tabla de colores HTML para tu sitio web [Plantilla gratis] >> 

    Para emplear de manera más sencilla los códigos de color HTML puedes encontrar algunas aplicaciones y herramientas de diseño web en línea, como los selectores de color y ruedas.

    Por ejemplo, con el selector de color que te mostramos en la siguiente imagen puedes verificar cuáles son los códigos hexadecimales y en RGB o HSL de diferentes colores. Puedes ir probando tonalidades generales como el blanco o negro, hasta colores más profundos, como las gamas de verdes o los azules más brillantes.

    Selector de color con códigos hexadecimales

    Imagen de HTML Color Codes

    Una vez que encuentres un color que te guste, toma nota del código. De esta manera podrás reutilizarlo en varios diseños y canales. Esto es esencial para mantener una consistencia efectiva en tu imagen.

    Ahora que comprendes qué son los colores HTML y los códigos de color, te diremos cómo utilizarlos con éxito.

    Ejemplos sobre cómo utilizar códigos de color en HTML

    Como afirmamos al inicio de este artículo, utilizar códigos de color en HTML es realmente sencillo. Solamente debes conocer la estructura HTML y algunas reglas básicas de programación en este lenguaje para saber cómo hacer el llamado a un color y dárselo a tu contenido.

    1. ¿Cómo indicar color de texto?

    Supongamos que queremos modificar las características del siguiente texto, que consiste en un título y dos párrafos:

    Ejemplo de código en HTMl sin propiedad de color

    Lo primero que queremos hacer es cambiar los colores del texto. Para ello será importante que usemos la propiedad <style="color:         ;">. En el espacio vacío deberás colocar el nombre o código de color que quieras aplicar.

    Supongamos que queremos el título en color azul, el primer párrafo en amarillo y el segundo en gris. Debido a que es nuestro primer intento, utilizaremos los nombres de los colores que HTML es capaz de identificar y relacionar con una tonalidad específica; en este caso <blue>, <yellow> y <gray>:

    Ejemplo de código en HTML con propiedad de color en texto

    2. ¿Cómo indicar color de fondo?

    Como puedes ver en el ejemplo anterior, resulta necesario poner un color de fondo al texto, ya que el amarillo no tiene un buen contraste con el blanco que está detrás, lo cual dificulta la lectura. 

    Para cambiar el color del fondo podemos utilizar la propiedad <style="background-color:         ;">. En el espacio vacío deberás ingresar el color esperado.

    En esta ocasión utilizaremos los códigos de color HEX para dar al fondo un tono amarillo (#FFFF00) en el título, negro (#000000) en el primer párrafo y rojo (#FF0000) en el último:

    Ejemplo de código en HTML con propiedad de color en fondo

    3. ¿Cómo indicar el color de borde?

    Como puedes ver, ahora es más legible nuestro contenido. Sin embargo, también queremos enmarcarlo en un recuadro de otro color. Para llevar a cabo esta tarea debemos utilizar la propiedad <style="border:2px solid         ;">. 

    En esta ocasión utilizaremos el código de color RGB para dar al título un borde color verde, al primer párrafo uno color fucsia y al ultimo un tono aqua. Ten en cuenta que el llamado <2px> hace referencia a que queremos un borde de 2 píxeles, mientras que <solid> indica que queremos un color sólido para el borde. 

    Nuestro código lucirá así:

    Ejemplo de código en HTML con propiedad de color en borde

    Recuerda que en estos casos es necesario poner los valores RGB entre paréntesis y separados por una coma.

    Construyendo un sitio en color

    El color puede ayudarte a enfatizar un elemento en tu página, crear reconocimiento de marca y hacer que tu sitio sea más memorable. Ahora que tienes un conocimiento básico de los códigos de colores HTML, puedes agregar o cambiar el color de tu sitio para crear un diseño atractivo y coherente con la imagen de tu empresa. 

    Si aun así necesitas acompañamiento para diseñar tus páginas web puedes apoyarte en el sistema gratuito de gestión de contenido de CMS Hub, que te hará más sencillo el diseño, creación y puesta en marcha de tu sitio.

    Tipos de colores y combinaciones para una página web

    Temas: HTML

    Artículos relacionados

    Descubre la gama cromática adecuada para crear una mayor interacción en tu sitio web con esta guía gratuita.

      CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

      START FREE OR GET A DEMO