Rueda cromática interactiva en el navegador
Usa el generador de armonía de color para convertir un color base en una paleta complementaria, análoga, triádica, complementaria dividida o tetrádica. Arrastra la rueda, ajusta HSB, prueba funciones visuales y copia CSS o exporta un PNG etiquetado sin subir datos.
Actualizado el 29 de julio de 2026
generador de armonía de color
Este generador de armonía de color coloca un tono base en una rueda de 360 grados y calcula tonos relacionados mediante desplazamientos angulares explícitos. La regla complementaria usa 180°, la análoga −40° y +40°, la triádica pasos de 120°, la complementaria dividida 150° y 210°, y la tetrádica pasos de 90°. El generador de armonía de color conserva saturación y brillo para que la primera comparación aísle la estructura del tono. Después puedes copiar cada HEX, exportar variables CSS, guardar un PNG o enviar el primer par de primer plano y fondo al comprobador de contraste.
generador de armonía de color
El generador de armonía de color muestra regla, ángulos, valores y funciones previstas en lugar de devolver una fila de muestras sin contexto.
generador de armonía de color
Cada resultado del generador de armonía de color permanece marcado en la misma rueda. Los puntos hacen visibles los intervalos de 180°, 120°, 90° y la división complementaria para explicar por qué los tonos forman una familia.
generador de armonía de color
El generador de armonía de color aplica el resultado a una tarjeta de estilo toon con superficie, color focal, acento y acción. Es una prueba rápida de jerarquía, no una promesa de que todos los colores generados ya sean utilizables.
generador de armonía de color
Copia un color, toda la paleta del generador de armonía de color o propiedades personalizadas CSS. El PNG etiquetado conserva regla y valores para revisión de diseño, tablero de inspiración o entrega técnica.
Rueda y paleta locales
Arrastra la rueda o edita HEX y HSB. El generador de armonía de color recalcula al instante marcadores, muestras, funciones y exportaciones.
Una base y vecinos opuestos a 150° y 210°
Comprueba la jerarquía antes de llevar los colores al dibujo o componente real.
:root {
--harmony-1: #E8335D; /* Base · 346° */
--harmony-2: #33E863; /* Apoyo · 136° */
--harmony-3: #33B8E8; /* Acento · 196° */
}La primera muestra se envía como primer plano y la última como fondo.
generador de armonía de color
Un generador de armonía de color resulta útil cuando cada solución de la rueda termina en una función deliberada, una medición de contraste y un pequeño ajuste contextual.
generador de armonía de color
Introduce el HEX aprobado de marca, personaje o interfaz en lugar de adivinar desde una captura comprimida. El generador de armonía de color conserva ese tono como primer marcador y deriva los demás de la misma fuente.
generador de armonía de color
Usa complementaria para una separación fuerte, análoga para continuidad, triádica para tres familias equilibradas, complementaria dividida para tensión controlada y tetrádica para un sistema amplio. El generador de armonía de color etiqueta la regla exacta mientras comparas.
generador de armonía de color
Mantén un color dominante y utiliza los demás como apoyo, acento o contrapunto. Una vez elegida la estructura del generador de armonía de color, cambia saturación y brillo para crear jerarquía en vez de dar el mismo peso a todas las muestras.
generador de armonía de color
Envía el probable par de texto y fondo del generador de armonía de color al comprobador de contraste. Revisa estados normal, hover, foco, selección y desactivación, porque la distancia angular no demuestra legibilidad ni significado accesible.
generador de armonía de color
El generador de armonía de color utiliza desplazamientos fijos y reproducibles. La tabla resume geometría, cantidad inicial de colores y compromiso de diseño antes de cualquier ajuste artístico.
| Regla | Desplazamientos | Buen punto de partida | Precaución |
|---|---|---|---|
| Complementaria | 0°, 180° | Sujeto focal frente a acción o aviso | La misma saturación puede gritar; elige un lado dominante |
| Análoga | −40°, 0°, +40° | Escenas tranquilas, superficies y detalles relacionados | Los tonos cercanos necesitan más separación de brillo |
| Triádica | 0°, 120°, 240° | Tres funciones con cobertura cromática amplia | Reduce uno o dos colores para dejar un protagonista |
| Complementaria dividida | 0°, 150°, 210° | Una base y dos acentos opuestos menos directos | Los dos acentos compiten si ocupan áreas grandes |
| Tetrádica | 0°, 90°, 180°, 270° | Sistemas, equipos, gráficos e interfaces complejas | Cuatro colores intensos suelen exigir grupos de valor |
generador de armonía de color
Utiliza esta lista del generador de armonía de color para convertir una rueda atractiva en una paleta documentada y comprobable.
generador de armonía de color
Este generador de armonía de color separa geometría reproducible de afirmaciones de accesibilidad. El método usa ángulos explícitos y las fuentes del W3C definen tono digital y contraste.
El W3C expresa directamente el umbral de texto normal:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
generador de armonía de color
generador de armonía de color
Empieza con análoga para una paleta contenida o complementaria para un acento claro. El generador de armonía de color mantiene la base fija, por lo que alternar ambas muestra la diferencia. Elijas la que elijas, deja un color dominante y mide el par final.
El generador de armonía de color calcula y muestra HSB porque Toon Tone ya trabaja con tono, saturación y brillo. El tono sigue siendo un ángulo de 360 grados. Cada resultado HSB se convierte también a HEX para entregarlo al navegador o a una herramienta de diseño.
No. Un generador de armonía de color describe relaciones de tono, mientras que WCAG calcula luminancia relativa entre un primer plano y fondo concretos. Usa el enlace de contraste, prueba fuente y estado reales y añade pistas no cromáticas cuando el significado dependa del color.
El trabajo monocromático cambia brillo y saturación alrededor de un tono y no coloca familias distintas en la rueda. Este generador de armonía de color enlaza el generador de matices, que ofrece pasos, sombras toon, contraste, CSS y PNG para esa tarea.
No. El generador de armonía de color hace los cálculos en la pestaña actual. Las acciones de copia y PNG son locales. Una URL compartida incluye el HEX base y el nombre de la armonía en la consulta, así que compártela solo cuando esos valores puedan mostrarse.