BrowserTools
Publicidad
Inicio / Generadores / Generador de paletas de color

Generador de paletas de color

Genera paletas complementarias, análogas, triádicas, tetrádicas, monocromáticas y de sombras/tintes a partir de cualquier color base.

Cargando Generador de paletas de color… Si no ocurre nada, activa JavaScript.

La teoría del color es el marco estructurado que explica qué combinaciones de color resultan armoniosas, enérgicas, tranquilas o profesionales, y por qué. En su esencia trabaja con la rueda de color, una disposición circular de tonos donde las relaciones entre colores predicen cómo interactuarán visualmente. La rueda de color fue formalizada por Johann Wolfgang von Goethe en su obra de 1810 "Teoría de los colores" y más tarde refinada por el sistema de color tridimensional de Albert Munsell. El diseño digital moderno mapea estas relaciones sobre el espacio de color HSL (tono, saturación, luminosidad), donde la rotación del tono en un círculo de 360 grados refleja directamente las posiciones de una rueda de color tradicional.

Preguntas frecuentes

¿Se envía algún dato de color a un servidor?
No. Todos los cálculos de paleta se realizan en tu navegador usando aritmética HSL. El color que introduces y las paletas generadas existen solo en la pestaña de tu navegador. No se asocia ningún evento de analítica a la acción de generación y no se transmite ningún dato por la red.
¿Cómo se calculan matemáticamente las relaciones de la paleta?
La herramienta convierte tu color de entrada a HSL y luego rota el valor del tono según desplazamientos definidos para cada esquema: 180° para la complementaria, ±30° para la análoga, ±120° para la triádica, ±90° y ±180° para la tetrádica. Los tintes añaden luminosidad hacia el 100 % en pasos iguales; las sombras la reducen hacia el 0 %. La saturación y la luminosidad del color base se conservan en los esquemas de rotación de tono, manteniendo la paleta cohesionada.
¿Cuál es la diferencia entre complementaria y complementaria dividida?
Una paleta complementaria empareja tu color base con el único tono directamente opuesto en la rueda de color: alto contraste, audaz e intenso. Una complementaria dividida usa los dos tonos adyacentes al complemento (normalmente 30° a cada lado), lo que aporta un contraste visual similar pero se siente más suave y menos chocante, haciéndola más fácil de manejar en diseños con múltiples elementos.
¿Qué tipo de paleta debería usar para una marca profesional?
Las paletas análogas (tonos vecinos) se sienten cohesionadas y sofisticadas, populares en marcas tecnológicas y financieras. Las paletas complementarias son audaces y captan la atención, comunes en marcas de consumo y deportivas. Las paletas monocromáticas transmiten elegancia y contención. No hay una única respuesta correcta; la elección depende de la personalidad de la marca. Empieza con la análoga para la cercanía o con la complementaria para la energía.
¿Qué es la regla 60-30-10?
La regla 60-30-10 es una clásica directriz de proporción de diseño: usa tu color dominante en el 60 % de la composición, un color secundario en el 30 % y un color de acento en el 10 % restante. La proporción asegura que un color lidere con claridad, un segundo apoye sin competir y el acento cree puntos focales sin abrumar. Se originó en el diseño de interiores pero se traslada directamente al diseño web y de interfaz.
¿Son accesibles los colores generados?
La generación de paletas asegura la armonía visual pero no garantiza el cumplimiento de accesibilidad WCAG. Dos colores pueden formar un hermoso par análogo y tener a la vez una ratio de contraste por debajo de 3:1, lo que incumpliría las WCAG 2.1 para cualquier uso de texto. Verifica siempre las ratios de contraste de forma independiente con un comprobador dedicado antes de usar los colores generados para combinaciones de texto de primer plano/fondo.
¿Puedo exportar la paleta como propiedades personalizadas de CSS?
Sí. El botón Copiar CSS exporta todas las muestras de una paleta como propiedades personalizadas de CSS (variables CSS) en el formato `--color-name: #rrggbb;`. Pega estas en el bloque `:root` de tu hoja de estilo para que estén disponibles en todo tu CSS. Este formato es directamente compatible con los sistemas de diseño construidos sobre propiedades personalizadas de CSS, incluidos los que usan las extensiones de tema personalizado de Tailwind CSS.
¿Qué formato de color usa la herramienta para la salida?
La salida es en formato hexadecimal (HEX) por defecto, que es el formato más ampliamente admitido en herramientas de diseño, CSS y la entrega a desarrolladores. Los cálculos subyacentes usan HSL por su relación intuitiva con la rueda de color. Si necesitas RGB, HSL u otros formatos, usa la herramienta Conversor de color para traducir cualquier valor HEX.
¿Cómo elijo entre sombras y tintes?
Las sombras se crean mezclando el color base con negro (reduciendo la luminosidad), produciendo variaciones más oscuras y serias. Los tintes se crean mezclando con blanco (aumentando la luminosidad), produciendo variaciones más claras y aireadas. Para las interfaces, las sombras funcionan bien para estados de hover y activos, bordes y texto. Los tintes funcionan bien para fondos, estados deshabilitados y rellenos sutiles. La mayoría de los sistemas de diseño usan ambos: sombras oscuras para el énfasis, tintes claros para las superficies.
¿Puedo generar una paleta para usuarios daltónicos?
Esta herramienta genera paletas basadas en la teoría del color estándar, que se apoya en la diferenciación de tono que no está plenamente disponible para los usuarios con deficiencias de visión del color. Para un diseño de paleta accesible, complementa esta herramienta con un simulador de daltonismo para comprobar que tus colores elegidos siguen siendo distinguibles bajo deuteranopía (la forma más común) y protanopía. Considera usar patrones o formas junto al color para transmitir significado en las visualizaciones de datos.

