1. Curso de HTML / CSS
  2. /
  3. CSS
  4. /
  5. Diseño - Color
1 / 1

Diseño - Color

NO tenemos que saber teoría del color

Ni colores primarios y secundarios, ni complementarios, cálidos o fríos. Pero debemos ser conscientes de qué nos piden.

Aunque en pantalla se vean igual o muy muy parecidos, los colores definidos mediante distintas propiedades son distintos y se generan a través de estructuras de color diferentes. ¿Qué debemos saber? Que tenemos que usar el que nos digan. ¿Por qué? Pues no nos importa, la verdad.

Códigos de colores RGB

Las pantallas de ordenador consiguen los colores mezclando tres colores básicos (rojo, verde y azul). Cada color admite 256 niveles de intensidad, lo que hace un total de 256 x 256 x 256 = 16.777.216 colores distintos. Para hacer referencia a un color concreto, basta con indicar las intensidades de cada uno de los tres colores básicos. Colores aditivos

Códigos de colores HSL

Colores aditivos, pero basados en Hue (matiz), Saturación y Luminosidad. Cuando lo conoces, es más fácil para desarrolladores el trastear con ellos programáticamente.

Jugando con HSL

Códigos de colores HWB

Colores substractivos, basados en Hue (matiz), White (Blanco) y Black (Negro). Es más intuitivo para diseñadores, pero no para el resto de colectivos. Cuando la suma de las componentes blanco y negro suman más de 100%, el color resultante es un tono de gris

Cada vez hay más

LAB, LCH, CYMK ...

Ejemplo:

Color oficial de la UM.

// Espectro RGB
color: #bd2a33
color: rgb(189,42,51)
color: rgba(189,42,51,1)

// Espectro HSLA
color: hsl(356deg 64% 45%)
color: hsla(356deg 64% 45% 1)

// Espectro HWBA
color: hwb(356 16% 26%)
color: hwba(356 16% 26% 1)