The latest articles on DEV Community by Claudio Ortiz (@claudio_ortiz_b388a0f6ecf). https://dev.to/claudio_ortiz_b388a0f6ecf https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3702528%2F9d4f97fd-7b69-47d6-9d4a-07e4b3d3cb87.png https://dev.to/claudio_ortiz_b388a0f6ecf en Claudio Ortiz Fri, 09 Jan 2026 13:37:39 +0000 https://dev.to/claudio_ortiz_b388a0f6ecf/-aprendiendo-colores-en-css-buenas-practicas-para-proyectos-reales-3pl https://dev.to/claudio_ortiz_b388a0f6ecf/-aprendiendo-colores-en-css-buenas-practicas-para-proyectos-reales-3pl <h1> 🎨 Aprendiendo a usar colores en CSS (más allá de lo básico) </h1> <p>¡Avance del día! 🚀<br><br> Hoy seguí avanzando en mi formación como <strong>desarrollador web junior</strong> y profundicé en un tema que parece simple, pero es clave para proyectos profesionales: <strong>los colores en CSS</strong>.</p> <p>En el curso <em>Desarrollo Web</em> de <strong>Juan Pablo De la Torre Valdez (Udemy)</strong> aprendí que los colores no son solo decoración, sino una herramienta fundamental para <strong>experiencia de usuario, accesibilidad y mantenimiento del código</strong>.</p> <h2> 💡 Lo más importante que aprendí </h2> <ul> <li>🎯 <strong>No abusar de nombres de colores</strong> (<code>aliceblue</code>, <code>cornflowerblue</code>): no escalan bien en proyectos reales.</li> <li>🧠 <strong>Elegir bien el formato</strong>: <ul> <li>Hexadecimal para paletas y consistencia visual.</li> <li>RGBA solo cuando necesito transparencia real.</li> </ul> </li> <li>🧩 <strong>Variables CSS (<code>:root</code>)</strong> hacen el código más limpio, reutilizable y fácil de mantener.</li> <li>🔍 Entendí por fin el canal <strong>alpha (0–1)</strong> en RGBA y por qué mis fondos antes se veían opacos.</li> </ul> <h2> 🧪 Ejemplo práctico </h2> <p>Antes usaba colores directos, difíciles de reutilizar. Ahora trabajo así:</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> 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 </code></pre> </div> css learning spanish webdev