LEARNING: Mapa de Color

ColorLab — Rueda, Matiz, Brillo y Saturación

¿Qué vas a aprender?

Esta app móvil explica con ejemplos interactivos: matiz (tono), brillo (valor), saturación (viveza), la rueda de color de Hölzel, el árbol de color, y categorías prácticas: cálidos / fríos, neutros, primarios y complementarios.

Tu color

Matiz: 20° (naranja)

Brillo: 50%

Saturación: 100%

¿Cálido o frío? Cálido

HEX: # · Comp: #

Matiz (°) Saturación (%) Brillo / Valor (%)

Complementario (180°)

Rueda de color (Hölzel)

Cuanto más lejos del centro, mayor saturación. Los opuestos son complementarios.

Árbol de color (brillo y saturación)

El tronco representa el brillo (arriba blanco → abajo negro). Las hojas alrededor muestran la saturación.

Cálidos, fríos y neutros

Cálidos: rojos, naranjas, amarillos.

Fríos: violetas, azules, verdes.

Neutros: blancos, grises, negros (sin saturación).

Primarios & Complementarios

En pantalla (RGB) la luz usa primarios rojo, verde y azul. En pintura clásica: rojo, amarillo y azul (RYB). En impresión: CMYK.

RGB (luz)

RYB (pintura)

Opuestos en la rueda = complementarios (rojo↔verde, naranja↔azul, amarillo↔violeta).

Mezcla rápida (modo luz)

Color A

Color B

HEX ≈ #

La mezcla aditiva simula luz (pantallas). La sustractiva real con pigmentos depende del material.

Resumen rápido

• Matiz: etiqueta del color (rojo, verde…).
• Brillo / valor: cuán claro u oscuro es.
• Saturación: cuán puro o apagado (mezcla con grises).
• Complementario: contrario en la rueda (matiz + 180°).
• Familias: conjunto que comparte matiz.
• Rueda de Hölzel: derecha cálidos; izquierda fríos.

HTML móvil + widgets plegables. Copia/pega en Blogger o Neocities.