Tema 8 Colores y Relleno
Los colores son parte vital de cualquier página web: pueden llamar la atención del usuario y le dan identidad al sitio. CSS nos brinda muchas opciones de estilización con colores, las cuales nos permiten crear incontables diseños.
Los colores en CSS se manejan a través de códigos hexadecimales, o valores RGB y HSL. Los códigos de colores en hexadecimal consisten de un # y una secuencia de 6 dígitos hexadecimales (del 0 al 9 y de la A a la F). El código #000000 corresponde al negro y el #ffffff al blanco. Los valores RGB (Red, Green, Blue) consisten en 3 números enteros del 0 al 255, siendo rgb(0, 0, 0) negro y rgb(255, 255, 255) blanco. Por último, tenemos los valores HSL: estos modifican la matiz, saturación y luminosidad (Hue, Saturation, Lightness) del color. El primer valor es la matiz, y debe ser un valor entero entre 0 y 359. Los otros dos valores de un color HSL (la saturación y luminosidad) son procentajes del 0% al 100%. Para obtener el color blanco y negro en HSL, basta con asignar un valor de luminosidad de 0% y 100%, respectivamente: hsl(---, --%, 0%) y hsl(---, --%, 100%).
Cuando queremos modificar un color, en muchas ocasiones también nos interesa cambiar su opacidad (transparencia). Para hacer esto utilizamos valores similares a los dos anteriores con una ligera modificación: RGBA y HSLA en donde la A es un valor decimal entre 0 y 1, donde 0 se utiliza para un color completamente transparente y 1 para un color sólido. Por ejemplo, un valor rgba(255, 0, 0, 0.5) es un color rojo con opacidad media.
Propiedades que Utilizan Colores
Podemos utilizar colores en muchas propiedades de elementos HTML como el color del texto, fondos, rellenos, bordes, sombras y más. A continuación te mostraremos un selector de colores. El selector contiene todos los colores que se pueden utilizar en cualquier página web junto con sus códigos hexadecimales y sus equivalencia para el resto de los formatos que describimos anteriormente. Observa cómo cambian los colores de los ejemplos después de seleccionar un color.
Haz clic 
en el cuadro para seleccionar un color para
los ejemplos y visualizar sus equivalencias en código hexadecimal,
RGBA y HSLA. Utiliza el primer slider para cambiar la
matiz del color y el segundo para cambiar la opacidad. Para aplicar
el color en los ejemplos de abajo, haz clic en el
botón save.
CSS
.seccion1{
color: #000000;
}
HTML
El color del texto de esta sección está siendo modificado.
.seccion2{
background: #ffffff;
}
El color del fondo de está sección está siendo modificado.
.seccion3{
border-style: solid;
border-color:
#888da8;
}
El color del borde de esta sección está siendo modificado.
.seccion4{
background-image: linear-gradient(#ffffff,
#ffffff);
}
El color del gradiente de esta sección está siendo modificado.