HTML permite a los desarrolladores web usar diferentes colores en las páginas web para que sean atractivos. Los colores son una herramienta esencial para crear una mejor apariencia para nuestra aplicación. Las páginas web que tienen colores interactivos son los más probables y captan fácilmente la atención del usuario. También ayuda a los usuarios a comunicarse con la aplicación y comprender la acción. Además, HTML ofrece varios métodos para aplicar color al contenido.

Esta guía demostrará:

• ¿Qué son los códigos de color HTML??
• Cómo aplicar colores en HTML?
• Método 1: Aplicación de colores en HTML utilizando valores de código hexadecimal
• Método 2: Aplicación de colores en HTML usando RGB
• Método 3: Aplicar colores en HTML usando HSL

Empecemos!

¿Qué son los códigos de color HTML??

Los códigos de color HTML son los identificadores para aplicar colores en la página web. Los códigos de color HTML comunes son los nombres de los teclados ","Código hexadecimal","RGB (rojo, verde, azul)", y "HSL (tono, saturación, ligereza)".

Cómo aplicar colores en HTML?

En HTML, hay tres métodos para aplicar colores a una página web utilizando:

• Valores de código hexadecimal
• RGB
• HSL

Discutiremos a cada uno de ellos con la ayuda de la implementación. En primer lugar, se requiere crear un archivo HTML.

Ejemplo: Aplicar colores en HTML usando nombres de color
En el archivo html, agregue un divs dentro de la etiqueta del cuerpo. Establezca el nombre de la clase Div como "envase". Cree dos elementos para el encabezado y el párrafo dentro del Div:

HOLA MUNDO!

El párrafo comienza desde aquí ..

Los elementos HTML agregados se verán así:

Hagamos que la página web sea más atractiva aplicando algunos estilos. Para hacerlo, incluya la etiqueta en la sección Head de archivo HTML. Dentro de la etiqueta de estilo, aplique estilos CSS para el Div como este:

El código proporcionado anteriormente contiene las propiedades CSS para la clase DIV, que se enumeran a continuación:

• ".envase"Representa la clase de Div.
• "color de fondoSe utiliza la propiedad para aplicar el color de fondo de Div.
• "Margen: Auto"Aplica margen desde todos los lados del div.
• "TEXT-ALEGIO: Centro"Alinea el texto en el centro del div.
• "altura" y "ancho"Se puede asignar de acuerdo con las preferencias del usuario.

Producción

Como podemos ver, el "color de fondo"La propiedad del Div ahora se cambia a"cardo"De blanco. Así es como aplicamos los colores a nuestras páginas web simplemente usando nombres de color. Sin embargo, para aprovechar diferentes tonos de color, hay tres métodos para aplicar colores utilizando códigos de color.

Método 1: Aplicación de colores en HTML utilizando valores de código hexadecimal

"Valores de código hexadecimal"Son los valores hexadecimales que se pueden usar para la aplicación de color en HTML.

Sintaxis
Puede escribir código de color en este formato:

#rrggbb

En la sintaxis dada anteriormente, "RR"Es para Red,"gg"Es para Green, y"cama y desayuno"Es para azul.

Eche un vistazo a la tabla a continuación que representa el color y sus valores hexadecimales:

Color	Valor del código hexadecimal
Rojo	#FF0000
Azul	#0000ff
Verde	#00FF00
Blanco	#ffffff
Negro	#000000

Ejemplo
Continuemos el mismo ejemplo y cambiemos el color del Div a rojo usando un valor de código hexadecimal. Para hacerlo, cambie el valor de color de fondo de "cardo" a "#FF0000" como sigue:

Color de fondo: #FF0000;

Se puede observar que el color de fondo del div se cambia con éxito a rojo:

Método 2: Aplicación de colores en HTML usando el código RGB

"RGB"Es el esquema de color o modelo que usa colores primarios rojos, verdes y azules de la luz. Se pueden agregar diferentes valores de estos colores para generar múltiples colores.

Sintaxis
El esquema RGB funciona de acuerdo con la fórmula dada:

RGB (rojo, azul, verde)

Echemos un vistazo a algunos colores con sus valores RGB:

Colores	Código de color RGB
Rojo	RGB (255,0,0)
Verde	RGB (0,255,0)
Azul	RGB (0,0,255)
Blanco	RGB (255,255,255)
Azul	RGB (0,0,0)

Ejemplo
Aquí está la demostración de cambiar el color de fondo de nuestro div a "amarillo"Al aplicar el código RGB. El "color de fondo"Está configurado como"RGB (0,0,255)", Que es el código de color RGB amarillo:

Color de fondo: RGB (255, 255, 0);

Después de asignar el valor RGB (255,255,0) a la propiedad de color de fondo, verifique los resultados a continuación:

Método 3: Aplicar colores en HTML usando HSL

En HTML, los colores también se pueden definir usando "HSL" HUE, SAtury, y Lvigencia. Para este propósito, es necesario utilizar el método de código de color HSL.

Sintaxis
El formato del método de color hsl () se cita a continuación:

HSL (tono, saturación, ligereza)

En la rueda de color RGB, cada color denota un ángulo y un valor porcentual para los factores que se cotizan por debajo:

• Matiz: Se usa para representar el grado, de 0 a 360 en la rueda de color RGB.
• Saturación: Es el valor porcentual, donde el 0% significa un tono gris, y el 100% es todo color.
• Ligereza: Es el valor porcentual, donde el 0% indica negro, y el 100% es para blanco.

Ejemplo
Cambiemos el mencionado anteriormente "div"Color a un tono de verde que tiene un tono"de 106"Grados, saturación" de 73%"Y ligereza" de 58%":

color de fondo: HSL (106, 73%, 58%);

El resultado se muestra a continuación:

Aquí tienes! Has aprendido los tres métodos para aplicar colores en HTML.

Conclusión

Los códigos de color HTML son identificadores para aplicar diferentes colores. Además de usar solo el nombre del color, HTML nos permite utilizar tres métodos: valores de código hexadecimal, colores RGB y HSL. Puede utilizar estos colores en cualquier elemento HTML estableciendo los valores de estos códigos. Este artículo demostró los métodos para aplicar colores en HTML.