🎨 Aprendiendo a usar colores en CSS (más allá de lo básico)
¡Avance del día! 🚀
Hoy seguí avanzando en mi formación como desarrollador web junior y profundicé en un tema que parece simple, pero es clave para proyectos profesionales: los colores en CSS.
En el curso Desarrollo Web de Juan Pablo De la Torre Valdez (Udemy) aprendí que los colores no son solo decoración, sino una herramienta fundamental para experiencia de usuario, accesibilidad y mantenimiento del código.
💡 Lo más importante que aprendí
- 🎯 No abusar de nombres de colores (
aliceblue,cornflowerblue): no escalan bien en proyectos reales. - 🧠 Elegir bien el formato:
- Hexadecimal para paletas y consistencia visual.
- RGBA solo cuando necesito transparencia real.
- 🧩 Variables CSS (
:root) hacen el código más limpio, reutilizable y fácil de mantener. - 🔍 Entendí por fin el canal alpha (0–1) en RGBA y por qué mis fondos antes se veían opacos.
🧪 Ejemplo práctico
Antes usaba colores directos, difíciles de reutilizar. Ahora trabajo así:
css
:root {
--color-primario: #FFC107;
--color-fondo-transparente: rgba(33, 33, 33, 0.8);
}
.titulo {
color: var(--color-primario);
background-color: var(--color-fondo-transparente);
}
🛠 Aplicado en proyecto real
Todo esto lo estoy aplicando en mi proyecto Freelancer, definiendo una paleta completa en :root y usando transparencias para lograr un efecto overlay moderno sin perder legibilidad.
📂 Repo del proyecto:
👉 https://github.com/claudio-ortiz-dev/freelancer
🎯 Conclusión
Aprender a manejar colores correctamente me dejó claro que las buenas prácticas marcan la diferencia entre un código funcional y uno profesional. Pequeños detalles, gran impacto.
¿Tú cómo gestionas los colores en tus proyectos CSS? ¿Usas variables desde el inicio? 👀👇
#DesarrolloWeb #CSS #HTML #AprendiendoAProgramar #GitHub #2026Goals
Top comments (0)