UF1303 | Elaboración de hojas de estilo

El color

Palabras clave de colores

• E010-keyword-color.html

Se presentan los colores definidos por palabras clave.

Palabras clave

• E020-color-palabras-clave.html

Se presentan las palabras clave:

Palabra clave transparent
Ejemplo:

.color-transparente{
    background-color: transparent;
 /* La palaba transparent representa un color
    totalmente transparente, es decir, el color
    que veremos será el colore de fondo. */
}

Palabra clave currentColor
Ejemplo:

.color-actual{
    background-color: currentColor;
 /* La palabra clave currentColor representa el
    valor calculado para la la propiedad del
    elemento color . Permite hacer que las
    propiedades de color sean heredadas por los
    elementos hijo, que no lo hacen por
    defecto. */
}

Color RGB

• E030-color-rgb-hex.html

Se presenta el sistema de color RGB hexadecimal:

Los tres colores básicos
Ejemplo:

.rojo {
    color: #ff0000; /* #ff0000 = #f00 */
}

.verde {
    color: #00ff00; /* #00ff00 = #0f0 */
}

.azul {
    color: #0000ff; /* #0000ff = #0f0 */
}

Las tres combinaciones básicas
Ejemplo:

/* rojo + verde = amarillo */ 
.amarillo {
    color: #ffff00; /* #ffff00 = #ff0 */
}

/* rojo + azul = magenta */ 
.magenta {
    color: #ff00ff; /* #ff00ff = #0f0 */
}

/* verde + azul = cian */ 
.cian {
    color: #00ffff; /* #00ffff = #0f0 */
}

Variaciones de intensidad
Ejemplo:

/* Con valores altos el color es más brillante
y con valores bajos el tono se oscurece */

.rojo-1 {
    background-color: #ff0000;
}

.rojo-2 {
    background-color: #e60000;
}

.rojo-3 {
    background-color: #bf0000;
}

.rojo-4 {
    background-color: #800000;
}

Los tonos grises
Ejemplo:

/* Para colores grises, se gradúa la intensidad
del cada uno de los canales con los mismos números. */

.gris-1 {
    background-color: #4d4d4d;
}

.gris-2 {
    background-color: #8c8c8c;
}

.gris-3 {
    background-color: #b3b3b3;
}

.gris-4 {
    background-color: #ccc;
}

El blanco
Ejemplo:

.blanco {
    background-color: #fff;
 /* blanco = mezcla de todos los colores */
}

El negro
Ejemplo:

.negro {
    background-color: #000;
 /* negro = ausencia de color */
}

• E040-color-rgb-dec.html

Se presenta el sistema de color RGB decimal:

Los tres colores básicos
Ejemplo:

.rojo {
    color: rgb(255, 0, 0);
}

.verde {
    color: rgb(0, 255, 0);
}

.azul {
    color: rgb(0, 0, 255);
}

Las tres combinaciones básicas
Ejemplo:

/* rojo + verde = amarillo */ 
.amarillo {
    color: rgb(255, 255, 0);
}

/* rojo + azul = magenta */ 
.magenta {
    color: rgb(255, 0, 255);
}

/* verde + azul = cian */ 
.cian {
    color: rgb(0, 255, 255);
}

Variaciones de intensidad
Ejemplo:

/* Con valores altos el color es más brillante
y con valores bajos el tono se oscurece */

.rojo-1 {
    background-color: rgb(255, 0, 0);
}

.rojo-2 {
    background-color: rgb(230, 0, 0);
}

.rojo-3 {
    background-color: rgb(191, 0, 0);
}

.rojo-4 {
    background-color: rgb(128, 0, 0);
}

Los tonos grises
Ejemplo:

/* Para colores grises, se gradúa
la intensidad del cada uno de los canales con los
mismos números. */

.gris-1 {
    background-color: rgb(77, 77, 77);
}

.gris-2 {
    background-color: rgb(140, 140, 140);
}

.gris-3 {
    background-color: rgb(179, 179, 179);
}

.gris-4 {
    background-color: rgb(204, 204, 204);
}

El blanco
Ejemplo:

.blanco {
    background-color: rgb(255, 255, 255);
 /* blanco = mezcla de todos los colores */
}

El negro
Ejemplo:

.negro {
    background-color: rgb(0, 0, 0);
 /* negro = ausencia de color */
}

• E050-color-rgba.html

Se presenta el sistema de color RGBa decimal:

Canal alfa (transparencia)
Ejemplo:

<div class="caja-inferior">
    Caja inferior
</div>

<div class="caja-superior">
    Caja superior con transparencia<br>
    rgba(0, 255, 0, 0.5)
</div>

/* RGBa amplia el modelo RGB añadiendo un canal alfa,
   permitiendo de esta manera especificar la opacidad
   de un color */
.caja-inferior{
    background-color:rgb(255, 0, 0);
}

.caja-superior{
 /* Caja colocada por encima y solapada */
    margin-top:-50px;
    margin-left:50px;

 /* Color de fondo con 50% de transparencia */
    background-color: rgba(0, 255, 0, 0.5);
}

Color HSL

• E060-color-hsl.html

Se presenta el sistema de color HSL:

Hue (Matiz)
Ejemplo:

h1{
    color: hsl(0, 100%, 50%);
 /* Hue toma valores del rango 0..359 que representan
    un ángulo. Este ángulo, trasladado a la rueda de
    color, corresponde a un matiz de color. A lo largo
    de los 360° el color cambia de rojo ( 0° ) a
    verde (120°) a azul ( 240°) y de nuevo a rojo
    ( 360° ).  */
}

Colores complementarios
Ejemplo:

h1{
    color: hsl(0, 100%, 50%); /* texto rojo */
    background-color: hsl(180, 100%, 50%);
 /* color de fondo opuesto */

 /* El código hsl para rojo es hsl(0,100%, 50%), donde H = 0;
    El parámetro H del color complementario ( diametralmente
    opuesto ) será de 180.  */
}

Saturation (saturación)
Ejemplo:

/* La saturación de un color se representa en tanto por
ciento. */
h1{
    color: hsl(0, 100%, 50%);
 /* texto rojo saturado */
    
    background-color: hsl(0, 50%, 50%);
 /* color de fondo rojo poco saturado */
}

Lightness (Luminosidad)
Ejemplo:

/* La luminosidad de un color se representa en tanto
por ciento. Puede tomar valores entre 100% (blanco)
y 0% (falta de color o negro). */

h1{
    color: hsl(120, 100%, 80%);
    /* texto verde luminoso o claro */
    
    background-color: hsl(120, 100%, 20%);
    /* color de fondo verde oscuro */
}

• E070-color-hsla.html

Se presenta el sistema de color HSLa:

Canal alfa (transparencia)
Ejemplo:

<div class="caja-inferior">
    Caja inferior
</div>

<div class="caja-superior">
    Caja superior con transparencia<br>  
</div>

/* HSLa amplia el modelo HSL añadiendo un canal alfa,
   permitiendo de esta manera especificar la opacidad
   de un color */
.caja-inferior{
    background-color:hsl(9, 59%, 41%) ;
}

.caja-superior{
 /* Caja colocada por encima y solapada */
    margin-top:-50px;
    margin-left:50px;

 /* Color de fondo con 50% de transparencia */
    background-color: hsla(180, 25%, 25%, 0.5) ;
}