La propiedad de color en CSS se usa para establecer el color del texto, el fondo de la página web y también para establecer el color de los bordes.
Sintaxis
color: color/initial/inherit;
Valores de propiedad:
1. color: Establecerá el color al texto que el programador especifique en el archivo CSS. El color se puede configurar para el texto en 4 formas:
2. nombre del color: especificando directamente el nombre del color como azul, verde, amarillo, blanco, negro, etc.
Sintaxis:
color: name-of-the-color;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS color-name property
</title>
<style>
h1 {
color: black;
}
p {
font-size: 20px;
color: green;
}
.gfg1 {
font-size: 20px;
color: red;
}
.gfg2 {
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<h1>
CSS Color Property
</h1>
<p>
GEEKSFORGEEKS: A computer science portal
</p>
<p class="gfg1">
GEEKSFORGEEKS: A computer science portal
</p>
<p class="gfg2">
GEEKSFORGEEKS: A computer science portal
</p>
</body>
</html>
Producción:
3. Valor RGB/RGBA: aquí R significa rojo, G significa verde y B significa azul. El color se asignará al texto utilizando el rango de estos valores. Estos valores van de 0 a 255.
Sintaxis:
color: RGB(value, value, value);
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS RGB value property
</title>
<style>
h1 {
color: RGB(0, 0, 0);
}
p {
color: RGB(0, 150, 0);
}
.gfg1 {
color: RGB(255, 0, 0);
}
.gfg2 {
color: RGB(0, 0, 255);
}
</style>
</head>
<body>
<h1>
CSS color property
</h1>
<p>
RGB(0, 150, 0)-This is the code for green color.
</p>
<p class="gfg1">
RGB(255, 0, 0)-This is the code for red color.
</p>
<p class="gfg2">
RGB(0, 0, 255)-This is the code for blue color.
</p>
</body>
</html>
Producción:
4. Valor Hexadecimal: Representa el valor del color en formato hexadecimal. Debe comenzar con el prefijo #. Estos valores oscilan entre #000000 y #FFFFFF.
Sintaxis:
color: #RRGGBB;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS Hexa-decimal value property
</title>
<style>
body {
background-color: rgb(200, 200, 200);
}
h1 {
color: #000000;
}
p {
color: #00aa00;
}
.gfg1 {
color: #ff0000;
}
.gfg2 {
color: #0000ff;
}
</style>
</head>
<body>
<h1>
CSS color property
</h1>
<p>
#00AA00-This is the code for green color.
</p>
<p class="gfg1">
#FF0000-This is the code for red color.
</p>
<p class="gfg2">
#0000FF-This is the code for blue color.
</p>
</body>
</html>
Producción:
5. Valores HSL/HSLA: HSL significa tono, saturación y luminosidad. El rango de tono será de (0 a 360 grados), la saturación significa que el efecto gris varía de (0 a 100 %) y la luminosidad significa el efecto de la luz que varía de (0 a 100 %).
Sintaxis:
color: HSL(value, value, value);
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS HSL value property
</title>
<style>
body {
background-color: white;
}
h1 {
color: HSL(0, 0, 0);
}
p {
color: HSL(147, 50%, 47%);
}
.gfg1 {
color: HSL(0, 100%, 50%);
}
.gfg2 {
color: HSL(240, 100%, 50%);
}
</style>
</head>
<body>
<h1>
CSS Color property
</h1>
<p>
HSL(147, 50%, 47%)-This is the code for green color.
</p>
<p class="gfg1">
HSL(0, 100%, 50%)-This is the code for red color.
</p>
<p class="gfg2">
HSL(240, 100%, 50%)-This is the code for blue color.
</p>
</body>
</html>
Producción:
6. inicial: este valor establecerá el valor del color en su valor predeterminado.
Sintaxis:
color: initial;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS color-name property
</title>
<!-- CSS style-->
<style>
h1 {
color: black;
}
p {
font-size: 20px;
color: initial;
}
</style>
</head>
<body>
<h1>
CSS Color Property
</h1>
<p>
GEEKSFORGEEKS: A computer science portal
</p>
</body>
</html>
Producción:
7. heredar: Heredará la propiedad del color de su elemento padre.
Navegadores compatibles: los navegadores compatibles con la propiedad de color son:
- Google Chrome 1.0
- Internet Explorer 3.0
- Firefox 1.0
- Safari 1.0
- Ópera 3.5
Publicación traducida automáticamente
Artículo escrito por snigdha_yambadwar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA