Generador de paletas
Introduce un color base y genera al instante una paleta completa para sitios web, paneles de administración, librerías de componentes y sistemas de diseño. La herramienta produce una escala principal del 50 al 950, una escala neutra y cuatro esquemas de color: monocromático, análogo, complementario y triádico. Cada muestra sugiere texto en negro o blanco junto con su ratio de contraste WCAG, de modo que sea claro cuándo un color sirve como fondo y cuándo puede llevar texto. Los resultados se copian como variables CSS o JSON y se integran directamente en Tailwind, CSS-in-JS, tokens de diseño y sistemas multitema. Todo se procesa localmente en el navegador, así que los colores de marca sin publicar y los archivos de diseño confidenciales nunca salen de tu dispositivo.
- Genera una escala completa del 50 al 950 que cubre fondos, bordes, botones, enlaces y estados de énfasis
- Admite esquemas monocromático, análogo, complementario y triádico para planificar color principal, secundario, de acento y de contraste
- Salida basada en OKLCH que produce pasos de luminosidad más uniformes, ideal para escalas de tema y sistemas de modo oscuro
- Cada muestra sugiere texto en negro o blanco con su ratio WCAG, para que el uso quede claro de un vistazo
- Copia muestras individuales, un bloque completo de variables CSS o una paleta JSON lista para librerías de componentes y tokens de diseño
Previsualiza botones, enlaces, insignias y tarjetas con la paleta actual para confirmar la jerarquía visual.
:root {
--color-primary-50: #deedff;
--color-primary-100: #d0dfff;
--color-primary-200: #b8c7ff;
--color-primary-300: #9eabff;
--color-primary-400: #7f89ff;
--color-primary-500: #6368e6;
--color-primary-600: #4f51c4;
--color-primary-700: #3c3ba3;
--color-primary-800: #2a2583;
--color-primary-900: #1c1168;
--color-primary-950: #0e004a;
--color-primary: #6469e8;
--color-secondary: #996cc9;
--color-accent: #509ad6;
--color-contrast: #806900;
--color-neutral-50: #ecf6ff;
--color-neutral-100: #dfe9f4;
--color-neutral-200: #c8d2dd;
--color-neutral-500: #737b85;
--color-neutral-700: #464e57;
--color-neutral-900: #20272f;
}{
"primary": {
"50": "#deedff",
"100": "#d0dfff",
"200": "#b8c7ff",
"300": "#9eabff",
"400": "#7f89ff",
"500": "#6368e6",
"600": "#4f51c4",
"700": "#3c3ba3",
"800": "#2a2583",
"900": "#1c1168",
"950": "#0e004a"
},
"scheme": {
"primary": "#6469e8",
"secondary": "#996cc9",
"accent": "#509ad6",
"contrast": "#806900"
},
"neutral": {
"50": "#ecf6ff",
"100": "#dfe9f4",
"200": "#c8d2dd",
"300": "#afb9c3",
"400": "#9099a3",
"500": "#737b85",
"600": "#5c646d",
"700": "#464e57",
"800": "#313941",
"900": "#20272f",
"950": "#0b1219"
}
}Resumen
Un solo panel convierte un color de marca aislado en una paleta completa lista para llevar al código. Escala, esquemas, neutros, indicaciones de contraste y formatos de exportación conviven en el mismo lugar, así nadie tiene que trasladar valores de color entre herramientas separadas.
- 01
Generación de la escala principal
Genera los pasos 50, 100, 200 y así hasta el 950, con una nomenclatura que se asigna con limpieza a Tailwind, tokens de diseño y sistemas de variables CSS.
- 02
Cuatro esquemas de color
Muestra en paralelo los esquemas monocromático, análogo, complementario y triádico, cubriendo UIs de tipo herramienta, extensiones naturales de marca, énfasis fuerte y sistemas visuales más ricos.
- 03
Control de luminosidad con OKLCH
Usa OKLCH para gestionar luminosidad y croma, produciendo pasos más uniformes a la vista y reduciendo los desplazamientos de tono habituales en las escalas HSL tradicionales.
- 04
Escala neutra
Genera una escala neutra a juego para fondos, bordes, texto atenuado y superficies de tarjeta, para que la paleta no se reduzca a un color principal aislado.
- 05
Indicaciones de contraste de texto
Cada muestra recomienda texto en negro o blanco con su ratio WCAG, ofreciendo una referencia rápida de legibilidad para botones, insignias y colores de estado.
- 06
Vista previa de la interfaz
Botones, enlaces, insignias y tarjetas integrados simulan una UI real, para que la paleta se juzgue en contexto y no como muestras aisladas.
- 07
Exportación a CSS y JSON
Exporta variables CSS y una paleta JSON de una sola vez, listas para global.css, archivos de tema, temas de librerías de componentes y gestión de tokens de diseño.
- 08
Predefinidos y punto de partida aleatorio
Los predefinidos de marca comunes agilizan las direcciones habituales, mientras que la acción aleatoria ayuda a explorar combinaciones inesperadas al inicio de un proyecto.
Cómo usarla
Pasa de un solo color de marca a una paleta reutilizable en unos pocos pasos, y llévate variables CSS y JSON listos para ingeniería.
- 01
Pega o elige un color base: por ejemplo el principal de la marca, un tono de un producto heredado o un color muestreado de una captura.
- 02
Elige un esquema de color: monocromático para UIs de herramienta estables, análogo para extensiones naturales de marca, complementario para contraste fuerte o triádico para sistemas más ricos.
- 03
Elige un estilo: suave, equilibrado, vívido u oscuro, para ajustar la saturación y la luminosidad generales al contexto del producto.
- 04
Revisa la escala principal, el esquema de color y la vista previa de la interfaz, y confirma que botones, enlaces, insignias y tarjetas tengan suficiente jerarquía.
- 05
Haz clic en cualquier muestra para copiar su valor, o copia todas las variables CSS y el JSON de una vez y llévalos de vuelta al proyecto.
Detalles
El resultado no es un moodboard efímero, sino una paleta que puede pasar a ingeniería, revisión de diseño y mantenimiento multitema, y seguir funcionando con el tiempo.
- La escala principal usa la nomenclatura del 50 al 950 para asignarse con limpieza a Tailwind, variables CSS, librerías de componentes y tokens de diseño
- La salida CSS expone las variables principal, de esquema y neutra en un solo bloque, lista para global.css, theme.css o la configuración de un sistema de diseño
- La salida JSON conserva la estructura principal, de esquema y neutra para archivos de configuración, pipelines de tokens y herramientas de generación de temas
- Cada muestra se copia con un clic, práctico para depuración durante el desarrollo, revisiones de diseño y experimentos rápidos de UI
- Cada muestra indica un color de texto recomendado y su ratio de contraste como referencia de legibilidad para botones, insignias e indicadores de estado
- La acción aleatoria acelera la exploración de marca temprana, y los predefinidos permiten arrancar rápido con direcciones de marca comunes
- La vista previa de la interfaz muestra botones principales y secundarios, enlaces, insignias y fondos de tarjeta en una sola vista para detectar problemas de paleta a tiempo
- El estilo oscuro reduce a la vez luminosidad y croma, ofreciendo un punto de partida para el modo oscuro en lugar de una inversión ingenua de la paleta clara
- Los esquemas análogo y triádico ajustan los ángulos secundario y de acento según el esquema, para que la paleta se sienta como un sistema y no como colores sin relación
- Toda la generación ocurre localmente en el navegador, apta para colores de marca sin publicar, recursos internos y archivos de diseño confidenciales
Casos de uso
El valor de una paleta generada está en convertir un color de marca aislado en un sistema mantenible, para que temas, estados de componentes, niveles de superficie y extensiones de marca crezcan sobre el mismo conjunto de pasos.
-
Diseño de color del tema de producto
Expande un único color principal de marca en una escala completa para botones, enlaces, fondos, bordes y énfasis, para que la página de inicio y las vistas internas compartan el mismo lenguaje.
-
Especificación de color de la librería de componentes
Define escalas compartidas y colores de estado para Button, Badge, Alert, Tabs, Input y componentes similares, para que ninguno mantenga sus propios valores de color locales.
-
Preparación del modo oscuro
Genera una escala principal y neutra en estilo oscuro como punto de partida para temas oscuros, y luego refina fondos, bordes, texto y acentos encima.
-
Despliegue de tokens de diseño
Exporta la paleta como variables CSS y JSON y sincronízala con temas frontend, sitios de documentación, librerías del sistema de diseño y pipelines de tema multiplataforma.
-
Extensión del color de marca
Convierte un solo color de marca en una combinación utilizable de superficies claras, principal, acento oscuro y texto legible, para que la marca sobreviva a distintas densidades de UI.
-
Colores de apoyo para visualización de datos
Usa los esquemas análogo, complementario o triádico como punto de partida para los colores de categoría de un gráfico, y luego verifica la legibilidad con un verificador de contraste.
-
Páginas de aterrizaje y campañas
Produce rápidamente un conjunto coordinado de colores de héroe, CTA, insignia y tarjeta que dé a las páginas de campaña efímeras una base visual estable.
-
Temas de paneles de administración
Mantén barras laterales, estados de tabla, filtros, tarjetas de panel y notificaciones alineados a la misma base de paleta, para que cada módulo no se desvíe por su cuenta.
-
Productos multimarca y de marca blanca
Prepara paletas separadas por marca o cliente y aliméntalas a la misma plantilla de tokens, haciendo el cambio de tema predecible y mantenible.
-
Color de ilustraciones e iconos
Ofrece escalas de color a juego para ilustraciones, conjuntos de iconos y recursos de marca, para que el arte plano hable el mismo lenguaje que la interfaz.
Ver también
Cuando el color base viene de un archivo de diseño, una captura o CSS heredado en formatos mezclados, normalízalo primero con Conversor de colores y luego vuelve para generar la escala. Antes de que la paleta llegue al texto principal, los botones y las etiquetas de estado, comprueba el par real de primer plano y fondo en Comprobador de contraste ; cuando la escala fluya hacia fondos de héroe, acentos suaves o visuales de campaña, delega la transición en Generador de degradados para que la paleta y los degradados compartan un mismo lenguaje visual en lugar de divergir.
Términos de color explicados
Estos términos determinan cómo se usa una paleta en la UI de producto, la identidad visual y los sistemas multitema. Compartir definiciones en el equipo evita el debate recurrente sobre en qué paso debe caer el color de marca.
-
Color principal
El color más central de una marca o producto, aplicado a botones principales, enlaces, estados seleccionados y énfasis clave. Una paleta bien construida suele tener un único principal verdadero.
-
Escala
Una serie de valores con un tono similar en distintos pasos de luminosidad. Los sistemas frontend suelen usar del 50 al 950 para ir de fondos claros hasta énfasis profundo.
-
Monocromático
Ajusta luminosidad y croma en torno a un mismo tono. Es estable y contenido, ideal para interfaces de tipo herramienta y páginas con alta densidad de información.
-
Análogo
Elige colores vecinos en la rueda cromática, produciendo una paleta natural y armónica que encaja en la mayoría de UIs de producto y extensiones de marca.
-
Complementario
Usa colores opuestos en la rueda cromática para un contraste más fuerte. Útil para acciones principales, avisos y visuales de marketing que necesitan destacar.
-
Triádico
Selecciona tres colores separados unos 120 grados. Permite sistemas visuales más ricos, pero exige controlar la saturación y el área de uso para mantener la coherencia.
-
OKLCH
Un espacio de color que sigue la percepción humana más de cerca que HSL, útil para crear escalas uniformes y paletas de modo oscuro accesibles.
-
Tokens de diseño
Guardar los colores como variables con nombre o datos estructurados para reutilizarlos en archivos de diseño, CSS, librerías de componentes y sistemas multitema, en lugar de dispersarlos como valores literales.
Buenas prácticas
Una paleta que dura tiene que equilibrar reconocimiento de marca, jerarquía de información, legibilidad y mantenibilidad de ingeniería. Recoger estas prácticas en un sistema de diseño mantiene la paleta estable entre temas y líneas de producto.
- Define primero el rol del color base: reconocimiento de marca, acción principal, color de enlace, color de gráfico o indicador de estado. Cada rol requiere una intensidad de escala distinta
- No uses el paso 500 para todo. Fondos claros, bordes, estados hover y énfasis oscuro necesitan cada uno su propio paso para que la paleta mantenga diferenciación
- Para el texto principal y de apoyo, no te fíes solo del instinto visual. Combina la paleta con verificaciones de contraste, sobre todo en botones e insignias
- El modo oscuro no es una simple inversión de la paleta clara. Revisa fondos, bordes, texto y acentos por separado, y considera publicar un conjunto de tokens oscuros dedicado
- Promueve la paleta final a tokens para que el mismo color no exista como varios literales casi duplicados dispersos por los archivos
- Cuando un color de marca es demasiado claro u oscuro, prefiere ajustar luminosidad y croma antes que cambiar el tono; así conservas mejor la identidad de marca
- Gestiona por separado los colores de gráficos y los colores de acción de la UI, para que un único "color de marca" no difumine los límites semánticos entre datos, estado y acciones
- Antes del lanzamiento, valida botones, enlaces, estados de formulario, avisos y estados deshabilitados en páginas reales, no solo en vistas previas aisladas
Limitaciones
La generación automática acelera el punto de partida, pero no sustituye una revisión de marca completa, una revisión de diseño ni pruebas de accesibilidad. Conocer los límites ayuda a situar la herramienta donde de verdad aporta valor.
- Las escalas generadas parten de una base algorítmica; si encajan de verdad con la marca sigue requiriendo el criterio de los equipos de diseño y marca
- El texto negro o blanco recomendado se calcula solo a partir de la muestra. Fondos complejos, imágenes, degradados y superficies superpuestas necesitan una verificación de contraste dedicada
- OKLCH es cada vez más común en navegadores modernos y sistemas de diseño, pero algunas cadenas de herramientas heredadas aún necesitan convertir los valores a HEX o RGB primero
- Los esquemas triádico y complementario pueden crear un conflicto visual fuerte, así que controla el área, la saturación y el contexto al aplicarlos
- La herramienta solo produce paletas y variables; no modifica automáticamente tu configuración de Tailwind, tus archivos CSS ni tus archivos de diseño
- Para superficies sensibles a la accesibilidad, valida cada par de primer plano y fondo con un verificador de contraste. La recomendación de la herramienta es una pista, no un veredicto
- Una paleta limpia no garantiza una jerarquía visual fuerte. Las páginas importantes siguen necesitando revisión de diseño y producto antes del lanzamiento
Preguntas frecuentes
Preguntas que los equipos hacen con más frecuencia al usar un generador de paletas para construir temas de producto, sistemas de componentes y diseños multitema.
¿Dónde encaja mejor un generador de paletas?
Es más útil cuando se parte de un solo color base y se quieren generar rápido temas de producto, escalas de componentes, extensiones de marca, una base de modo oscuro y tokens frontend exportables.
¿Por qué usar OKLCH para las escalas?
La luminosidad de OKLCH sigue la percepción más de cerca que HSL, así que los pasos claros y oscuros quedan más uniformes y el tono no se desvía al cambiar la luminosidad.
¿Cómo se deben usar los pasos del 50 al 950?
Los pasos 50 a 100 son habituales para fondos y superficies sutiles, 400 a 600 para botones principales y enlaces, y 700 a 950 para énfasis oscuro, fondos de modo oscuro o colores de texto.
¿Cómo elijo entre monocromático, análogo, complementario y triádico?
El monocromático encaja en interfaces de tipo herramienta, el análogo en armonías de marca naturales, el complementario para énfasis fuerte, y el triádico para sistemas visuales más ricos cuando controlas la saturación y el área.
¿Puedo usar las variables CSS directamente?
Sí. Cópialas a una hoja de estilos global, un archivo de tema o la configuración de una librería de componentes, y ajusta los prefijos de las variables a las convenciones del proyecto.
¿Para qué sirve la salida JSON?
Encaja en archivos de configuración, scripts de tokens de diseño, pipelines de generación de temas y fuentes de datos de documentación, y facilita compartir la misma paleta entre plataformas.
¿El texto negro o blanco recomendado garantiza la accesibilidad?
No. Es una sugerencia rápida basada solo en la muestra. Para producción, valida el tamaño de texto real, el peso, el fondo y el estado con un verificador de contraste dedicado.
¿Puedo usar esto para una paleta de Tailwind?
Sí. La estructura de escala del 50 al 950 se acerca a las convenciones de Tailwind, así que se asigna con limpieza a theme.extend.colors o a un espacio de nombres propio.
¿El estilo oscuro es lo mismo que el modo oscuro?
No exactamente. El estilo oscuro es un punto de partida para temas oscuros, pero un modo oscuro completo aún requiere trabajo separado sobre fondos, bordes, texto y colores de estado con las verificaciones de contraste adecuadas.
¿Se sube algún dato de color?
No. El análisis, la generación de escalas, las vistas previas y la exportación se ejecutan localmente en el navegador, así que los colores de marca sin publicar y los archivos de diseño confidenciales siguen siendo privados.
¿Por qué el mismo color base se ve distinto en cada estilo?
El estilo controla la saturación y la luminosidad generales. Suave baja el croma, vívido lo eleva y oscuro reduce la luminosidad, así que la escala resultante cambia aunque el tono se mantenga.
¿Qué hago si el color de marca es demasiado claro para ser el principal?
Prueba el estilo vívido u oscuro para conseguir un paso 500 a 700 más fuerte, o trata el color de marca como acento y elige un color más legible como principal, conservando el color de marca para el énfasis.
Herramientas relacionadas
La generación de paletas es una etapa dentro de un flujo de color más amplio. Combínala con conversión de color, verificación de contraste y generación de degradados para pasar de valores normalizados a un sistema visual completo y accesible.