Unidades de medida y colores en CSS

← Diseño Web ⌂ Home

Colores

Los colores en CSS pueden ser representados de al menos tres formas diferentes:

Palabras claves

Usamos palabras clave para cada color, como: red, green, blue, pink, yellow, black, etc.

h1 {
    color: red;
}

En el siguiente link podrás encontrar todos las palabras clave soportadas en CSS.

htmlcolorcodes.com/color-names

RGB y HEX

RGB (red, green. blue) es usado para producir colores mediante la función rgb o rgba (añade transparencia) en un rango de valores del 0-255.

h1 {
    color: rgb(244, 188, 66);
}

Y también podemos expresar colores mediante su valor hexadecimal con el prefijo # y una combinación de número hexadecimales #RRGGBB.

h1 {
    color: #FF0099;
}

Con respecto a los valores hexadecimales, cada color está representado por 6 digitos, que representan 3 pares de hexadecimales: FF - FF - FF (rojo, verde y azul), en el que cada par puede tomar valores hexadecimales entre 00 y FF. Cada uno equivale a valores decimales entre 0 y 255, donde 0 es la ausencia de ese color y 255 la mayor cantidad disponible. De esta manera cada color se forma por la combinación de diferentes proporciones de rojo, verde y azul.

#000000 es equivalente a Negro
#FF0000 es equivalente a Rojo
#00FF00 es equivalente a Verde
#0000FF es equivalente a Azul
#FFFFFF es equivalente a Blanco

HSL

La función hsl y hsla nos permiten definir los colores mediante sus valores de hue (tono), saturation (saturación) y lightness (luminosidad)

h1 {
    color: hsl(0, 100%, 50%); 
}

Herramientas para colores

Una herramienta útil para poder convetir colores a sus diferentes presentaciones es la siguiente:

www.w3schools.com/colors/colors_converter

Y los siempre útiles color pickers y paletas de colores:

Y la referencia para cualquier duda:

Unidades de medida

Hay varias unidades de medida con las que se puede trabajar en CSS: %, em, rem, px, pt, fr, vw, vh.

Las medidas más comunes y utilizadas son los pixeles. Un píxel es la menor unidad homogénea en color que forma parte de una imagen digital. Es la unidad más práctica y fácil de utilizar y manipular, y es la que utilizaremos mayormente en este curso.

Dichas unidades de medida se dividen en dos grupos:

Unidades de medida absolutas

Como su nombre lo indica, son unidades que están completamente definidas. Esto quiere decir que su valor no depende de otro valor de referencia. En este grupo encontramos los siguientes elementos:

Unidades de medida relativas

Este tipo de unidad es más flexible y se expresa en forma de porcentaje (%). Se adapta de acuerdo al tamaño de otro valor de referencia.

Ahora bien, las unidades relativas se subdividen en 2 grupos:

Relativas a la tipografía

Relativas al viewport - ventana

Las unidades relativas al viewport son muy importantes y se deben tomar en cuenta cuando realizamos una web para varios tipos de resolución de pantalla.

Si se desea explorar un poco más las otras unidades de medida se puede consultar el siguiente link: w3schools.com/cssref/css_units.asp