Generador de paletas de colores gratis en línea

Cómo usarlo

• Elige un modo de armonía (Análogo, Complementario, Tríada, etc.) o déjalo en Aleatorio.
• Haz clic en Generar o pulsa Espacio para nuevas paletas.
• Haz clic en el icono del candado para bloquear un color y que permanezca al regenerar.
• Haz clic en un código HEX para copiarlo al portapapeles.
• Usa Copiar CSS para obtener propiedades personalizadas CSS o descargar como imagen.

Teoría del color y modos de armonía

Este generador admite 7 modos de armonía basados en la teoría del color. Análogo: las paletas usan colores a menos de 30° entre sí en el círculo cromático · transmiten calma y cohesión. Complementario: las paletas combinan colores opuestos a 180° para un contraste máximo. Tríada: las paletas usan tres tonos equidistantes (separados 120°) para una variedad vibrante. Complementarios divididos: toma un color base más dos colores adyacentes a su complementario · audaz pero más matizado. Monocromático: las paletas solo varían la luminosidad y la saturación de un único tono · elegante y minimalista. Cuadrado: usa cuatro colores separados 90° para una paleta equilibrada y llena de color.

Preguntas frecuentes

¿Cómo uso estos colores en mi proyecto?

Haz clic en "Copiar CSS" para obtener propiedades personalizadas CSS listas para pegar. También puedes hacer clic en códigos HEX individuales para copiarlos, o exportar la paleta completa como imagen PNG para usarla como referencia en herramientas de diseño como Figma o Canva.

¿Cuántos colores debería tener una paleta?

La mayoría de los diseños funcionan mejor con 3-5 colores: un color primario, un secundario, un color de acento y 1-2 neutros. Usa el botón "+ Añadir color" para ampliar tu paleta o reduce los colores generando con menos.

¿Puedo bloquear los colores que me gustan?

¡Sí! Haz clic en el icono del candado en cualquier muestra de color. Cuando generes nuevas paletas, los colores bloqueados se mantendrán mientras los desbloqueados cambian. Es ideal para construir una paleta en torno a un color de marca específico.

¿Qué son los modos de armonía?

Los modos de armonía generan paletas basadas en las relaciones de la teoría del color. Análogo usa tonos cercanos para una paleta relajante. Complementario usa tonos opuestos para un contraste fuerte. Tríada, Complementarios divididos y Cuadrado distribuyen los tonos de manera uniforme por el círculo cromático. Monocromático mantiene un solo tono y varía la luminosidad · perfecto para diseños limpios y minimalistas.

¿Qué es un generador de paleta de colores?

Un generador de paleta de colores elige un conjunto de colores que funcionan visualmente juntos, basado en las reglas de la teoría del color. Le da un indicio inicial (un color base, un modo de armonía, o aleatoriedad pura), y devuelve tres a cinco códigos hexadecimales que se sitúan en posiciones deliberadas en la rueda de color. La salida está lista para colocar en variables CSS, un archivo Figma, una guía de marca o una presentación.

