- Armonía de colores en CSS
Imagina que estás trabajando en el desarrollo de un sitio web personal. Utiliza la Rueda de Colores de Adobe para crear una paleta de colores armoniosa. Elige un color principal y dos colores secundarios para tu sitio. Luego, aplica estos colores en el archivo style.css de tu proyecto, usando el color principal para el background-color y los colores secundarios para el color de dos tipos diferentes de texto (por ejemplo, títulos y párrafos).
paleta que usa una combinación análoga:
Color principal (fondo): #F08080 (Coral Claro)
Color secundario 1 (títulos): #DDA0DD (Ciruela)
Color secundario 2 (párrafos): #B0C4DE (Gris Pizarra Claro)
archivo style.css:
body {
background-color: #F08080;
}
h1, h2, h3 {
color: #DDA0DD;
}
p {
color: #B0C4DE;
}
- Identificación y corrección de errores de colores en CSS
Te han asignado corregir un error en un proyecto web donde el texto no es visible debido a un problema de color. El cuerpo de la página tiene background-color: #000000; y el color del texto se ha definido como negro, haciéndolo invisible. Tu tarea es corregir este error cambiando el valor de color a un color visible, como #F6F6F6 u otro color claro, asegurando la legibilidad del texto.
css:
body {
background-color: #000000; /* Fondo negro /
color: #F6F6F6; / Texto gris muy claro para asegurar la legibilidad */
}
- Jugando con colores RGB en CSS
Vamos a experimentar con la representación de colores en RGB en CSS. Elige dos colores que te gusten, uno para el fondo (background-color) y otro para el texto (color). Utiliza la notación hexadecimal RGB para definir estos colores en el archivo style.css. Por ejemplo, puedes usar #FF5733 para un color naranja vibrante y #00FF00 para un verde brillante. Aplica estos colores en el cuerpo de tu página y observa cómo interactúan.
combinación de colores vibrantes:
Color de fondo: Naranja vibrante (#FF5733)
Color de texto: Verde brillante (#00FF00)
archivo style.css:
body {
background-color: #FF5733; /* Naranja vibrante /
color: #00FF00; / Verde brillante */
}
