|
| 1 | +{ |
| 2 | + "title": "Generador de paleta de color (5 esquemas desde una base)", |
| 3 | + "shortDescription": "Genera paletas armoniosas desde un color base: complementario, análogo, triádico, tetrádico, monocromático. Click en muestra para copiar hex.", |
| 4 | + "description": "Elige un color base, escoge un esquema de teoría del color y obtén una paleta coordinada. Click en muestras para copiar hex individuales, o copiar todo de una vez para herramientas de diseño y variables CSS.", |
| 5 | + "metaDescription": "Generador gratis de paletas. 5 esquemas (complementario, análogo, triádico, tetrádico, monocromático) desde cualquier base. Click para copiar hex.", |
| 6 | + "keywords": ["generador paleta color", "esquema color", "colores complementarios", "armonía color", "paleta diseño"], |
| 7 | + "input": { |
| 8 | + "baseColor": "Color base", |
| 9 | + "scheme": "Esquema" |
| 10 | + }, |
| 11 | + "scheme": { |
| 12 | + "complementary": "Complementario (opuesto)", |
| 13 | + "analogous": "Análogo (3 adyacentes)", |
| 14 | + "triadic": "Triádico (3 equidistantes)", |
| 15 | + "tetradic": "Tetrádico (4 equidistantes)", |
| 16 | + "monochromatic": "Monocromático (5 luminosidades)" |
| 17 | + }, |
| 18 | + "result": { "palette": "Paleta generada" }, |
| 19 | + "copy": "Copiar", |
| 20 | + "copyAll": "Copiar todo", |
| 21 | + "copied": "¡Copiado!", |
| 22 | + "copyColor": "Copiar color", |
| 23 | + "article": { |
| 24 | + "sections": [ |
| 25 | + { |
| 26 | + "heading": "Los cinco esquemas de teoría del color", |
| 27 | + "paragraphs": [ |
| 28 | + "Complementario: dos colores en extremos opuestos del círculo (180°). Alto contraste, vibrante. Para acentos, CTAs y crear focos.", |
| 29 | + "Análogo: tres colores adyacentes (30°). Armoniosos, bajo contraste. Comunes en la naturaleza; ideales para fondos y superficies UI.", |
| 30 | + "Triádico: tres colores equidistantes (120°). Vibrante y equilibrado. Para diseños lúdicos o energéticos.", |
| 31 | + "Tetrádico (rectángulo): cuatro colores formando rectángulo (90°). Paleta rica pero más difícil de equilibrar — usa uno dominante y otros como acentos.", |
| 32 | + "Monocromático: tonos, tintes y matices de un solo tono. Sofisticado y unificado. Común en diseños minimalistas y branding corporativo." |
| 33 | + ] |
| 34 | + }, |
| 35 | + { |
| 36 | + "heading": "Elegir color de partida", |
| 37 | + "paragraphs": [ |
| 38 | + "Colores de marca: la mayoría parte de un logo o color de marca existente. Pruébalo como base en los 5 esquemas para encontrar el mejor encaje.", |
| 39 | + "Inspiración: toma un color de fotografía, arte o naturaleza. Colores vívidos (alta saturación, luminosidad media) funcionan mejor de base; muy pálidos o oscuros producen paletas deslavadas.", |
| 40 | + "Accesibilidad: asegúrate de que tu paleta final tenga contraste suficiente para texto. Usa el contrast checker para verificar pares fondo/texto WCAG AA (4.5:1 normal)." |
| 41 | + ] |
| 42 | + }, |
| 43 | + { |
| 44 | + "heading": "Usar la paleta", |
| 45 | + "paragraphs": [ |
| 46 | + "Variables CSS: define los colores como variables :root (--color-primary, --color-accent, etc.) para cambiar tema en un solo lugar.", |
| 47 | + "Herramientas de diseño: pega los hex en bibliotecas de Figma, Sketch o Adobe XD. La mayoría aceptan hex directamente; algunas también HSL o nombres CSS.", |
| 48 | + "Uso limitado: incluso con 5 colores, los diseños reales suelen usar 2-3 prominentemente y el resto poco. La regla 60-30-10 (60% dominante, 30% secundario, 10% acento) es buen punto de partida." |
| 49 | + ] |
| 50 | + } |
| 51 | + ], |
| 52 | + "howTo": [ |
| 53 | + { "name": "Elige color base", "text": "Usa el picker o pega un código hex." }, |
| 54 | + { "name": "Elige esquema", "text": "5 opciones: complementario, análogo, triádico, tetrádico, monocromático." }, |
| 55 | + { "name": "Click muestras para copiar", "text": "Cada muestra es botón — click para copiar su hex." }, |
| 56 | + { "name": "O copia todo a la vez", "text": "El botón 'Copiar todo' copia todos los hex separados por comas." } |
| 57 | + ] |
| 58 | + }, |
| 59 | + "faq": [ |
| 60 | + { "q": "¿Qué esquema usar?", "a": "Análogo es la opción más segura — tres colores cercanos crean armonía sin monotonía. Complementario va bien para énfasis (CTAs). Monocromático para marcas mínimas/sofisticadas. Triádico para sensación lúdica/energética." }, |
| 61 | + { "q": "¿Más de 5 colores?", "a": "No con esta herramienta — generamos los 2-5 canónicos. Para paletas mayores, usa la salida análoga y crea sombras monocromáticas de cada (combina esquemas)." }, |
| 62 | + { "q": "¿Usa espacio de color perceptual?", "a": "Usamos matemática HSL, rápida y predecible. Para resultados perceptualmente uniformes (mejor para tuning de accesibilidad), avanzados usan OKLCH o CIELAB. HSL basta para casi todo el diseño." }, |
| 63 | + { "q": "¿Mi paleta será accesible?", "a": "No automáticamente. Los esquemas garantizan armonía estética, no contraste para texto. Verifica siempre combinaciones texto-sobre-fondo con el contrast checker antes de lanzar." }, |
| 64 | + { "q": "¿Guardar paletas favoritas?", "a": "Aún no — copia los hex a tu design system o notas. URLs de paleta guardable en el roadmap." }, |
| 65 | + { "q": "¿Y Material Design o Tailwind?", "a": "Esos son sistemas pre-curados. Genera un esquema base aquí y luego busca colores Material/Tailwind similares. Algunas apps exportan hex compatibles directamente." }, |
| 66 | + { "q": "¿Por qué mi paleta luce 'plana'?", "a": "Si tu base es muy pálida (alta luminosidad) o muy oscura (baja luminosidad), la paleta tiene rango dinámico limitado. Elige base con luminosidad media (40-60%) y alta saturación (70%+) para resultados vívidos." }, |
| 67 | + { "q": "¿Los datos salen del navegador?", "a": "No. Todos los cálculos corren localmente; nada se envía a un servidor." } |
| 68 | + ] |
| 69 | +} |
0 commit comments