Explorador de Rueda de Color
Elige el color base
Arrastra un pin alrededor de la rueda de color y observa cómo los marcadores de armonía rotan con él, complementarios a 180°, triádicos a intervalos de 120°, vecinos análogos, complemento dividido, tetrádico. Cambia entre HSL (la rueda de ingeniería) y RYB (la rueda del artista), compara cómo discrepan y copia la combinación que elijas como paleta.
Cómo funciona el explorador de la rueda de color
-
1
Arrastra el pin alrededor de la rueda
El pin establece tu color base. La saturación y la luminosidad se ajustan con controles separados.
-
2
Selecciona una armonía
Complementaria, análoga, triádica, complemento dividido, tetrádico, monocromática. Los marcadores de armonía rotan con la base.
-
3
Cambia de modelo (HSL vs RYB)
La rueda HSL es simétrica (rojo opuesto a cian, verde opuesto a magenta). La rueda RYB es asimétrica (rojo opuesto a verde, azul opuesto a naranja, coincide con la intuición de mezcla de pintura).
-
4
Copia la paleta
Hex, RGB, HSL para la base y cada marcador de armonía. Variables CSS, mapa Sass o CSV simple.
Rueda HSL vs Rueda RYB
Ambas ruedas organizan colores en un círculo, pero discrepan sobre cuáles colores son “opuestos”:
| Base | Complemento HSL | Complemento RYB |
|---|---|---|
| Rojo | Cian | Verde |
| Naranja | Verde azulado | Azul |
| Amarillo | Azul | Púrpura |
| Verde | Magenta | Rojo |
| Azul | Amarillo | Naranja |
| Púrpura | Amarillo-verde | Amarillo |
- HSL (matiz, saturación, luminosidad): es una representación cilíndrica de sRGB utilizada en CSS y diseño digital. Sumar 180° selecciona el matiz opuesto en esta rueda digital.
- RYB (rojo, amarillo, azul): es una rueda conceptual tradicional de la enseñanza artística. Este explorador reasigna los ángulos de matiz para aproximarse a esa convención; no predice el resultado de mezclar pigmentos reales.
Ambos son válidos para diferentes objetivos. Usa HSL para trabajo en pantalla; usa RYB cuando te importa la intuición de medios pintados.
Definiciones de armonía en la rueda
- Complementaria: base + 180°. Máxima separación de matiz en la rueda elegida.
- Análoga: base con vecinas a -30° y +30°. Suave y unificada.
- Triádica: base + 120° + 240°. Vibrante equilibrado.
- Complemento dividido: base + 150° + 210°. Rico sin la tensión completa de lo complementario.
- Tetrádico / cuadrado: base + 90° + 180° + 270°. Cuatro matices a igual distancia.
- Monocromática: mismo matiz, diferente luminosidad/saturación.
Temperatura en la rueda
- Mitad cálida: rojos, naranjas, amarillos. Tradicionalmente avanzando (atrae la vista hacia adelante).
- Mitad fría: verdes, azules, púrpuras. Tradicionalmente retrocediendo.
- Neutros: colores desaturados; pertenecen a cualquiera de las mitades dependiendo del tono.
Usos prácticos
- Exploración de paletas de marca: arrastra el pin hasta que encuentres un color que encaje, luego verifica los marcadores triádicos o tetrádicos para acentos de apoyo.
- Estudios de arte: elige una referencia fotográfica, encuentra el matiz dominante, mira los vecinos análogos para sombreado monocromático.
- Ilustración: elige un par complementario para sombras, por ejemplo, para un objeto naranja, pinta las sombras en azul en lugar de solo un naranja más oscuro.
- Maqueta de diseño de interiores: las ruedas triádicas se mapean a paletas interiores clásicas (azul/amarillo/rojo en el tradicional americano; verde/naranja/púrpura en bohemio).
Por qué la rueda no es perfectamente intuitiva
La percepción del color humano real es más compleja de lo que cualquiera de las ruedas sugiere. El sistema Munsell, LAB y OKLCH intentan arreglos perceptualmente uniformes, y no forman un círculo simple, el croma varía con la luminosidad en cada matiz. Para el trabajo de diseño de sistemas de producción, los espacios de color perceptuales dan resultados más limpios que las ruedas; para la exploración conceptual del color, la rueda sigue ganando en claridad.
Preguntas frecuentes
HSL para diseño digital (CSS, pantallas, UI). RYB cuando piensas en pintura, impresión o arte tradicional y quieres la intuición de armonía convencional de la escuela de arte.
Los modelos ordenan los matices de forma distinta. HSL usa el ángulo de matiz de sRGB, por lo que el cian queda frente al rojo. En la convención RYB tradicional, el verde queda frente al rojo. Aquí RYB es una aproximación visual, no una predicción de cómo se mezclarán unas pinturas concretas.
Para educación, esbozar ideas y comunicación con clientes, sí. Para trabajo de paleta precisa, los profesionales utilizan cada vez más espacios perceptuales (LAB, OKLCH) donde la luminosidad y el croma son independientes del matiz.
Copia la paleta como CSS, Sass o CSV y guárdala donde trabajes. El explorador no ofrece una biblioteca de paletas ni almacenamiento en una cuenta. En el recorrido de cuatro pasos, los ajustes visibles de la rueda se incluyen en la URL y pueden quedar en el historial del navegador.
Herramientas relacionadas
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Simplificador de Álgebra Booleana
Simplifica expresiones booleanas usando mapas de Karnaugh y el algoritmo de Quine-McCluskey. Muestra cada paso de minimización y una forma final SOP/POS.
Generador de Paletas de Color
Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.
Generador de colores aleatorios
Genera de 1 a 50 colores HEX aleatorios con muestras para previsualizar, copiar y usar en CSS, pruebas o exploración de paletas.
Convertidor de binario a hex
Convierte entrada binaria en un valor hexadecimal simple en mayúsculas. Los caracteres no binarios se ignoran y los ceros iniciales no se conservan.