Generar una Paleta de Colores desde un Color
Crea una paleta completa a partir de un color base — tonos, complementarios y análogos — y copia cada código HEX.
Haz clic en cualquier muestra para copiar su HEX.
Se genera en local
Seguro para marcas sin lanzar
Sin cuenta
Conexión segura
Cómo funciona
- 1
Elige un color base
Pega un código HEX, normalmente el color de marca con el que ya estás comprometido.
- 2
Elige la regla de armonía
Complementaria para contraste, análoga para calma, triádica o tetrádica para variedad, tonos para una escala de un solo matiz.
- 3
Copia la paleta
Lleva los valores HEX directamente a tu hoja de estilos, editor de temas o herramienta de diseño.
Por qué usar esta herramienta
Cinco reglas de armonía
Complementaria, análoga, triádica, tetrádica y tonos: cada una es una relación definida en el círculo cromático, no un estado de ánimo.
Una entrada, conjunto completo
Da el color de marca que ya tienes; el resto se deriva de él, así la paleta queda anclada y no ensamblada.
Valores HEX copiables
Cada muestra viene con su código, lista para una hoja de estilos o un archivo de diseño.
Ver la relación
Los colores generados se muestran juntos, que es la única forma de juzgar si una combinación aguanta.
No se sube nada
La aritmética del círculo se ejecuta en tu navegador: ningún valor de color se envía a ningún sitio.
Gratis y sin cuenta
Sin registro, sin límite de paletas y sin marca de agua.
Qué es realmente una regla de armonía
Las reglas son posiciones en un círculo de matices, no opiniones estéticas. Toma el ángulo de matiz del color base y la regla te dice dónde se sitúan los demás: complementaria a +180°, análoga a unos ±30°, triádica a +120° y +240°, tetrádica como dos parejas complementarias. Ese es todo el mecanismo. Su utilidad no está en que estas combinaciones sean objetivamente bonitas, sino en que son **predecibles**. Una paleta construida por regla falla de maneras que puedes razonar, mientras que una ensamblada eligiendo muestras que cada una lucía bien por separado suele fallar de maneras que nadie sabe diagnosticar, porque no hay ninguna relación que inspeccionar.
Elegir entre las reglas
Cada regla resuelve un problema distinto. Los matices análogos están uno al lado del otro y comparten aire de familia, lo que los hace seguros y silenciosos: buenos para un fondo o una ilustración, flojos cuando necesitas que algo destaque. La complementaria maximiza la separación, que es justo lo que pide un acento: un color dominante y un matiz opuesto usado con parquedad para la acción que quieres que se pulse. La triádica da tres matices distintos que se mantienen en equilibrio, pero solo si uno domina claramente y los otros dos acompañan. La tetrádica ofrece cuatro y es genuinamente difícil; la mayoría de paletas tetrádicas que funcionan en la práctica usan dos de los colores en una fracción del área de los otros dos.
Por qué una interfaz necesita tonos más que matices
Las reglas anteriores responden a «qué colores combinan», pero un producto real necesita otra cosa: muchos escalones del mismo color. El fondo de una página, la superficie de una tarjeta, un borde de un píxel, una etiqueta deshabilitada y el texto de cuerpo suelen ser el mismo matiz con distintos valores de luminosidad, y que esos escalones estén repartidos con regularidad influye en el resultado final más que la elección entre triádica y tetrádica. Eso es lo que produce el modo tonos: un solo matiz escalonado en luminosidad, que es exactamente como se construye una escala de color en un sistema de diseño. La mayoría de proyectos necesita un matiz de acento y una buena escala neutra mucho más que cinco matices distintos.
Una paleta generada es un punto de partida, no un sistema de diseño
Lo que el círculo te da son relaciones entre matices. Lo que no puede darte son roles. Una paleta que funciona asigna a cada color un trabajo —esto es la superficie, esto la acción principal, esto la acción destructiva, esto el borde— y esas asignaciones dependen de tu interfaz, no de la geometría. El círculo tampoco sabe nada de legibilidad: un esquema triádico puede estar perfectamente equilibrado y aun así poner texto sobre un fondo a 2,5:1. Genera aquí las relaciones, asigna tú los roles y pasa cada pareja de texto sobre fondo por el verificador de contraste antes de que nada de eso llegue a una biblioteca de componentes.
La proporción 60-30-10
Un fallo habitual es tomar una paleta de cinco colores como permiso para usar cinco colores por igual, lo que produce una interfaz recargada y sin punto focal. La convención que sobrevive al contacto con maquetas reales es aproximadamente 60% de un neutro dominante, 30% de un secundario y 10% de acento. Bajo esa proporción, una pareja complementaria no son dos colores compitiendo: son una superficie grande y tranquila y una interrupción pequeña y deliberada. Por eso también las paletas lucen mejor en un mockup que en producción: el mockup enseña las muestras al mismo tamaño, y la interfaz no lo hará.
Convertir y ampliar una paleta
Una vez tienes el conjunto, el trabajo práctico es convertirlo en algo que una hoja de estilos pueda usar. Los valores de matiz llegan del círculo en HEX; si piensas derivar variantes de hover, activo y deshabilitado, conviértelos primero a HSL con el conversor de color y escalona la luminosidad, porque así cada variante se queda en la misma familia de matiz en vez de derivar. Guarda los colores base como única fuente de verdad y genera las variantes desde ellos en lugar de almacenar decenas de códigos hex casi idénticos: una paleta que crece a mano se vuelve incoherente en pocos meses.
Errores comunes que conviene evitar
- Usar todos los colores de la paleta con el mismo peso. Cinco colores a igual área producen una interfaz sin punto focal; mantén en torno a 60% dominante, 30% secundario y 10% acento para que el acento se lea como tal.
- Elegir el esquema antes de saber qué debe destacar. La análoga es tranquila y floja para enfatizar; la complementaria existe para hacer que un elemento no se pueda pasar por alto. Elige la regla por el trabajo, no por cómo lucen las muestras.
- Suponer que una paleta equilibrada es legible. El círculo cromático no sabe nada de relaciones de contraste: una pareja armónica puede seguir dejando el texto a 2,5:1 contra su fondo.
- Construir una interfaz solo a base de matices. Superficies, bordes, estados deshabilitados y texto de cuerpo son casi siempre un mismo matiz a distintas luminosidades; una buena escala de tonos importa más en el día a día que un cuarto color de acento.
- Elegir a mano las variantes de hover y activo como códigos hex nuevos. Derívalas escalonando la luminosidad en HSL desde el color base, o la familia irá derivando de matiz según crece la paleta.
Comparativa
| KeroTools | Galerías de paletas | Software de diseño | |
|---|---|---|---|
| Parte de tu color de marca | Sí | Normalmente aleatorio | Sí |
| Reglas de armonía con nombre | Cinco | Rara vez se indican | Sí |
| Valores enviados a un servidor | Nunca | A menudo | No |
| Requiere cuenta | No | A menudo para guardar | Licencia requerida |
| Funciona sin conexión | Tras la primera carga | No | Sí |
| Coste | Gratis | Gratis / de pago | De pago |
Características
Complementaria
El matiz justo opuesto, a 180°: máxima separación, para un solo acento frente a un color dominante.
Análoga
Matices vecinos separados unos 30°, que comparten aire de familia y se leen tranquilos y coherentes.
Triádica
Tres matices repartidos cada 120°: vivos y equilibrados, pero exige un dominante claro.
Tetrádica
Cuatro matices en dos parejas complementarias; el esquema más rico y el más difícil de equilibrar.
Tonos
Un solo matiz escalonado en luminosidad: la escala que las interfaces necesitan de verdad para superficies, bordes y texto.
HEX en cada muestra
Cada color generado lleva su código, listo para copiar.
Sin instalación
Nada que descargar ni instalar: funciona en la propia página web.
Compatible con árabe y RTL
Interfaz completa en ocho idiomas, incluido el árabe de derecha a izquierda.
Seguro por defecto
Servido por HTTPS, sin rastreo de archivos ni subidas a terceros.
Quién la usa
Diseñadores
Derivar un conjunto coherente de un color de marca existente en vez de reunir muestras a ojo.
Desarrolladores front-end
Obtener una escala de tonos para superficies y bordes sin elegir a mano una docena de grises.
Pequeños negocios
Ampliar el único color de un logotipo a algo utilizable en una web y en su material impreso.
Quien personaliza una plantilla
Rellenar las casillas de secundario y acento que pide un editor de temas, partiendo de un color que ya tienen.
Preguntas Frecuentes
No. Todo se ejecuta localmente en tu navegador — nada se sube, guarda ni comparte.
Sí — totalmente gratis, sin cuenta y sin límites.