Introducción al nombre del color en HTML

Color Name en HTML juega un papel muy importante en el proceso de diseño web y de aplicaciones. Ayuda a cambiar el aspecto de nuestro sitio web o aplicación. Además, hace que nuestra aplicación sea más atractiva e interactiva. Hay varias formas de definir el Nombre del color en HTML en el formato de codificación HTML. uno puede usar propiedades CSS adicionales para usarlo más efectivamente. Podemos usar el nombre de color HTML en el nivel de la página al incluirlo en la parte del cuerpo y también se puede establecer un color individual para el elemento específico. El nombre del color en HTML se utiliza a propósito para el color del texto, el color de fondo, el color del borde, las sombras, los degradados y muchos más.

Sintaxis

  • Hay varias formas en que podemos usar colores HTML. Veamos uno por uno.
  • El uso muy básico del color HTML es aplicarlo al texto. simplemente use como color de texto para mostrar texto en diferentes colores HTML.

1. Sintaxis del color del texto

color : color_name;

Veamos cómo funcionará esta sintaxis,

Welcome to EDUBCA

En el ejemplo anterior, mostrará el texto Bienvenido a EDUBCA en un color azul como:

  • Con la ayuda de los colores HTML, también es posible agregarlos como color de fondo.

2. Sintaxis de color de fondo

background-color:color_name;

Veamos cómo funcionará esta sintaxis,

La categoría contiene toda la información de diseño que se extiende a través de numerosas subcategorías en el curso de diseño.

  • También es posible agregar un borde de color alrededor de cualquier texto o elemento utilizando el color HTML mediante la siguiente sintaxis:

3. Color de borde Sintaxis: borde

value color_name;

Veamos cómo funcionará esta sintaxis,

EDUCBA free certification course

Tipos de nombre de color en HTML

Hay diferentes formas de definir los nombres de los colores en HTML. Es difícil recordar un nombre diferente en diferentes colores. Por lo tanto, debe decidirse dar algunos valores a diferentes colores. Vamos a ver uno por uno

1. Valor RGB

  • Es una de las formas de definir nombres de color HTML en la combinación de valores de formato de color rojo, verde y azul. ¿Cuál se usa para definir la intensidad del color entre el número 0 y 255?
  • Supongamos que queremos definir un color negro usando la combinación RGB, entonces le gustará RGB (0, 0, 0). Aquí todos los parámetros de color se establecerán en 0. Por lo tanto, mostrará un color negro.
  • Al igual que otro RGB (0, 0, 255) mostrará el color azul, debido a 255 se establece como el valor más alto en azul y el otro es 0.
  • Si vamos a 3 valores iguales de RGB, generará sombras de un color gris.

Ejemplo: RGB (0, 0, 0) para el color más oscuro, donde RGB (255, 255, 255) para el color más claro.

2. Valor HEX

  • Es uno de los formatos más utilizados de un nombre de color en HTML en el que el nombre del color se definirá en el formato de un valor hexadecimal.
  • El formato #rrggbb incluye valores de RR para rojo, gg para verde y bb para azul se colocan entre 00 toff valor hexadecimal.
  • Consideremos un ejemplo que define el color # 00ff00. por lo tanto, estos valores se generarán en color verde porque el verde contiene el valor más alto (ff) donde el otro se establecerá en 00.

3. Valor HSL

  • Otro formato para definir el color HTML en forma de tono, saturación, luminosidad.
  • Ahora veremos todos los términos uno por uno. El tono se define como el grado de color que se encuentra entre 0 y 360. en el que 0 para rojo, 120 para verde y 240 para azul.
  • La saturación define el valor del color en el porcentaje, en el que 0% dice que el tono de gris es 100% para el color completo.
  • La claridad también funciona como el porcentaje que define el 0% para el negro, el 50% no es para la luz ni la oscuridad, donde el 100% es para el blanco.

4. valor RGBA

  • Este tipo de color HTML define la extensión para el color RGB, incluido el valor alfa. Donde alfa se utiliza para definir la opacidad del color.
  • El valor alfa se encuentra entre 0.0 (totalmente transparente) a 1.0 (no es transparente en absoluto)
  • Ejemplo es rgba (255, 99, 71, 0)

5. Valor HSLA

  • Funciona igual que el valor de los colores HSL, además del valor alfa para definir la opacidad del color.
  • hsla (8, 100%, 80%, 0) para un color totalmente transparente.
  • hsla (8, 100%, 80%, 0.9) para un color no tan transparente.

Ejemplos de nombre de color en HTML

Veamos cómo se usa el nombre del color en HTML con la ayuda de algunos ejemplos mencionados a continuación:

Ejemplo 1

Consideremos un ejemplo general que muestra cómo se usará el nombre de color de ejemplo en HTML:

Código HTML:



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun

Aprende más del fracaso que del éxito. No dejes que te detenga. El fracaso construye el carácter. Si está trabajando en algo que realmente le importa, no tiene que ser presionado. La visión te atrae

Salida:

Ejemplo # 2

Ahora estamos tomando otro ejemplo que definirá todos los tipos de color HTML de la siguiente manera:

Código HTML:



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade

Salida:

En el ejemplo anterior, podemos ver el uso de diferentes tipos de color HTML y cómo se nombran en HTML.

Ejemplo # 3

Un uso más del color HTML es definir un borde para el elemento, que es el siguiente:

En el ejemplo, aquí podemos agregar un borde a su cuerpo de código, cambiando también el fondo y el color del texto.

Código HTML:

La teoría autorrealizada habla de recompensas intrínsecas inherentes al desempeño de la tarea, como la satisfacción laboral, el sentimiento de logro, etc.

Salida:

Conclusión

Descubrimos que los colores HTML se definen con diferentes nombres, valores porcentuales, valores hexadecimales, valores alfa y muchos más. El nombre del color en HTML se usa para colorear el texto, el fondo, el borde y las gradaciones. Existen diferentes tipos para definir el nombre de color HTML como RGB, hexadecimal, hsl, rgba, hsla.

Artículos recomendados

Esta es una guía para Color Name en HTML. Aquí discutimos la introducción, Tipos del nombre del color en HTML junto con ejemplos, sintaxis y códigos HTML. También puede consultar nuestros otros artículos sugeridos para obtener más información:

  1. Atributo de estilo HTML
  2. Etiquetas de tabla HTML
  3. Enlace de imagen en HTML
  4. Crear tablas en HTML
  5. Eventos HTML

Categoría:

Herramientas de desarrollo web