Normalmente, los colores que se usan en un sitio o app se definen de antemano.
No es difícil decidir una paleta de colores compuesta con el mismo brillo y saturación, cambiando solo el tono (Hue).
Pero hay casos en los que se necesitan varios niveles de brillo manteniendo la misma saturación y el mismo tono, como texto que se va desvaneciendo (aclarando) gradualmente o fondos que se van intensificando (oscureciendo) poco a poco.
En ese caso, texto, fondo y borde deben declararse cada uno con distintos niveles de brillo. Si asumimos que 100% es el nivel de brillo más alto, una caja con un color de fondo de 96% de brillo sobre blanco sí se nota, pero si se aplica ese 96% al color del texto, ya no se ve.
Además, texto, fondo y borde no se usan por separado. Estos tres se usan en combinación. Después de declarar cada color y probar sus combinaciones, a veces el texto no se ve sobre el fondo, o el fondo y la línea no se distinguen entre sí. Ajustar eso no es nada fácil.
Si se introducen 4 niveles de brillo para texto, fondo y borde, las combinaciones llegan nada menos que a 64. Y si además se considera el modo oscuro, hay que preparar dos juegos de 64 combinaciones.
Por eso hice una herramienta CLI con la que se pueden configurar el color y los niveles de brillo de texto, fondo y borde, y ver todas las combinaciones de un vistazo.
Genera código de color CSS a partir de un archivo de configuración en formato YAML.
Ofrece una función de vista previa donde se pueden ver de un vistazo todas las etapas de texto, fondo y borde en modo claro/oscuro, y también probar sus combinaciones.
Como extra, este programa fue desarrollado con programación en pareja con IA usando un LLM local. Yo indiqué cómo debía implementarse el código, y dejé el trabajo manual de programarlo a la IA.
El entorno del LLM local es el siguiente.
- CPU: Apple M3 Max 64GB
- Modelo principal de programación: Qwen3.6-35B-A3B
- Modelo cuantizado que realmente uso: Qwen3.6-35B-A3B-oQ4e-fp16-mtp
- Runtime principal de LLM: oMLX
- Agente de programación: Pi Coding Agent
Aún no hay comentarios.