Explore color as a continuous space
Tonal Field es una herramienta de diseño de sistemas de color que permite explorar el color como un campo continuo, controlado por dos dimensiones intuitivas: Energy (Calm → Vivid) y Tension (Soft → Sharp).
A diferencia de herramientas como Coolors que generan paletas aleatorias, Tonal Field ofrece control inteligente y criterio matemático para crear sistemas de color utilizables directamente en producción.
Explora el color como un espacio continuo en lugar de colores discretos. Manipula Energy y Tension para entender cómo se relacionan los colores.
- Energy: Controla la saturación y vivacidad (Calm → Vivid)
- Tension: Define la armonía y contraste (Soft → Sharp)
- Algoritmo propio basado en métricas de color OKLCH
Generación automática de sistemas de color utilizables:
- Primary, Accent, Background, Surface, Text, Muted
- Roles claramente definidos para diseño de UI
- Jerarquía visual integrada
- Cálculo automático de contraste WCAG (AA/AAA)
- Simulador de daltonismo (protanopia, deuteranopia, tritanopia)
- Auto-fix de contraste manteniendo coherencia tonal
Genera automáticamente variantes light y dark coherentes con métricas de contraste.
- CSS variables
- Tailwind config
- JSON tokens
- Material UI theme
- Plugins para Figma, Sketch, VS Code
- Apple .clr format
| Sprint | Feature | Estado |
|---|---|---|
| 0 | Setup fundacional | ✅ Completado |
| 1 | Energy & Tension | ✅ Completado |
| 2 | Field 2D interactivo | ✅ Completado |
| 3 | Palette kits | ✅ Completado |
| 4 | Accesibilidad | ✅ Completado |
| 5 | Free/Pro model | ✅ Completado |
| 6 | Export & persistencia | ✅ Completado |
| 7 | Polish & release | ✅ Completado |
| 8+ | Post-MVP features | 📋 Planificado |
Versión actual: MVP funcional y público
| Aspecto | Coolors | Tonal Field | Ventaja |
|---|---|---|---|
| Entrada rápida | ✅ | Coolors | |
| Control real | ❌ | ✅ | TF |
| Sistema de color | ❌ | ✅ | TF |
| Accesibilidad | ❌ | ✅ | TF |
| Comunidad | Pasiva | Activa | TF |
| Dev friendliness | Media | Alta | TF |
| Diferenciación | Baja | Muy alta | TF |
Veredicto: Tonal Field es más inteligente y potente. El próximo paso es mejorar accesibilidad/claridad para nuevos usuarios.
- Frontend: Next.js 14 + TypeScript + React 18
- Color space: OKLCH (native, WCAG-aware)
- Styling: CSS + CSS variables
- State management: React hooks
- Build: Webpack (Next.js default)
- Deploy: Vercel (recomendado)
# Clonar repositorio
git clone https://github.com/yourusername/tonal-field.git
cd tonal-field
# Instalar dependencias
npm install
# Ejecutar servidor de desarrollo
npm run dev
# Build para producción
npm run build
# Iniciar servidor de producción
npm run startEl servidor estará disponible en http://localhost:3000
Consulta MVP.md para:
- Desglose detallado de sprints
- Evaluación estratégica
- Recomendaciones de UX
- Roadmap post-MVP
- Shuffle automático con seed consistente
- Galería de presets populares
- Variaciones rápidas
- Fijar colores individuales
- Recalcular respetando locks
- UI intuitiva de bloqueo
- Upload de imagen
- Extracción de colores dominantes
- OCR opcional para tonos
- RGB, HSL, LCH además de OKLCH/HEX
- Configs para más frameworks
- Plugins para diseño (Figma, Sketch, VS Code)
- Auto-fix para AA/AAA en todos los roles
- Recomendaciones detalladas por par
- Simulación visual mejorada
- Sugerencias inteligentes por estilo
- Biblioteca pública de paletas
- Sistema de colaboración
Para contribuir al proyecto:
- Fork el repositorio
- Crea una rama para tu feature (
git checkout -b feature/mi-feature) - Commit tus cambios (
git commit -m "Add mi-feature") - Push a la rama (
git push origin feature/mi-feature) - Abre un Pull Request
Consulta MVP.md para entender el roadmap y prioridades.
MIT
Para reportar bugs o sugerir features:
- Issues en GitHub
- Email: [tu-email]
- Twitter: [@tonalfield]
Tonal Field fue creado como herramienta educativa y profesional para diseño de sistemas de color.
Basado en:
- OKLCH color space (CSS Working Group)
- Material Design 3 tonal system
- WCAG 2.1 accessibility standards
- Color science best practices
Made with ❤️ for designers and developers