Curso de HTML5 y CSS3: Colores y transparencias

Formatos de color en CSS

Los colores son una parte fundamental de cualquier diseño web. En CSS, tenemos varias formas de definir colores. Aquí discutiremos tres de las más usadas: hexadecimal, RGB y RGBA.

Colores Hexadecimales

Los colores hexadecimales son una forma común de representar colores en la web. Se expresan con un símbolo de número (#) seguido de seis caracteres que representan valores de rojo, verde y azul (RGB).

El formato es #RRGGBB, donde RR, GG y BB son dos dígitos hexadecimales (del 00 al FF) que van de 0 a 255.

Ejemplo de Código Hexadecimal


        body {
            background-color: #3498db; /* Azul */
            color: #ffffff; /* Blanco */
        }

Colores RGB

El modelo RGB utiliza componentes de Rojo, Verde y Azul para formar un color. El formato es rgb(255, 255, 255), donde cada valor va de 0 a 255.

Ejemplo de Código RGB


        h1 {
            color: rgb(34, 193, 195); /* Color Aqua */
        }

Colores RGBA

RGBA es una extensión del modelo RGB que añade un cuarto parámetro: la opacidad. Así, el formato es rgba(255, 0, 0, 0.5), donde el último valor es un número entre 0 (completamente transparente) y 1 (completamente opaco).

Ejemplo de Código RGBA


        .transparente {
            background-color: rgba(255, 0, 0, 0.7); /* Rojo con 70% de opacidad */
        }

Transparencias en CSS

La propiedad opacity en CSS permite controlar la opacidad de un elemento. Esta propiedad acepta un valor entre 0 y 1, donde 0 significa total transparencia y 1 total opacidad.

Uso de la propiedad Opacity

Se puede aplicar opacity a cualquier elemento, afectando su apariencia general, incluyendo texto e imágenes.

Ejemplo de Código con Opacidad


        .fondo {
            background-color: blue;
            opacity: 0.5; /* 50% de opacidad */
        }

Degradados en CSS

Los degradados son una poderosa herramienta en CSS para mezclar varios colores. Puedes crear degradados lineales y radiales utilizando la propiedad background.

Degradado Lineal

Un degradado lineal se aplica usando la sintaxis linear-gradient. Por ejemplo, para crear un degradado de amarillo a azul, el código sería:

Ejemplo de Código de Degradado Lineal


        .degradado {
            background: linear-gradient(to right, yellow, blue);
        }

Degradado Radial

Un degradado radial se aplica con radial-gradient, que cambia el color desde el centro hacia afuera. Aquí hay un ejemplo:

Ejemplo de Código de Degradado Radial


        .degradado-radial {
            background: radial-gradient(circle, red, transparent);
        }

Conclusiones

Dominar los colores y las transparencias en HTML5 y CSS3 es esencial para cualquier desarrollador web. La elección entre hexadecimal, RGB y RGBA dependerá del efecto que desees lograr, mientras que la opacidad y los degradados proporcionan una flexibilidad creativa sin igual en tus diseños. Te animamos a experimentar con estos conceptos para mejorar tus habilidades de diseño web y ofrecer experiencias visuales impactantes a los usuarios.

Fuentes y lecturas recomendadas

Xose de la Paz

Más de 20 años transformando pasión en profesión. Experto en desarrollo Full Stack con una visión integral que abarca desde la gestión de servidores y redes hasta el diseño de interfaz. Soy un "todoterreno" tecnológico que cree en el aprendizaje continuo y la visión global de los proyectos. Entre despliegue y despliegue, me pierdo por el mundo con mi cámara al hombro.

Web | LinkedIn