Herramienta profesional de gestión de color con múltiples vistas especializadas para desarrolladores, diseñadores y artistas
Pigmenta es una aplicación web modular para selección y gestión avanzada de color. Ofrece tres vistas especializadas con herramientas adaptadas a cada workflow profesional:
Pigmenta comenzó como un experimento en React + Vite para crear un color picker simple. Sin embargo, a medida que crecía, los problemas de performance se hacían evidentes: conversiones de color en cada render, re-renders innecesarios y una gestión de estado cada vez más compleja.
La decisión de reescribir desde cero en Svelte surgió de la necesidad de:
Este proyecto representa un caso de estudio de migración React → Svelte y cómo elegir el stack correcto mejora tanto el código como la experiencia del usuario.
| Vista | Descripción | Casos de Uso |
|---|---|---|
| Artist | Rueda de color cromática con selección visual | Creación de paletas, armonías, exploración creativa |
| Designer | Rueda de color cromática con formatos técnicos y validación | Teoría del color, mockups, accesibilidad |
| Developer | Selector 2D de saturación/brillo | Implementación, ajustes precisos, documentación |
src/
├── lib/
│ ├── components/
│ │ ├── modules/ # Módulos de funcionalidad completa
│ │ │ ├── BrightnessSlider/
│ │ │ ├── ColorSwatch/
│ │ │ ├── HueSlider/
│ │ │ ├── InputHex/
│ │ │ ├── SaturationSlider/
│ │ │ ├── SquarePicker/
│ │ │ └── WheelPicker/ # Nuevo en V2
│ │ └── ui/ # Componentes UI base (shadcn-svelte)
│ ├── store/ # Estado global (Svelte stores)
│ └── views/ # Vistas especializadas
│ ├── artist/ # Vista para artistas
│ ├── designer/ # Vista para diseñadores
│ └── developer/ # Vista para desarrolladores
├── App.svelte # Componente raíz
└── main.ts # Punto de entrada
# Clonar el repositorio
git clone https://github.com/SrAlexis16/PigmentaColor-Picker_svelte.git
cd PigmentaColor-Picker_svelte
# Instalar dependencias
npm install
# Iniciar servidor de desarrollo
npm run dev
El proyecto estará disponible en http://localhost:5173
Este proyecto explora:
Para seguir el progreso detallado, consulta el Pigmenta Roadmap.
Boceto de la primera distribución:
Decisión final de layout:
Decisión final: se eligió este layout por limitaciones técnicas en breakpoints y para priorizar un diseño responsive más coherente.
Pigmenta V2.0.0 - Vistas especializadas para cada workflow | Arquitectura modular escalable
/README.md v3.0.1 - Última actualización: Octubre 2025