Acerca de Generador de paletas de color

Los diseñadores, los ingenieros de interfaz, los equipos de marca y los profesionales del marketing necesitan todos paletas de color estructuradas. Una startup que construye una identidad de marca necesita un color primario, un acento complementario y un conjunto de tintes neutros que funcionen juntos a través de un logotipo, un sitio web, una app y materiales impresos. Un desarrollador front-end que construye un sistema de diseño necesita tokens de color semánticos (primario, secundario, éxito, advertencia, error) que se deriven de forma consistente de un solo color de marca. Un ilustrador necesita saber qué tonos crearán tensión visual y cuáles resultarán reposados. La regla 60-30-10 (60 % de color dominante, 30 % de color secundario, 10 % de acento) es el marco práctico que la mayoría de los diseñadores de interiores y gráficos aplican para asegurar que una paleta se sienta equilibrada en lugar de caótica.

Esta herramienta calcula ocho tipos de paleta a partir de un solo color base, todos derivados matemáticamente en el espacio de color HSL. La complementaria empareja la base con el tono exactamente 180 grados opuesto. La análoga usa los tres tonos dentro de 30 grados a cada lado. La triádica divide la rueda en tres segmentos iguales de 120 grados. La tetrádica (cuadrada) usa cuatro tonos a intervalos de 90 grados. La complementaria dividida suaviza el contraste de un par complementario usando los dos tonos adyacentes al complemento. Las sombras y tintes monocromáticos varían solo la luminosidad manteniendo el mismo tono y saturación. Todo se ejecuta en tu navegador: sin servidor, sin subidas, sin cuenta.

Una nota práctica crucial: los colores matemáticamente armoniosos no son automáticamente accesibles. La ratio de contraste entre el texto de primer plano y el color de fondo debe cumplir las directrices WCAG 2.1, un mínimo de 4,5:1 para el texto normal y 3:1 para el texto grande. Dos colores que parecen visualmente equilibrados pueden aun así no cumplir los requisitos de contraste, especialmente los pares análogos donde los tonos son similares. Pasa siempre tus combinaciones elegidas de primer plano/fondo por un comprobador de contraste antes de finalizar una paleta para uso en producción. Recuerda también que aproximadamente el 8 % de los hombres y el 0,5 % de las mujeres tienen alguna forma de deficiencia de visión del color; simula las vistas de deuteranopía y protanopía de tu paleta para comprobar que las distinciones clave se mantienen.

Del prisma de Isaac Newton al imperio de la impresión de Pantone: la sorprendente historia de los sistemas de color

La idea de que los colores forman una rueda, un espectro circular continuo en lugar de una escala lineal, se origina con Isaac Newton, que en 1666 desvió un haz de luz solar a través de un prisma y mapeó el espectro resultante en un círculo en su "Opticks" de 1704, conectando el rojo y el violeta en los extremos. Newton fue el primero en sugerir que mezclar colores de extremos opuestos del espectro produce una especie de neutralidad visual. Esta rueda se convirtió en el fundamento conceptual de toda la teoría del color posterior, aunque los científicos descubrieron más tarde que la percepción humana del color es mucho más compleja de lo que sugiere un simple modelo circular.

Johann Wolfgang von Goethe desafió el enfoque puramente físico de Newton en su "Teoría de los colores" de 1810, argumentando que la percepción del color es tanto psicológica como física. Aunque en gran parte incorrectas como física, las observaciones de Goethe sobre cómo los colores evocan emociones (los colores cálidos sintiéndose activos, los fríos pasivos) influyeron directamente en la psicología del color usada hoy en la marca y el marketing. La escuela Bauhaus absorbió estas ideas en la década de 1920, con Johannes Itten y Josef Albers desarrollando los ejercicios de color que aún se enseñan en escuelas de diseño de todo el mundo.

El sistema de color comercial moderno con el que la mayoría de los diseñadores interactúan a diario es Pantone, fundado en 1963 cuando Lawrence Herbert compró una pequeña imprenta y resolvió un problema fundamental: dos imprentas de ciudades distintas no podían igualar de forma fiable el mismo color a partir de una descripción. Herbert creó un sistema estandarizado de mezcla de tintas con muestras numeradas, y el Pantone Matching System se convirtió en el estándar global para la especificación del color de marca. El Pantone Color del Año, lanzado en 2000, se ha convertido en un acontecimiento cultural que influye en el diseño de productos, la moda y el diseño de interiores en todo el mundo, un alcance notable para lo que empezó como una solución práctica a un problema de coordinación de la impresión.

Publicidad
Publicidad
Publicidad