Introducción a los colores HTML

Este artículo cubre cómo usar colores en el sitio web usando HTML de manera simple y fácil. Los colores juegan un papel importante en la creación de sitios web para verse y sentirse bien. No hay una etiqueta HTML integrada en su lugar, sino que utiliza el atributo de estilo o la propiedad de color. Precisamente, los colores se incrustan en los elementos HTML utilizando la Hoja de estilo en cascada (CSS). Los colores le dan un aspecto elegante a la página web. Agregar colores a la página web incluye establecer colores de fondo, tablas, párrafos, etc.

¿Cómo establecer un color de fondo en HTML?

Hacer que el color de fondo brille hace que el sitio web se vea bonito y audaz. Se realiza mediante el uso de colores, códigos de color hexadecimales. Valores de color RGB y RGBA (valor alfa 0 a 1).

El color hexadecimal se aplica directamente al código HTML utilizando el atributo Estilo dentro del elemento del cuerpo del HTML. Hex es una combinación de números y letras. A continuación se muestra el ejemplo que ilustra el color de fondo en la página web.

My Sample

HTML BG Color

This page is a demo


My Sample

HTML BG Color

This page is a demo


My Sample

HTML BG Color

This page is a demo

Fragmentos de código:

Para agregar color de fondo, puede usar el atributo bgcolor para mostrar. Es compatible con todos los navegadores, excepto en HTML 5.

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

¿Cómo aplicar color al texto en HTML?

Aplicar color al texto HTML es bastante fácil, podemos agregar / cambiar el color del texto aplicando tres formas, a saber, color hexadecimal, valores HSL y nombres de colores. Las siguientes son las tres técnicas diferentes para aplicar color a las páginas web correspondientes.

1. Nombres de colores

Esto es bastante simple mediante el uso de nombres de color en inglés cuando la aplicación es sencilla, se utilizan estos nombres de color. Especificar nombres de colores son métodos directos y W3C ha anunciado 16 colores básicos (negro, amarillo, rojo, granate, gris, lima, verde, oliva, plata, aguamarina, azul, azul marino, blanco, púrpura, fucsia, verde azulado)

2. HSL

Saturación de matiz y valores de color de luminosidad. El tono se define en 0 a 360 grados, saturación y luminosidad de 0 a 100%.

3. Color hexadecimal

Para obtener un resultado preciso se aplica un número hexadecimal de seis dígitos. Para elaborar los primeros dos dígitos denotan Rojo, los siguientes dos denotan Verde, los otros dos denotan el valor Azul y van precedidos por '#'.

El siguiente ejemplo explica las diferentes formas de aplicar colores a los documentos.


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU

    EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU

Salida:

Existen diferentes métodos para hacer el color del texto, ya que HTML tiene muchas aplicaciones personalizables.

  1. Aplicando la sección de Estilo
  2. crear una hoja de estilo CSS individual
  3. Envolviendo el texto

¿Cómo aplicar el color del texto usando la sección?

Veamos varios métodos para usar colores HTML:

1. Ajuste usando colores HTML

El siguiente código cambia el color del texto en el párrafo con códigos HTML simples. Hay 140 nombres de colores para colorear los sitios web. El siguiente código muestra cómo aplicar el color del texto usando la sección.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Este contenido es muy claro.

texto de párrafo rosa

Salida:

2. Usando HEXCOLOR

Nuevamente, este ejemplo toma la sección de estilo para declarar el color hexadecimal seguido de un símbolo '#'.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Hola Mundo

Texto del párrafo hexa

Salida:

3. Usando el color RGB

El rojo, el verde y el azul usan 8 bits cada uno y su valor varía de 0 a 255, lo que produce varios colores. El siguiente ejemplo elige el color RGB por sus valores.



Color Picker

Texto de párrafo azul

Salida:

4. Método usando la hoja de estilo



Style Sheet in HTML
@import url("/examples/css/style.css");
p (
color: green;
font-size: 26px;
)

The styles for Html documents



