Colores en HTML

Los colores ayudan a:

- transmitir emociones
- mejorar la lectura
- destacar información
- mejorar el diseño

En HTML los colores se agregan mediante CSS.

Ejemplo:

<h1 style="color:red;">Hola Mundo</h1>

 Resultado: el texto se muestra en color rojo 

Propiedades mas utilizadas 

color

Cambia el color del texto.

```
<p style="color:blue;">
Hola
</p>
```
background-color

Cambia el fondo.

```
<p style="background-color:lightblue;">
Hola
</p>
```
border

Cambia el color del borde.

```
<h2 style="border:2px solid red;">
Título
</h2>
```
Formas de escribir un color`

por nombre

En CSS, los colores con nombre son palabras clave predefinidas que representan colores específicos.

**Ventajas:

- **Legibilidad: Es mucho más fácil entender que un botón es `gold` (oro) que intentar adivinar qué color es `#FFD700`.
- **Rapidez: Son ideales para prototipado rápido o cuando necesitas poner un color provisional mientras se trabaja en la estructura de tu sitio.

**Desventajas:

- **Paleta limitada:** 140 colores parecen muchos, pero en el diseño profesional se utilizan paletas específicas que requieren códigos exactos (Hex, HSL, RGB) para mantener la identidad de una marca.
- **Nombres engañosos:** Algunos colores no se ven exactamente como imaginas. Por ejemplo, `lime` no es un verde "lima" suave, sino un verde neón muy brillante.

Por rgb

Las siglas corresponden a **Red (Rojo), Green (Verde) y Blue (Azul)**.

### . El concepto: Mezcla aditiva de colores

Las pantallas de las computadoras crean colores mediante la emisión de luz. Al mezclar diferentes intensidades de luz roja, verde y azul, es posible generar millones de variaciones cromáticas.

- Si todos los valores son `0`, el resultado es **negro**.
- Si todos los valores están en su máximo (`255`), el resultado es **blanco**.

#### Los valores:

- Cada parámetro debe ser un número entero entre **0 y 255**.
    - `0` significa que el color está ausente.
    - `255` significa que el color está en su máxima intensidad.

**Ejemplos:**

- `rgb(255, 0, 0)` – Rojo puro.
- `rgb(0, 255, 0)` – Verde puro.
- `rgb(0, 0, 255)` – Azul puro.
- `rgb(255, 255, 0)` – Amarillo (mezcla de rojo y verde).
- `rgb(128, 128, 128)` – Gris (partes iguales de los tres).

Por hls

En el ámbito del diseño web, el modelo **HSL** es una forma de definir colores basada en la percepción humana. A diferencia del modelo RGB (que se centra en la emisión de luz roja, verde y azul), HSL descompone el color en tres componentes más intuitivos: **Matiz (Hue)**, **Saturación (Saturation)** y **Luminosidad (Lightness)**.
 

 1\. Los tres componentes fundamentales

- **Matiz (Hue):** Representa el color en sí mismo y se mide como un grado en un círculo cromático (de 0 a 360). Por ejemplo, 0 es rojo, 120 es verde y 240 es azul.
- **Saturación (Saturation):** Indica la intensidad del color y se expresa como un porcentaje. Un valor del 100% es un color vibrante y puro, mientras que un 0% resulta en un tono gris.
- **Luminosidad (Lightness):** Determina qué tan claro u oscuro es el color, también en porcentaje. El 0% es negro absoluto, el 50% es el color puro y el 100% es blanco absoluto.

Por Hexadecimal

En CSS, el formato **HEX (Hexadecimal)** es una de las formas más utilizadas para definir colores. Se trata de una manera abreviada de representar los valores de Rojo, Verde y Azul (RGB) utilizando un sistema numérico de base 16.

A continuación, se detalla el funcionamiento de este sistema:

### 1\. La Estructura

Un color HEX se define con un símbolo de almohadilla (`#`) seguido de 6 caracteres alfanuméricos.

- **Formato:** `#RRGGBB`
- **RR:** Intensidad del rojo (de 00 a FF).
- **GG:** Intensidad del verde (de 00 a FF).
- **BB:** Intensidad del azul (de 00 a FF).

Ejercicios

En el sitio deben aparecer colores utilizando las cuatro formas vistas, con el siguiente detalle

Elemento	Formato utilizado
Título	Nombre
Fondo	RGB
Botón	HSL
Menú	HEX