Visualizador 3D de Color
Explora los espacios de color RGB, HSL y HSV en tres dimensiones con rotación interactiva y matriz de distancias.
💡 Consejos
- Cubo RGB: Cada eje = Rojo, Verde, Azul (0-255). Las esquinas son colores primarios/secundarios.
- Cilindro HSL: Tono alrededor del círculo, Saturación como radio, Luminosidad como altura.
- Cilindro HSV: Como HSL pero Valor (brillo) en lugar de Luminosidad.
- Los colores cercanos en el espacio 3D son perceptualmente similares.
- Activa la matriz de distancias para cuantificar relaciones entre colores.
- Haz clic en una muestra de color para editarla directamente.
Cómo funciona
Los espacios de color son modelos matemáticos que organizan los colores en coordenadas tridimensionales. Cada modelo revela diferentes relaciones entre colores y es útil para distintos propósitos en diseño y desarrollo.
Los tres espacios de color
🧊 RGB (Cubo)
Ejes: Rojo, Verde, Azul (0-255). Cada esquina del cubo es un color primario, secundario, negro o blanco.
Ideal para: pantallas, desarrollo web, CSS
🎨 HSL (Cilindro)
Tono alrededor del círculo, Saturación como radio, Luminosidad como altura.
Ideal para: ajustes intuitivos, paletas armónicas
💎 HSV (Cilindro)
Tono y Saturación igual que HSL, pero Valor (brillo máximo) en lugar de Luminosidad.
Ideal para: selectores de color, Photoshop/Figma
¿Qué revela cada espacio?
- RGB — Muestra cómo los componentes aditivos de luz crean color. Útil para ver por qué
#808080está en el centro exacto del cubo. - HSL — Revela relaciones de tono. Colores complementarios están en lados opuestos del cilindro. Los análogos están adyacentes.
- HSV — Similar a HSL pero los colores más puros (saturados) están en el borde exterior superior. Refleja cómo funcionan los selectores de color profesionales.
💡 Ejemplos de uso prácticos
Caso 1: Diagnosticar gradientes "sucios"
Un gradiente de rojo a verde pasa por marrón apagado.
→ Visualiza ambos colores en RGB: la línea recta pasa por el centro del cubo (zona gris/marrón)
→ Cambia a HSL: verás que el camino circular por el tono evita zonas apagadas
Caso 2: Evaluar armonía de una paleta
Añade los 4-5 colores de tu paleta y activa la matriz de distancias.
→ Distancias similares entre colores = paleta equilibrada
→ Un color muy alejado = posible acento o disonancia
→ En HSL, colores en la misma altura = misma luminosidad (cohesión visual)
Caso 3: Entender HSL vs HSV para tu workflow
¿Cuándo usar cada modelo?
→ HSL: CSS nativo (hsl(210, 80%, 50%)), ajustes de luminosidad predecibles
→ HSV: Coincide con el picker de Figma/Photoshop, saturación más intuitiva para artistas
Caso 4: Enseñanza y aprendizaje
Herramienta ideal para clases de teoría del color y diseño visual.
→ Activa auto-rotación para presentaciones
→ Muestra cómo la saturación = distancia al eje central en HSL/HSV
→ Demuestra por qué los colores complementarios están "opuestos" en el espacio
Distancia en el espacio de color
La distancia euclidiana 3D entre dos puntos de color cuantifica cuán diferentes son visualmente. La matriz de distancias muestra todas las relaciones de una paleta simultáneamente — verde indica colores cercanos (armónicos), rojo indica colores distantes (contrastantes).