Módulo 1: Sistemas de Color en CSS3

Explorador Interactivo de Modelos Cromáticos

Experimenta en tiempo real con las representaciones numéricas de color en la web: RGB (modelo aditivo de luz), HSL (percepción humana intuitiva), códigos HEX y la transparencia del Canal Alfa.

Ajustes cromáticos bidireccionales

Selector Nivel Sistema:

Canales RGB (0 - 255) rgb(99, 102, 241)

Rojo (Red)

Verde (Green)

Azul (Blue)

Canales HSL (Tono, Saturación, Luminosidad) hsl(239, 84%, 67%)

Tono (Hue: 0-360º)

Saturación (0-100%)

Luminosidad (0-100%)

Canal Alfa (Opacidad / Transparencia: 0 a 1)

Hexadecimal #6366F1

HEX + Alfa #6366F1FF

RGBA rgba(...)

Nombre Más Cercano Indigo / SlateBlue

Aplicar estilo a elemento HTML

Elemento HTML:

Propiedad CSS:

Lienzo de Previsualización

Título Principal <h1>

Demostración del comportamiento de las propiedades de color sobre elementos HTML.

Contenedor <div> Interactivo

<span> Destacado

Código CSS Generado

/* Generando código... */

RGB

Modelo Aditivo RGB

Basado en la suma de tres luces primarias: Rojo, Verde y Azul. La mezcla máxima de los tres canales al valor 255 produce luz blanca pura (rgb(255,255,255)), mientras que el valor 0 produce ausencia total de luz (negro).

HSL

Modelo Perceptivo HSL

Representa el color de forma más cercana al pensamiento humano: Hue (tono en el círculo cromático de 0º a 360º), Saturation (pureza o intensidad del color del 0% al 100%) y Lightness (claridad de 0% negro a 100% blanco).

Canal Alfa (Opacidad)

Define el grado de transparencia del color en una escala de 0.0 (100% transparente o invisible) a 1.0 (100% opaco). Se integra en las funciones rgba(), hsla() o en notación hexadecimal de 8 dígitos #RRGGBBAA.

Módulo 2: Unidades de Medida en CSS3

Laboratorio Comparativo de Escalas y Proporciones

Comprende visualmente la diferencia fundamental entre unidades Absolutas (longitudes fijas) y unidades Relativas (rem, em, %, vw, vh) imprescindibles para el Diseño Web Responsivo y la Accesibilidad.

1. Unidades Absolutas (px, pt, cm, mm, in)

Fijas • No Responsivas

Las unidades absolutas tienen un tamaño fijo independientemente del tamaño de pantalla o preferencias de accesibilidad del usuario. Aunque los px (píxeles) son el estándar en pantallas, unidades como cm, mm, pt o in están destinadas a medios impresos.

100 Pixel (100px) 100px

100px

75 Tipográficos (75pt) - [1pt = 1/72 pulgada] 75pt ≈ 100px

75pt

2.65 Centímetros (2.65cm) - [Medida física ajustada a pantalla] 2.65cm ≈ 100px

2.65cm

¿Por qué se evitan en diseño web responsivo?

Si defines tamaños de texto o contenedores en unidades absolutas fojas (como píxeles fijos), la interfaz no se adaptará adecuadamente a teléfonos móviles ni respetará la configuración de aumento de fuente para personas con visibilidad reducida.

2. Unidades Relativas al Texto (rem y em)

Escalables • Accesibles

A) rem (Root EM)

Relativo únicamente al tamaño de fuente del elemento raíz <html>.

<html> font-size: 16px

font-size: 1rem

Texto 1rem

Calculado: 16px

font-size: 1.5rem

Texto 1.5rem

Calculado: 24px

font-size: 2rem

Texto 2rem

Calculado: 32px

B) em (Element Multiplier) & Efecto Cascada

Relativo al font-size de su elemento PADRE DIRECTO. Al anidarse, los valores se multiplican acumulativamente.

Factor Padre: 1.2em

Texto del Padre (Calculado: 19.2px)

Factor Hijo: 1.3em

Texto del Hijo (Multiplica 1.2 x 1.3 = 1.56em del raíz → 24.96px)

<span class="nieto" style="font-size: 1.2em"> Texto del Nieto (Multiplica acum. = 29.95px)

3. Unidades Relativas al Contenedor y Viewport (%, vw, vh)

Adaptabilidad Dinámica

Ancho del Contenedor Padre (%): 75%

Dimensiones Viewport Simulado (vw / vh): 50vw / 20vh

Contenedor Padre (<main>)

Ancho: 75% del Padre

Ancho: 50vw | Alto simulado

Módulo 3: Evaluador de Competencias

Retos Prácticos de Estilizado CSS

Pone a prueba tus conocimientos ajustando los parámetros para replicar exactamente los objetivos visuales indicados en cada misión interactiva.