Style Sheet in HTML
@import url("/examples/css/style.css");
p (
color: green;
font-size: 26px;
)

The styles for Html documents



Style Sheet in HTML
@import url("/examples/css/style.css");
p (
color: green;
font-size: 26px;
)

The styles for Html documents

Cada etiqueta se diseñará con colores.

Salida:

5. Crear estilo CSS individual

archivo .html




CSS style sheet




CSS style sheet




CSS style sheet

Múltiple documento HTMl.

¡Hola Mundo!

Archivo CSS externo lcolor.css

.lcolor ( font-size: 40px;
color:red )

Salida:

¿Cómo configurar el color del borde en HTML?

Se realiza utilizando un atributo color del borde = "". Se hace usando el elemento HTML

e incluso podemos crear efectos 3D. El color del borde se aplica utilizando diferentes atributos como border = "width", bordercolor = "color def", bordercolorlight = "". CSS tiene algunas propiedades de borde mejoradas que ayudan a crear bordes. El siguiente ejemplo muestra la configuración de un color de borde único para la tabla correspondiente. aquí denota fila de tabla y
denota datos de la tabla y se comienza a usar etiqueta. Y el borde para ellos se aplica usando su ancho y colores




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California


Chicago
new york
Texas
California


Chicago
new york
Texas
California


Chicago
new york
Texas
California



Chicago
new york
Texas
California

Salida:

Ahora veamos la configuración de dos bordes de color por separado. El siguiente código utiliza el atributo de tabla con sus elementos.



Samsung Nokia Apple Iphone Xiami Redmi



Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi

Salida:

Usando etiqueta

Se utiliza para agrupar todos los elementos y ayuda a la vista de una página web en su posición particular. En el siguiente código, hemos usado dos, uno para un párrafo y otro para implementar el atributo de estilo al establecer píxeles de borde y el grosor aumenta al dar el ancho y hemos agregado relleno para demostrarlos a la izquierda.



Sample border color using div

La naturaleza es hermosa

div con un color de borde.

Salida:

Ejemplo: Esto explica cómo establecer el color para el relleno y el margen usando las etiquetas de clase y lista.



Borders
UL (
background: Green;
margin: 10px 10px 5px 5px;
padding: 4px 4px 4px 4px;
)
LI (
color: red;
background:yellow;
margin: 11px 11px 7px 6px;
padding: 10px 0px 10px 10px;
list-style: none
)
LI.colorbord (
border-style: dashed;
border-width: small;
border-color: orange;
)


DOM model
Document object model helps in creating document tree



    Borders
    UL (
    background: Green;
    margin: 10px 10px 5px 5px;
    padding: 4px 4px 4px 4px;
    )
    LI (
    color: red;
    background:yellow;
    margin: 11px 11px 7px 6px;
    padding: 10px 0px 10px 10px;
    list-style: none
    )
    LI.colorbord (
    border-style: dashed;
    border-width: small;
    border-color: orange;
    )


    DOM model
    Document object model helps in creating document tree


  • Borders
    UL (
    background: Green;
    margin: 10px 10px 5px 5px;
    padding: 4px 4px 4px 4px;
    )
    LI (
    color: red;
    background:yellow;
    margin: 11px 11px 7px 6px;
    padding: 10px 0px 10px 10px;
    list-style: none
    )
    LI.colorbord (
    border-style: dashed;
    border-width: small;
    border-color: orange;
    )


    DOM model
    Document object model helps in creating document tree


  • Borders
    UL (
    background: Green;
    margin: 10px 10px 5px 5px;
    padding: 4px 4px 4px 4px;
    )
    LI (
    color: red;
    background:yellow;
    margin: 11px 11px 7px 6px;
    padding: 10px 0px 10px 10px;
    list-style: none
    )
    LI.colorbord (
    border-style: dashed;
    border-width: small;
    border-color: orange;
    )


    DOM model
    Document object model helps in creating document tree



