HTML Color del Texto

Agregar color a su texto HTML es fácil! En este breve tutorial veremos cómo cambiar el color de tu texto HTML con color en Hex los códigos, nombres de colores HTML, RGB y HSL valores.

Color del texto con códigos de color Hex

La forma más común de texto HTML coloración es mediante el uso de códigos de color hexadecimal (código Hex para abreviar). Sólo tienes que añadir un atributo de estilo al elemento de texto que desea de color - un párrafo en el siguiente ejemplo - y el uso de la propiedad de color con su codificación Hex. 

HTML

<body>
  <p style="color:#FF0000";>Red paragraph text</p>
</body>
Demo en CodePen

No tienen un código Hex? No se preocupe, utilice nuestro selector de color examinar millones de colores con códigos de colores hexadecimales, y mucho más.

Color del texto con nombres de colores HTML

Otra forma de color texto de su sitio web es mediante un nombre de color HTML. El código HTML es similar, simplemente reemplace el código Hex en el paso anterior con el nombre del color que desee utilizar (rojo en nuestro ejemplo). Hay 140 colores para elegir, y hemos recopilado una lista que se puede ver aquí. 

HTML

<body>
  <p style="color:red;">Red paragraph text</p>
</body>
Demo en CodePen

Color del texto utilizando los valores de los colores RGB

Usando valores RGB es toda la rabia estos días, pero es tan fácil como los códigos Hex o los nombres de los colores. Introduzca los valores de RGB en el rgb() parámetro después la propiedad color. Usted puede utilizar nuestro tabla de colores obtener los valores RGB además de los códigos Hex. 

HTML

<body>
  <p style="color:rgb(255,0,0);">Red paragraph text</p>
</body>
Demo en CodePen

Cuando se utiliza un valor RGB en su sitio web, también puede especificar la opacidad. En lugar de rgb() utilizar rgba() - la a es para alfa, el canal del color que controla la opacidad, y después de su tres valores de color añadir un cuarto de opacidad, en una escala de 0 - 1 (0 para totalmente transparente, 1 para completamente opaco). 

HTML

<body>
  <p style="color:rgba(255,0,0,0.5);">Red paragraph text</p>
</body>
Demo en CodePen

Color del texto utilizando los valores de los colores HSL

Un cuarto método para añadir color HSL es mediante valores. Similar a la sintaxis que se describe arriba RGB, HSL utiliza la hsl() prefijo y tres valores de tono, saturación y luminosidad. El tono es representado en una escala de 0 a 360, mientras que saturación y luminosidad son un porcentaje entre el 0% y el 100%. 

HTML

<body>
  <p style="color:hsl(0,100%,50%);">Red paragraph text</p>
</body>
Demo en CodePen

Justo como RGB, cuando se utiliza HSL puede modificar la opacidad del color justo en la propiedad color. Utilice el prefijo hsla() e incluyen un cuarto valor entre 0 y 1 para el nivel de opacidad que usted necesita. 

HTML

<body>
  <p style="color:hsla(0,100%,50%,1);">Red paragraph text</p>
</body>
Demo en CodePen