06-Colores en CSS: Dale Vida a Tu Diseño 🌈

---

Colores en CSS

• Colors en CSS
• Nombres de Color CSS
• Color de Fondo CSS
• Color de Texto CSS
• Color de Bordes CSS
• Valores de Colores CSS

---

Colors en CSS

En CSS, los colores son fundamentales para el diseño visual de las páginas web. Se pueden aplicar a texto, fondos, bordes, y otros elementos. Los colores pueden ser definidos usando diferentes métodos, como nombres de colores, valores hexadecimales, valores RGB, y HSL.

---

Nombres de Color CSS

CSS proporciona una lista de nombres de colores predefinidos que se pueden usar directamente en las hojas de estilo. Estos nombres representan colores comunes como "red", "blue", "green", y se pueden utilizar para estilizar elementos sin necesidad de especificar un valor hexadecimal o RGB.

Ejemplos Visuales

Texto en Rojo

Texto en Azul

Texto en Verde

Texto en Naranja

Código del ejemplo visual

<div style="background-color: red; padding: 20px; border-radius: 5px;">
    <p style="color: white; font-size: 1.5rem;">Texto en Rojo</p>
</div>

<div style="background-color: blue; padding: 20px; border-radius: 5px;">
    <p style="color: white; font-size: 1.5rem;">Texto en Azul</p>
</div>

<div style="background-color: green; padding: 20px; border-radius: 5px;">
    <p style="color: white; font-size: 1.5rem;">Texto en Verde</p>
</div>

<div style="background-color: orange; padding: 20px; border-radius: 5px;">
    <p style="color: white; font-size: 1.5rem;">Texto en Naranja</p>
</div>
            

---

Color de Fondo CSS

El color de fondo en CSS se establece utilizando la propiedad "background-color". Esto permite a los desarrolladores aplicar un color a la parte de fondo de un elemento, lo que puede mejorar la estética y la legibilidad de la página web.

Ejemplos Visuales

Fondo en Azul Claro

Fondo en Coral

Fondo en Lavanda

Fondo en Caqui

Código del ejemplo visual

<div style="background-color: lightblue; padding: 20px; border-radius: 5px;">
    <p style="color: black; font-size: 1.5rem;">Fondo en Azul Claro</p>
</div>

<div style="background-color: coral; padding: 20px; border-radius: 5px;">
    <p style="color: black; font-size: 1.5rem;">Fondo en Coral</p>
</div>

<div style="background-color: lavender; padding: 20px; border-radius: 5px;">
    <p style="color: black; font-size: 1.5rem;">Fondo en Lavanda</p>
</div>

<div style="background-color: khaki; padding: 20px; border-radius: 5px;">
    <p style="color: black; font-size: 1.5rem;">Fondo en Caqui</p>
</div>
            

---

Color de Texto CSS

La propiedad "color" en CSS se utiliza para establecer el color del texto dentro de un elemento. Esto es crucial para asegurar que el texto sea legible y visualmente atractivo en diferentes fondos.

Ejemplos Visuales

Texto en Rojo

Texto en Verde

Texto en Azul

Texto en Naranja

Código del ejemplo visual

<div style="background-color: white; padding: 20px; border-radius: 5px;">
    <p style="color: red; font-size: 1.5rem;">Texto en Rojo</p>
</div>

<div style="background-color: white; padding: 20px; border-radius: 5px;">
    <p style="color: green; font-size: 1.5rem;">Texto en Verde</p>
</div>

<div style="background-color: white; padding: 20px; border-radius: 5px;">
    <p style="color: blue; font-size: 1.5rem;">Texto en Azul</p>
</div>

<div style="background-color: white; padding: 20px; border-radius: 5px;">
    <p style="color: orange; font-size: 1.5rem;">Texto en Naranja</p>
</div>
            

---

Color de Bordes CSS

Los bordes en CSS se pueden estilizar usando la propiedad "border-color", que define el color de los bordes de un elemento. Esto permite a los diseñadores agregar un contraste visual entre los elementos y sus fondos.

Ejemplos Visuales

Ejemplo con borde rojo

Ejemplo con borde verde

Ejemplo con borde azul

Ejemplo con borde naranja

Código del ejemplo visual

<div style="border: 5px solid red; padding: 20px; border-radius: 5px;">
    <p>Ejemplo con borde rojo</p>
</div>

<div style="border: 5px solid green; padding: 20px; border-radius: 5px;">
    <p>Ejemplo con borde verde</p>
</div>

<div style="border: 5px solid blue; padding: 20px; border-radius: 5px;">
    <p>Ejemplo con borde azul</p>
</div>

<div style="border: 5px solid orange; padding: 20px; border-radius: 5px;">
    <p>Ejemplo con borde naranja</p>
</div>
            

---

Valores de Colores CSS

En CSS, los colores se pueden definir usando diferentes formatos: nombres de colores, valores hexadecimales (como #ff0000 para rojo), valores RGB (como rgb(255, 0, 0)), y HSL (como hsl(0, 100%, 50%)). Cada método ofrece diferentes ventajas en términos de legibilidad y control sobre el color.

Ejemplos Visuales

Color RGB: rgb(255, 0, 0)

Color RGBA: rgba(0, 255, 0, 0.5)

Color HSL: hsl(240, 100%, 50%)

Color Hex: #FF5733

Código del ejemplo visual

<div style="background-color: rgb(255, 0, 0); padding: 20px; border-radius: 5px;">
    <p>Color RGB: rgb(255, 0, 0)</p>
</div>

<div style="background-color: rgba(0, 255, 0, 0.5); padding: 20px; border-radius: 5px;">
    <p>Color RGBA: rgba(0, 255, 0, 0.5)</p>
</div>

<div style="background-color: hsl(240, 100%, 50%); padding: 20px; border-radius: 5px;">
    <p>Color HSL: hsl(240, 100%, 50%)</p>
</div>

<div style="background-color: #FF5733; padding: 20px; border-radius: 5px;">
    <p>Color Hex: #FF5733</p>
</div>
            

---

Ir al índice

---