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>
HTML Color de Fondo
Sitios Web hoy en día son más audaces y más brillante que nunca, y con
este tutorial rápido usted también puede aprender a dar vida a tu sitio web
con HTML color de fondo magia, utilizando códigos de color Hex, nombres
de colores HTML, RGB y HSL valores.
Color de fondo mediante códigos de color Hex
Colorear un fondo de página web es en realidad bastante simple. La
primera y más popular forma es mediante el uso de un código de color Hex
con la propiedad color de fondo. Aquí aplicamos un color Hex directamente
en el HTML <body> elemento usando el atributo de estilo.
HTML
<body style="background-color:#FF0000;">
</body>
DEMO EN CODEPEN
Este mismo método se puede utilizar para el estilo de casi cualquier
elemento HTML, pero tenga en cuenta su comportamiento puede variar en
función de si son elementos en línea o nivel de bloque. Utilice
nuestros selector de color o tabla de colores de encontrar un código de color
Hex.
Color de fondo mediante nombres de colores
HTML
Los códigos de color Hex puede ser el más popular, pero son sólo uno de
los muchos métodos disponibles para color un elemento HTML. Una
segunda forma es utilizar un nombre de color HTML; basta con sustituir el
código Hex con uno de los 140 nombres de colores compatibles y listo.
HTML
<body style="background-color:red;">
</body>
DEMO EN CODEPEN
Aquí está una lista útil de los 140 nombres de colores HTML con sus
correspondientes valores Hex y RGB para referencia.
Color de fondo mediante valores de color RGB
Valores RGB también se puede utilizar para agregar un color de fondo a
los elementos HTML. Utilizando el mismo atributo de estilo al igual que
antes, sustituir el código Hex o nombre de color con un formato correcto
valor RGB (asegúrese de que se ha de encerrar entre paréntesis y prefijo
con una minúscula 'rgb').
HTML
<body style="background-color:rgb(255,0,0);">
</body>
DEMO EN CODEPEN
Cuando se utilizan valores RGB en HTML tiene la opción adicional de
especificar el nivel de opacidad. Con el prefijo rgba() - la 'a' para el canal
alfa, que controla la transparencia, puede insertar un cuarto valor entre 0 y
1, 0 para totalmente transparente y 1 para totalmente opaca (utilizar
valores decimales para los niveles entre).
HTML
<body style="background-color:rgba(255,0,0,0.5);">
</body>
DEMO EN CODEPEN
HSL color de fondo mediante valores de color
Menos populares pero igualmente potente, HSL valores ahora son
compatibles con muchos los exploradores modernos. Si no está
familiarizado con HSL (que significa de tono, saturación y luminosidad)
dirígete a Wikipedia para ver un resumen de las razones por las que es tan
increíble. Si desea usar HTML para un color de fondo, siga la misma
sintaxis que los valores RGB, pero utilizando el hsl() prefijo.
HTML
<body style="background-color:hsl(0,100%,50%);">
</body>
DEMO EN CODEPEN
Al igual que sus hermanos RGB, HSL también se puede transmitir un canal
alfa para controlar la opacidad. Utilice los aceros hsla() prefijo e insertar un
cuarto valor entre 0 y 1.
HTML
<body style="background-color:hsla(0,100%,50%,0.5);" >
</body>