Borders
UL (
background: Green;
margin: 10px 10px 5px 5px;
padding: 4px 4px 4px 4px;
)
LI (
color: red;
background:yellow;
margin: 11px 11px 7px 6px;
padding: 10px 0px 10px 10px;
list-style: none
)
LI.colorbord (
border-style: dashed;
border-width: small;
border-color: orange;
)


DOM model
Document object model helps in creating document tree

Salida:

¿Cómo especificar el color usando valores en HTML?

Los valores básicos de color varían de 0 a 255 para rojo, azul, verde. El valor del color es importante para dar ligereza.

La siguiente tabla muestra valores de muestra para los colores

Ejemplo: El siguiente ejemplo muestra diferentes valores de color en su configuración de fondo.

Técnicas de minería de datos es entender un patrón

Clasificación


Predicción


Regresión


Clasificación, técnicas de predicción

Colores HTML


Colores de la mesa

Salida:

¿Cómo usar los valores de color RGB en HTML?

RGB denota los colores rojo verde azul directamente y utiliza la función RGB. Toma esos tres valores como parámetros y se declara como entero a veces en porcentaje. Cualquiera que sea el color que queramos, su intensidad tiene un valor 255 más alto, ya que un valor entero cae entre o y 255. Por ejemplo, para tener un color azul se prefiere denotar (0, 0, 255). aquí los dos primeros valores están marcados como 0, 0 y el último valor es 255 para azul.

Ejemplo: color RGB



div (
background-color: rgb(255, 0, 180);
color: rgb(0, 255, 255);
padding: 30px;
)

Norway the most beautiful place it's a Scandinavian Country.



div (
background-color: rgb(255, 0, 180);
color: rgb(0, 255, 255);
padding: 30px;
)

Norway the most beautiful place it's a Scandinavian Country.



div (
background-color: rgb(255, 0, 180);
color: rgb(0, 255, 255);
padding: 30px;
)

Norway the most beautiful place it's a Scandinavian Country.

Es el país más caro del mundo, Oslo es la capital de esta ciudad verde.

Salida:

Cómo especificar la claridad de los colores en HTML

La luminosidad del color se define por el brillo que preferimos que se mida en porcentaje. La mayoría de los diseñadores web desean usar ligereza que RGB, que se puede ajustar según los requisitos. Aquí un negro establece el brillo en 0% y el blanco establece en 100%. Se especifica utilizando la función hsl ().



div (
background-color: hsl(150, 50%, 60%);
color: hsl(100%, 0%, 0%);
padding: 30px;
)

Norway the most beautiful place its an Scandinavian Country.



div (
background-color: hsl(150, 50%, 60%);
color: hsl(100%, 0%, 0%);
padding: 30px;
)

Norway the most beautiful place its an Scandinavian Country.



div (
background-color: hsl(150, 50%, 60%);
color: hsl(100%, 0%, 0%);
padding: 30px;
)

Norway the most beautiful place its an Scandinavian Country.

Es el país más caro del mundo, Oslo es la capital de esta ciudad verde.

Salida:

Puede probar con diferentes valores de color en el ejemplo anterior.

Conclusión

Por lo tanto, para concluir, hemos visto que esto tiene diferentes propiedades. En días anteriores, el desarrollo web tenía muchas formas de especificar colores para su sitio web y hoy en día los colores más populares son los códigos de color RGB y Hex (RGB es bien conocido). Existen diferentes aplicaciones donde los colores se implementan como una escala deslizante, paleta de colores, etc.

Artículos recomendados

Esta es una guía de colores HTML. Aquí discutimos la Introducción, Cómo establecer un color de fondo en HTML, Cómo aplicar color al texto en HTML, etc. También puede consultar nuestros otros artículos sugeridos para obtener más información.

  1. Etiquetas de tabla HTML
  2. Crear tablas en HTML
  3. Estilos de fuentes HTML
  4. Elementos de formulario HTML
  5. Programa para crear un selector de color HTML (ejemplo)
  6. ¿Cómo implementar color y cambiar el estilo en Matlab?
  7. Cómo cargar archivos en PHP con ejemplos

Categoría:

Herramientas de desarrollo web