Resumen
Esta herramienta te ayuda a transformar un color inicial en un conjunto estructurado de colores relacionados. Así es más fácil construir interfaces con superficies, estados y acentos coherentes sin tener que improvisar cada paso. También sirve cuando necesitas una dirección visual temprana para una marca, una landing page o un concepto de producto. En lugar de trabajar con un solo color aislado, obtienes una pequeña familia cromática que puede apoyar títulos, fondos, resaltados e ինտերacciones. Usa los valores generados como punto de partida y ajústalos después en tu archivo de diseño o en tu código si necesitas más contraste, tonos neutros más cálidos o un resultado más sobrio.
Casos de uso
- Escala para interfazConstruye tonos para botones, paneles, estados hover y fondos suaves a partir de un color central de marca.
- Dirección para una landingPrueba un hero, un color de acento y secciones de apoyo con una familia cromática coherente antes de cerrar el diseño.
- Borrador de sistema visualCrea tokens iniciales para colores primary, secondary, surface y emphasis al definir un tema nuevo.
- Tablero de marcaExpande un color principal en una paleta útil para presentaciones, moodboards y bocetos de identidad.
Como funciona
- 1
Elige un color base que marque el punto de partida.
- 2
Define cuántos colores relacionados quieres en el conjunto.
- 3
Revisa las muestras y copia los valores que necesites para diseño o código.
Ejemplos
Paleta para dashboard SaaS
Entrada: Color base: #1F7A8C, 7 muestras
Salida: Un conjunto equilibrado con fondos turquesa muy claros, acentos UI de tono medio y una base oscura
Funciona bien para navegación, gráficos y estados destacados.
Landing editorial
Entrada: Color base: coral cálido, 5 muestras
Salida: Tintes melocotón suaves, un coral central saturado y un tono más oscuro para énfasis
Útil cuando la página necesita calidez sin verse demasiado intensa.
Moodboard de lanzamiento
Entrada: Color base: violeta intenso, 9 muestras
Salida: Varios pasos desde ciruela casi negra hasta lavanda clara
Da suficiente variedad para tarjetas, separadores y llamadas de producto.
FAQ
¿La paleta conserva siempre la misma sensación que el color base?
La serie sigue ligada al color inicial, pero los pasos más claros y más oscuros pueden sentirse más neutros o más intensos según la distancia respecto al origen. Si buscas un clima concreto, elige solo las muestras más cercanas a ese resultado.
¿Puedo usar los resultados directamente en código?
Sí. Los valores generados están pensados para copiarse en estilos, tokens o archivos de tema. Si tu proyecto necesita nombres propios, renómbralos antes de integrarlos.
¿Qué hago si una muestra queda demasiado clara para texto o botones?
Probablemente esa muestra funcione mejor como fondo o borde. Para texto y elementos interactivos, elige un tono más profundo dentro del mismo conjunto.
¿Una paleta más grande siempre es mejor?
No necesariamente. Más muestras ofrecen más opciones, pero también complican la coherencia. Para productos, suele funcionar mejor empezar con menos tonos y añadir solo los que realmente uses.