Utilizamos cookies propias y de terceros para hacer funcionar y mejorar nuestros servicios. Si continúa navegando, consideramos que acepta su uso. Puede obtener más información visitando nuestra política de cookies.

Cerrar este mensaje

CSS - COLORES

En esta sesión ilustramos ejemplos con diferentes sintaxis comunes para especificar colores en CSS.

Cargando video...
¡Registrarse!

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

Los colores en CSS corresponden al estándar sRGB (estándar RGB: Red, Green, Blue), y pueden especificarse con las notaciones:

Palabras clave

Hexadecimal: cada componente de color R, G, B como un número de 0 a F, o de 00 a FF para mayor precisión

RGB: cada componente de color R, G, B como un número decimal de 0 a 255 o porcentaje (0% a 100%), opcionalmente con un indicador de transparencia entre 0 y 1 (RGBa: RGB + alpha)

HSL: Matiz, Saturación, Luminosidad (Hue, Saturation, Lightness), incorporado en CSS3. Cada componente es un número decimal de 0 a 360 (o porcentaje 0% a 100%), puede tener transparencia (HSLa)

Varios agregados/complementos de navegadores pueden ayudar en la selección y conversión de colores
Referencias:

Especificación de colores para CSS3: http://www.w3.org/TR/css3-color/

-- 11-css-colores.html
<!DOCTYPE html>
<html>
<head>
  <title>Colores con CSS</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="colores.css">
</head>
<body>
  <h1>Colores con CSS</h1>
  <div class="ejemplocolor" id="color1">
    "royalblue" sobre "whitesmoke"
  </div>

  <div class="ejemplocolor" id="color2">
    Mismo ejemplo con hexadecimal
  </div>

  <div class="ejemplocolor" id="color3">
    Usando RGB en hexadecimal
  </div>

  <div class="ejemplocolor" id="color4">
    Usando RGB en decimal
  </div>

  <div class="ejemplocolor" id="color5">
    Mismos colores anteriores, con 50% transparencia
  </div>

  <div class="ejemplocolor" id="color6">
    Mismo matiz,100% saturación, diferente luminosidad con HSL
  </div>

  <div class="ejemplocolor" id="color7">
    Igual al anterior, con 50% saturación
  </div>

</body>
</html>


-- colores.css
.ejemplocolor {
  width: 50%;
  height: 150px;
  text-align: center;
  line-height: 150px;
  margin-bottom: 20px;
  border: 2px solid black;
}
/* Notación de nombres */
#color1 {
  color: royalblue;
  background-color: whitesmoke;
}
/* Notación hexadecimal de 6 dígitos */
#color2 {
  color: #4169E1;
  background-color: #F5F5F5;
}
/* Notación hexadecimal de 3 dígitos */
#color3 {
  color: #f00; /* rojo puro */
  background-color: #00f; /* azul puro */;
}

/* Notación RGB */
#color4 {
  color: rgb(255,0,0); /* rojo puro */
  background-color: rgb(0,0,255); /* azul puro */;
}

/* Notación RGB con transparencia */
#color5 {
  color: rgba(255,0,0,.5);
  background-color: rgba(0,0,255,.5);
}

/* Notación HSL con porcentaje */
#color6 {
  color: hsl(0,100%,25%);
  background-color: hsl(0,100%,75%);
}

/* Notación HSL con porcentaje */
#color7 {
  color: hsl(0,50%,25%);
  background-color: hsl(0,50%,75%);
}

Rating

Global

Ver video en playlist

comments powered by Disqus
Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.