Las herramientas web modernas expresan colores en hexadecimal (#2b7190), RGB (43, 113, 144), HSL (199, 54%, 37%) u OKLCH (51.3% 0.066 233.4). Hex es el más copiable-pegable; HSL es el más intuitivo para ajustar (baje la luminosidad para una variante más oscura); OKLCH (introducido en CSS Color 4, soportado en navegadores desde 2023) es perceptualmente uniforme, lo que importa para tokens de diseño. Esta herramienta emite hex por defecto y le permite copiar propiedades personalizadas CSS para variables y paso de matiz amigable con OKLCH.

Toda la generación ocurre en su navegador. Los modos de armonía se calculan a partir de un color base mediante rotación de matiz HSL, luego se convierten de vuelta a hex. El botón de bloqueo mantiene sus favoritos mientras el resto de la paleta se reorganiza. La tecla Espacio dispara una nueva generación sin salir de la página, lo que hace la exploración rápida.

Lo que hay dentro del generador

La barra superior agrupa los tres botones que cambian la generación: un botón Generar que produce una nueva paleta, un menú desplegable Modo con siete reglas de armonía (Aleatorio, Análogo, Complementario, Triádico, Split-Complementario, Monocromático, Cuadrado), y un selector de color Base para sembrar modos no aleatorios. El botón Agregar Color extiende la paleta más allá de las cinco muestras por defecto, útil para sistemas de diseño que necesitan más tonos.

Cada muestra muestra su código hex en una píldora oscura que permanece legible contra cualquier fondo. Haga clic en el hex para copiarlo. Haga clic en el candado para congelar la muestra a través de generaciones futuras, así es como construye una paleta alrededor de un color de marca: bloquee la marca, regenere, obtenga tres compañeros coincidentes. La barra de acciones dentro de cada muestra mantiene los iconos de bloqueo, copia y eliminación dentro de objetivos táctiles de 32 píxeles para satisfacer la regla target-size de Lighthouse.

Debajo de la paleta, el bloque de exportación Variables CSS se actualiza en vivo con sus colores actuales como propiedades personalizadas :root. El botón Exportar Imagen serializa la paleta a PNG mediante un canvas oculto, lo cual es útil para compartir en revisiones de diseño o fijar en un moodboard. El atajo de teclado Espacio regenera instantáneamente, sin cambio de foco requerido.

Historia y contexto

Isaac Newton divide la luz blanca (1666)

Los experimentos de prisma de Isaac Newton en 1666 en Cambridge mostraron que la luz blanca está compuesta de un espectro continuo de colores. En Opticks (1704), dispuso una rueda de siete colores con rojo, naranja, amarillo, verde, azul, índigo y violeta posicionados de modo que los colores diametralmente opuestos creaban complementarios armoniosos. Cada rueda de color moderna desciende de este diagrama.

Teoría del color de Goethe (1810)

La Teoría de los colores (Theory of Colours) de Johann Wolfgang von Goethe en 1810 reformuló la física de Newton en términos de percepción humana. Goethe fue el primero en describir sistemáticamente las imágenes residuales, el contraste simultáneo y la calidez psicológica del rojo versus la frialdad del azul. Su trabajo influyó en Turner, Schopenhauer y todo el campo de la psicología del color que las escuelas de arte enseñan hoy.

Johannes Itten formaliza las reglas de armonía (1961)

Johannes Itten, un profesor de la Bauhaus, publicó El Arte del Color (Kunst der Farbe) en 1961. Su rueda de color de doce radios y los siete contrastes (matiz, valor, temperatura, complementario, simultáneo, saturación, extensión) se convirtieron en el currículo estándar en las escuelas de arte y diseño. Los modos de armonía en esta herramienta (Análogo, Complementario, Triádico, Split-Complementario, Cuadrado) provienen directamente de los capítulos de Itten.

Sistema de Coincidencia Pantone (1963)

Lawrence Herbert en Pantone, una impresora comercial M. Harris and Sons, lanzó el Sistema de Coincidencia Pantone en 1963. El libro de chips dio a diseñadores e impresores una referencia numérica compartida, para que un color de marca pudiera sobrevivir a ser reproducido en diferentes papeles, pantallas y telas. El Color del Año, iniciado en 2000, ahora impulsa las tendencias de paleta en moda, interiores y diseño web.

Paleta web-safe y los 216 colores (1996)

Cuando las pantallas de 8 bits dominaban la web temprana, Lynda Weinman codificó una paleta web-safe de 216 colores en 1996 para asegurar renderizado consistente entre Mac y Windows. La paleta se volvió obsoleta una vez que el color de 24 bits se volvió ubicuo (alrededor de 2000), pero la sintaxis hexadecimal que popularizó (#RRGGBB) sigue siendo la forma dominante de escribir colores en CSS, HTML y herramientas de diseño.

OKLCH y color perceptualmente uniforme (2020)

El artículo OKLab de Bjoern Ottosson de 2020 introdujo un espacio de color perceptualmente uniforme que no tiene las inconsistencias de luminosidad de HSL. CSS Color Level 4 (navegadores desde Chrome 111, Safari 15.4, Firefox 113) agregó sintaxis oklch(). El futuro de tokens de diseño, contraste de color accesible y generación de paleta vive cada vez más en OKLCH porque uniformidad perceptual significa que dos colores con el mismo valor L realmente se ven igualmente brillantes.

Flujos de trabajo prácticos

Construir una identidad de marca a partir de un color

Establezca el color Base a su hex de marca, bloquee la primera muestra, cambie el modo a Análogo o Split-Complementario, y haga clic en Generar hasta que los cuatro colores compañeros se sientan bien. Copie las variables CSS y péguelas en sus tokens de sistema de diseño. El resultado es una paleta anclada a su marca con armonías respaldadas por teoría.

Diseñar pares de modo oscuro

Elija una paleta Monocromática con su fondo de modo oscuro como base. Las cinco muestras le dan fondo, superficie, divisor, texto secundario y texto primario en luminosidad graduada. Para modo claro, genere una paleta Monocromática separada con una base clara. Las dos paletas emparejadas vía prefers-color-scheme cubren la mayoría de las necesidades de tematización sin ajustes ad hoc.

Elegir colores para visualización de datos

Para datos categóricos (gráficos de barras, segmentos de torta), las paletas Triádica o Cuadrada le dan tres o cuatro matices distintos que se leen separadamente en un gráfico ocupado. Para datos secuenciales (mapas de calor, mapas coropléticos), use Monocromático para variar la luminosidad mientras mantiene el matiz constante. Verifique el contraste contra el fondo del gráfico; las herramientas de visualización de datos como Vega-Lite esperan al menos 3:1 entre categorías adyacentes.

Borrador de paleta primero la accesibilidad

Genere una paleta, luego pegue cada par en un verificador de contraste (WebAIM, Tanaguru). Para texto del cuerpo en un fondo, quiere al menos 4.5:1 (WCAG AA). Para texto grande o componentes UI, 3:1 es el umbral. Si una paleta falla, genere una nueva o bloquee la muestra de marca y deje que las demás se reorganicen para encontrar un conjunto conforme.

Exploración de moodboard

Presione Espacio repetidamente para recorrer docenas de paletas aleatorias. Cuando una atrape su ojo, bloquee la mejor muestra, cambie a Análogo, y siga generando para encontrar variaciones que construyan sobre ella. El bucle de barra espaciadora es más rápido que hacer clic, lo que le permite quedarse en el modo de exploración del hemisferio derecho sin romper el flujo.

Coincidencia de color impresión-a-pantalla

Cuando tiene una referencia impresa (un chip Pantone o muestra de tela), tome con cuentagotas el equivalente digital más cercano y úselo como color Base. Los modos de armonía luego se despliegan alrededor de su referencia. Tenga en cuenta que la impresión es CMYK y la pantalla es RGB, por lo que una coincidencia exacta es imposible; el objetivo es una paleta lo suficientemente cercana para leerse como la misma marca.

Trampas comunes

El contraste WCAG no es automático

Una paleta bonita en teoría aún puede fallar la accesibilidad. Los pares pastel-sobre-pastel (un amarillo claro sobre un rosa claro) se ven agradables pero tienen menos de 2:1 de contraste. Siempre pruebe los pares texto-sobre-fondo propuestos en un verificador WCAG. Si la paleta debe funcionar para texto del cuerpo, constrúyala primero alrededor del requisito de contraste, la armonía segundo.

El daltonismo afecta al 8% de los hombres

La deuteranopia rojo-verde es la forma más común de deficiencia de visión de color, afectando aproximadamente al 8% de los hombres y 0.5% de las mujeres. Una paleta Complementaria rojo-verde se convierte en una sola mancha marrón para un espectador deuteranópico. Para color categórico (gráficos, insignias de estado, semáforos), empareje el color con forma, etiqueta o patrón, y pruebe en un simulador como Stark o Sim Daltonism.

HSL no es perceptualmente uniforme

En HSL, el amarillo al 50% de luminosidad se ve mucho más brillante que el azul al 50% de luminosidad. El modelo HSL trata todos los matices igualmente numéricamente, pero los ojos humanos no. El generador trabaja en HSL internamente para rotación de matiz, así que dos muestras con S y L similares aún pueden tener un peso perceptual notablemente diferente. Para paletas perceptualmente equilibradas, cambie a herramientas conscientes de OKLCH (Leonardo, Open Color).

Diferencias de gamut entre sRGB y Display P3

Las pantallas Apple modernas (desde iMac 2015, MacBook Pro 2016, todos los iPhone desde el 7) usan Display P3, una gama de color más amplia que sRGB. Un rojo saturado que se ve vívido en Display P3 puede verse más apagado cuando el mismo hex se renderiza en un monitor más antiguo solo sRGB. Para colores de marca que deben verse idénticos en todas partes, permanezca dentro del gamut más pequeño de sRGB.

Los códigos hex no llevan alpha por defecto

Hex de tres dígitos (#abc) y de seis dígitos (#aabbcc) son opacos. Hex de ocho dígitos (#aabbcc80, donde 80 es 50% alpha) está soportado en CSS Color 4 y navegadores modernos pero no en herramientas heredadas. Si necesita transparencia, use rgba() o hsla() en su lugar, o quédese con colores opacos y deje que la opacidad del padre maneje la mezcla.

Deriva de calibración del selector de color

Un monitor no calibrado puede desviarse varias unidades Delta-E de una referencia, lo que significa que una paleta que se ve prístina en su pantalla puede verse turbia o sobresaturada en la de otra persona. Para trabajo crítico para la marca, calibre con un dispositivo Spyder o i1Display. Para la mayoría del diseño web, la varianza de pantalla es inevitable; elija colores que funcionen en el rango mediano.

Privacidad y manejo de datos

Todo se ejecuta en su navegador. La matemática de armonía es JavaScript, la exportación canvas es local, y la API del portapapeles requiere un gesto del usuario. No enviamos sus códigos hex a ningún lado, no rastreamos qué paletas genera, y no almacenamos nada en cookies o localStorage. Recargue la página y la paleta anterior se ha ido.

Una vez cargada la página, el generador funciona sin conexión. Puede usarlo en un vuelo, dentro de un proxy corporativo o en un entorno aislado. La única acción que toca la red es la opcional Exportar Imagen, que descarga vía URL de blob, y la descarga en sí no transmite sus colores a ningún lado.

Cuándo no usar este generador

Establecer un sistema de diseño con tokens semánticos

Los sistemas de diseño necesitan tokens nombrados y semánticos (color-primary-500, color-error, color-warning) con valores emparejados de modo claro y oscuro, garantías de contraste y pasos de escala nombrados. Use una herramienta dedicada (Material Color Tool, Open Color, Adobe Leonardo) o un sistema de gestión de tokens (Style Dictionary, Tokens Studio). Este generador es para exploración, no para diseño de sistema.

Gestión de color de impresión (CMYK, Pantone)

Las separaciones de color CMYK para impresión offset requieren herramientas profesionales (panel de muestras de Adobe Illustrator, Pantone Connect). La conversión RGB a CMYK es con pérdida y los límites de cobertura de tinta importan. Si su paleta se imprimirá a escala, trabaje con la especificación de color de la impresora desde el inicio, no con un generador hex solo para pantalla.

Generar paletas accesibles para texto del cuerpo

Para paletas que deben garantizar contraste WCAG AA o AAA en cada emparejamiento, use una herramienta enfocada en contraste como Tanaguru Contrast-Finder, Adobe Leonardo o herramientas basadas en APCA. Este generador sigue reglas de armonía, no reglas de contraste, así que una hermosa paleta Análoga puede tener un par texto-sobre-fondo de 1.5:1 que falla la accesibilidad.

Animaciones e interpolación de color

Para paradas de gradiente o animaciones de color, necesita una interpolación perceptualmente uniforme en OKLCH o LCH, no HSL o hex crudo. La interpolación de gradiente CSS por defecto a sRGB produce puntos medios turbios (el famoso punto medio gris entre amarillo y azul). Use herramientas de interpolación de color (chroma.js de Erin Kissane, oklch.com) para transiciones animadas.

Más preguntas

¿Cuándo debería usar hex vs RGB vs HSL?

Hex es el más compacto y más copiado, genial para entregas de diseño. RGB es el más fácil de computar en código (cada canal 0-255). HSL es el más fácil de ajustar a mano: cambie matiz para desplazar el color, luminosidad para variantes. Para CSS moderno, OKLCH es el más a prueba del futuro para sistemas de diseño porque es perceptualmente uniforme.

¿Qué modo de armonía debería elegir?

Empiece con Análogo para paletas calmadas y cohesivas (interfaces, blogs). Use Complementario para pares de llamada a la acción de alto contraste. Triádico y Cuadrado dan paletas categóricas vibrantes para gráficos o marcas lúdicas. Monocromático es mejor para modo oscuro y sistemas de diseño tonal. Split-Complementario es la opción más segura «audaz pero no chocante».

¿Cómo verifico la accesibilidad?

Pegue cada par texto-sobre-fondo en WebAIM Contrast Checker, Tanaguru o APCA Contrast Tool. Apunte a al menos 4.5:1 (WCAG AA) para texto del cuerpo, 3:1 para texto grande y componentes UI, 7:1 (WCAG AAA) para apps de lectura pesadas en prosa. Pruebe con simuladores de daltonismo (Stark, Sim Daltonism) para uso categórico.

¿Puedo exportar a Figma o Sketch?

Copiar CSS le da propiedades personalizadas listas para pegar. Tanto Figma como Sketch importan códigos hex directamente vía su selector de color. El botón Exportar Imagen le da un PNG adecuado para moodboards o capturas de pantalla. Para una exportación amigable con tokens (formato W3C Design Token Community Group), copie los códigos hex y adáptelos en Tokens Studio o Style Dictionary.

¿Cuántos colores debería tener una paleta?

Tres a cinco para la mayoría de sitios web y apps: un color de marca primario, un acento o secundario, un neutral para texto, y uno o dos neutrales de utilidad (borde, fondo). Los sistemas de diseño más grandes usan 9 a 12 tokens nombrados (primario, secundario, éxito, advertencia, error, info, más neutrales). La herramienta empieza en cinco pero Agregar Color la extiende.

¿Qué es OKLCH y debería usarlo?

OKLCH es un espacio de color perceptualmente uniforme añadido a CSS en 2023. A diferencia de HSL, dos colores OKLCH con el mismo valor L realmente se ven igualmente brillantes. Para sistemas de diseño y escalas tonales consistentes es la nueva mejor práctica. El soporte de navegadores es universal en versiones actuales (Chrome 111+, Safari 15.4+, Firefox 113+). Para un retroceso elegante en navegadores más antiguos, envíe un valor hex sRGB junto al oklch().

Herramientas relacionadas