La propiedad CSS Color se utiliza para establecer el color de los elementos HTML. Esta propiedad se utiliza para establecer el color de la fuente, el color de fondo, etc.
El color de un elemento se puede definir de las siguientes maneras:
- Color incorporado
- Formato RGB
- Formato RGBA
- Notación hexadecimal
- LGV
- HSLA
Color incorporado: estos son un conjunto de colores predefinidos que se utilizan por su nombre. Por ejemplo: rojo, azul, verde, etc.
Sintaxis:
h1 {
color: color-name;
}
Ejemplo:
<html>
<head>
<title>CSS color property</title>
<style>
h1 {
color:green;
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Producción:
Formato RGB: El formato RGB (Rojo, Verde, Azul) se usa para definir el color de un elemento HTML especificando el rango de valores R, G, B entre 0 y 255. Por ejemplo: el valor RGB del color rojo es (255, 0, 0), el color verde es (0, 255, 0), el color azul es (0, 0, 255), etc.
Sintaxis:
h1 {
color: rgb(R, G, B);
}
Ejemplo:
<html>
<head>
<title>CSS color property</title>
<style>
h1{
color: rgb(0, 153, 0);
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Producción:
Formato RGBA: El formato RGBA es similar al RGB, pero la diferencia es que RGBA contiene A (Alfa) que especifica la transparencia de los elementos. El valor de alfa se encuentra entre 0,0 y 1,0, donde 0,0. representa totalmente transparente y 1.0 representa no transparente.
Sintaxis:
h1 {
color:rgba(R, G, B, A);
}
Ejemplo:
<html>
<head>
<title>CSS RGBA color property</title>
<style>
h1 {
color:rgba(0, 153, 0, 0.5);
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Producción:
Notación hexadecimal: La notación hexadecimal comienza con el símbolo # seguido de 6 caracteres, cada uno de los cuales va de 0 a F. Por ejemplo: rojo #FF0000, verde #00FF00, azul #0000FF, etc.
Sintaxis:
h1 {
color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}
Ejemplo:
<html>
<head>
<title>CSS hex property</title>
<style>
h1{
color:#009900;
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Producción:
HSL: HSL significa Tono, Saturación y Luminosidad respectivamente. Este formato utiliza el sistema de coordenadas cilíndricas.
- Tono: el tono es el grado de la rueda de colores. Su valor se encuentra entre 0 y 360, donde 0 representa el rojo, 120 representa el verde y 240 representa el color azul.
- Saturación: Toma valor porcentual, donde 100% representa completamente saturado, mientras que 0% representa completamente insaturado (gris).
- Luminosidad: Toma valor porcentual, donde el 100% representa el blanco, mientras que el 0% representa el negro.
Sintaxis:
h1 {
color:hsl(H, S, L);
}
Ejemplo:
<html>
<head>
<title>CSS hsl color property</title>
<style>
h1{
color:hsl(120, 100%, 30%);
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Producción:
HSLA: La propiedad de color HSLA es similar a la propiedad HSL, pero la diferencia es que HSLA contiene A (Alpha) que especifica la transparencia de los elementos. El valor de alfa se encuentra entre 0,0 y 1,0, donde 0,0. representa totalmente transparente y 1.0 representa no transparente.
Sintaxis:
h1 {
color:hsla(H, S, L, A);
}
Ejemplo:
<html>
<head>
<title>CSS hsla color property</title>
<style>
h1 {
color:hsla(120, 100%, 50%, 0.50);
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Producción:
Color del texto: se utiliza para establecer el color del texto.
Sintaxis:
h1 {
color:color_name;
}
Ejemplo:
<html>
<head>
<title>CSS text color property</title>
<style>
h1 {
color:#009900;
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Producción:
Color de fondo: se utiliza para establecer el color de fondo de un elemento HTML.
Sintaxis:
h1 {
background-color:color_name;
}
Ejemplo:
<html>
<head>
<title>CSS background color property</title>
<style>
h1 {
background-color:green;
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Producción:
Color del borde: se utiliza para establecer el color del borde de un elemento. El estilo de borde se utiliza para establecer el tipo de borde.
Sintaxis:
h1 {
border-style:solid/dashed/dotted
border-color:color_name;
}
Ejemplo:
<html>
<head>
<title>CSS border color</title>
<style>
h1 {
border-style:solid;
border-color:green;
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Producción:
Lista de colores: A continuación se muestra la lista de algunos colores CSS.
| Nombre del color | hexadecimal (RGB) | Decimales (RGB) | Color |
|---|---|---|---|
| Rojo | FF0000 | 255, 0, 0 | |
| Rosado | FFC0CB | 255, 192, 203 | |
| Naranja | FFA500 | 255, 165, 0 | |
| Amarillo | FFFF00 | 255, 255, 0 | |
| Violeta | EE82EE | 238, 130, 238 | |
| Verde | 008000 | 0, 128, 0 | |
| Agua | 00FFFF | 0, 255, 255 | |
| Azul | 0000FF | 0, 0, 255 | |
| Marrón | A52A2A | 165, 42, 42 | |
| Blanco | FFFFFF | 255, 255, 255 | |
| Gris | 808080 | 128, 128, 128 | |
| Negro | 000000 | 0, 0, 0 |
Publicación traducida automáticamente
Artículo escrito por ShraddhaVarat y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA