PK Systems PK Systems
Herramientas de color

Generador de Paleta de Colores

Genera paletas hermosas de 5 colores que sí funcionan — banco de semillas curado, reglas de armonía, bloquea y vuelve a tirar.

Generador de Paleta de Colores

Pulsa Espacio para volver a tirar. Bloquea cualquier color para conservarlo.

Variables CSS


    

Qué hace este generador

Lanza una paleta de cinco colores que sí podés usar — no el caos que sale de un RGB totalmente al azar. Cerca de dos tercios de las veces toma de un banco curado de semillas probadas por diseñadores, y el resto se construye algorítmicamente con reglas de armonía (análoga, triádica, complementaria dividida, tetrádica, complementaria con neutros) y rangos de saturación y luminosidad ajustados a cada estilo. Elegí un estilo — cálido, frío, pastel, vibrante, tierra, monocromático o automático — para sesgar la salida. Bloqueá cualquier color para mantenerlo entre tiradas; los espacios sin bloquear se reemplazan en cada nueva ronda.

Cómo usar el generador

Elegí un estilo (o dejalo en Automático para una mezcla). Hacé clic en Generar o pulsá Espacio para lanzar una paleta nueva. Hacé clic en cualquier código hex para copiarlo. Hacé clic en el candado de un color que quieras conservar y volvé a tirar para reemplazar los otros. Usá Copiar CSS para llevarte un bloque :root de propiedades personalizadas listo para pegar, o Copiar JSON para un arreglo de hex que entra en cualquier config o exportación de design tokens.

Qué hace que una paleta se sienta intencional

Cinco colores es el punto justo — variedad para principal / secundario / acento / neutro claro / neutro oscuro, sin que ninguno se pierda. Dentro de esos cinco, planeá una jerarquía: un color dominante lleva 60% del layout, un secundario 30%, y los otros tres reparten 10%. El estilo Automático es genial para ideación; Tierra y Pastel funcionan para marcas editoriales y de bienestar; Vibrante para productos infantiles, gaming y landings con muchos CTA; Monocromático cuando querés una rampa de un solo tono.

Cuándo funciona cada estilo

Automático — la mejor mezcla entre semillas curadas y esquemas algorítmicos; el punto de partida correcto si todavía no sabés qué querés. Cálido — paletas de atardecer, marcas de comida, campañas de energía. Frío — fintech, SaaS, cualquier cosa que necesite sentirse calma y confiable. Pastel — productos infantiles, marcas de belleza, heros suaves. Vibrante — gaming, música, cualquier cosa que tenga que captar atención. Tierra — outdoor, sostenibilidad, agro, inmuebles. Monocromático — editorial minimalista, sistemas de marca de un solo color, diseño accesible.

Preguntas frecuentes

¿Por qué los colores no se ven totalmente aleatorios?
Porque el RGB aleatorio puro queda horrible — tonos que pelean, medios tonos sucios, sin jerarquía. Alrededor de dos tercios de las paletas vienen de un banco curado de semillas aprobadas por diseñadores (con pequeño jitter de tono para que no veas los mismos cinco colores dos veces seguidas). El otro tercio se arma con reglas de armonía y rangos de saturación/luminosidad probados. El resultado sigue pareciendo aleatorio, pero cada tirada es algo que podrías publicar.
¿Puedo bloquear un color y volver a tirar el resto?
Sí. Hacé clic en el candado de cualquier color para congelarlo. Los colores bloqueados se mantienen entre tiradas; los slots desbloqueados reciben colores nuevos. Es el flujo que usa la mayoría de diseñadores: dejá el color de marca bloqueado y volvé a tirar los otros cuatro hasta que algo cierre.
¿Las paletas son accesibles (WCAG)?
No automáticamente — la mayoría de paletas tiradas contiene al menos un par que falla WCAG cuando se usa como texto sobre fondo. Usá el resultado como punto de partida y revisá combinaciones específicas de texto/fondo con nuestro Verificador de Contraste. Si la paleta es para imágenes de marketing (sin texto), tenés más flexibilidad.
¿Cómo exporto a mi herramienta de diseño?
Copiar CSS emite un bloque :root { --color-1: #...; } listo para pegar en un stylesheet. Copiar JSON emite un arreglo de hex — útil para plugins de Figma, JSON de design tokens o cualquier config. Para Tailwind, pegá el JSON en tailwind.config.js en theme.extend.colors.
¿Qué genera "Monocromático" exactamente?
Cinco tonos de la misma matiz — mismo H, misma S, con L variando de 0,92 (muy claro) a 0,18 (muy oscuro). El resultado es una rampa monocromática completa, ideal para un sistema de marca de un solo color o una paleta de superficies neutras. Bloqueá el color del medio en el color de tu marca y volvé a tirar para variar la saturación manteniendo la forma de la rampa.
¿Se envía algo al servidor?
No. El banco de semillas, la matemática de armonía y las acciones de copiar corren en tu navegador. Abrí DevTools → pestaña Red y volvé a tirar — no se hace ninguna petición. Tirá paletas para productos sin lanzar sin filtrar nada.