Los colores se utilizan para hacer la página más atractiva. Estos son los diferentes estilos que se pueden utilizar para crear nuevos colores mediante la combinación de diferentes colores.
- Estilo Hexadecimal: En este estilo, definimos el color en número hexadecimal de 6 dígitos (de 0 a F). Se denota por ‘#’. Los dos primeros dígitos indican color rojo, los dos siguientes color verde y los dos últimos color azul.
Ejemplos : si queremos que todas las etiquetas ‘h1’ sean de color púrpura.
h1{
color:#00FF00;
}
- Estilo RGB [Rojo Verde Azul]: En esto necesitamos dar 3 números que indiquen la cantidad de colores rojo, verde y azul respectivamente requeridos en el color mezclado. El rango de cada color es de 0 a 255.
Ejemplo : Si queremos que todas las etiquetas ‘h1’ sean de color verde.
h1{
color:rgb(0, 255, 0);
}
Note: rgba(0, 0, 0) is Black color and rgb(255, 255, 255) is White color.
- Estilo RGBA [Red Green Blue Alpha]: Este estilo nos permite hacer que el color sea transparente según nuestra voluntad. Alfa indica el grado de transparencia. El rango de verde, azul y rojo es de 0 a 255 y el de alfa es de 0 a 1.
Ejemplo : Si queremos que todas las etiquetas ‘h1’ sean de color verde.
h1{
color:rgba(11, 99, 150, 1);
}
- Colores HSL: Aquí ‘H’ representa matiz , ‘S’ saturación y ‘L’ luminosidad . Los valores de color HSL se especifican como:
Sintaxis :
hsl(hue, saturation, lightness)
Valor de colores HSL:
- Hue es el color de la imagen en sí. Su rango es de 0 a 360. 0 es para rojo, 120 es para verde y 240 es para azul.
- La saturación es la intensidad/pureza del matiz. 0% es para un tono de gris y 100% es el color completo.
Cuando el color está completamente saturado, el color se considera en la versión más pura/verdadera. - La luminosidad es el brillo del espacio de color. 0% es para negro, 100% es para blanco.
html
<!-- Write HTML code here -->
<head>
<title>GeeksforGeeks</title>
<style type="text/css">
h1{
color:#0FFFF0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
}
h4{
color:rgb(0, 255, 0);
background-color: hsl(150, 20%, 40%);
color: hsl(360, 30%, 90%);
}
li{
color:rgba(11, 99, 150, 1);
background-color: hsl(250, 45%, 60%);
color: hsl(175, 35%, 87%);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h4>Programming Languages</h4>
<ul>
<li>Java</li>
<li>C++</li>
<li>C</li>
</ul>
</body>
</html>
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari