Colores y unidades

Colores y medidas están en casi cada línea de CSS. En esta lección conocerás todas las formas de escribir colores (de los nombres a oklch), cómo manejar la transparencia y, muy importante, qué unidad usar en cada caso: px, rem, em, %, vw, dvh, ch... Elegir bien las unidades es la clave de un diseño accesible y responsive.

Colores

Nombres de color

h1 { color: tomato; }
p  { color: darkslategray; }

Hay unos 140 nombres (red, navy, rebeccapurple...). Útiles para pruebas rápidas, pero en proyectos reales usarás los colores exactos del diseño.

Hexadecimal

El formato más común en diseños de Figma:

.marca     { color: #6d28d9; }   /* #RRGGBB: rojo, verde, azul en hexadecimal (00–ff) */
.blanco    { color: #fff; }      /* forma corta de #ffffff */
.velado    { color: #00000080; } /* #RRGGBBAA: el último par es la opacidad (80 ≈ 50 %) */

rgb()

Rojo, verde y azul de 0 a 255, con opacidad opcional:

.boton  { background: rgb(37 99 235); }        /* sintaxis moderna, con espacios */
.overlay { background: rgb(0 0 0 / 0.6); }     /* 60 % de opacidad */
.clasico { background: rgba(0, 0, 0, 0.6); }   /* sintaxis antigua, aún válida */

hsl()

Tono (0–360°, la rueda de color), saturación (%) y luminosidad (%). Es el más intuitivo para crear variaciones:

:root {
  --primario:        hsl(262 83% 58%);
  --primario-claro:  hsl(262 83% 75%);   /* misma tonalidad, más luz */
  --primario-oscuro: hsl(262 83% 40%);
  --primario-suave:  hsl(262 83% 58% / 0.15); /* para fondos sutiles */
}

Rueda de tonos: 0 rojo, 30 naranja, 60 amarillo, 120 verde, 180 cian, 240 azul, 300 magenta.

oklch(): el color moderno

oklch(luminosidad croma tono) es perceptualmente uniforme: dos colores con la misma luminosidad se ven igual de claros (en hsl no ocurre: un amarillo al 50 % se ve mucho más claro que un azul al 50 %). Además accede a colores más vivos en pantallas modernas.

.boton {
  background: oklch(0.62 0.19 260);   /* azul */
}
.boton:hover {
  background: oklch(0.52 0.19 260);   /* el mismo azul, más oscuro de forma predecible */
}

Soportado en todos los navegadores modernos desde 2023.

Palabras clave útiles

.icono {
  color: currentColor;      /* el color del texto actual */
  fill: currentColor;       /* los SVG toman el color del texto */
}
.borde { border: 1px solid currentColor; }
.invisible { background: transparent; }

currentColor es ideal para íconos: cambias el color del botón y el ícono lo sigue.

Transparencia: opacity vs. color con alfa

.a { opacity: 0.5; }                    /* TODO el elemento y sus hijos se vuelven semitransparentes */
.b { background: rgb(0 0 0 / 0.5); }    /* sólo el fondo; el texto sigue opaco */

Error común

Usar opacity en una tarjeta para tener un fondo translúcido: también se aclara el texto y las imágenes. Si sólo quieres el fondo transparente, usa un color con canal alfa.

color-mix()

Mezcla colores directamente en CSS:

.boton:hover {
  background: color-mix(in oklch, var(--primario), black 15%);  /* 15 % más oscuro */
}
.fondo-suave {
  background: color-mix(in srgb, var(--primario) 10%, white);
}

Contraste y accesibilidad

El texto debe tener un contraste mínimo de 4.5:1 con su fondo (3:1 para texto grande). Las DevTools muestran el ratio al hacer clic en el cuadrito de color de una propiedad color. Un gris claro sobre blanco puede verse "elegante" en tu monitor y ser ilegible en el celular de tu cliente al sol.

Unidades

Absolutas: px

px es un píxel de referencia (no necesariamente un píxel físico de la pantalla). Es predecible y preciso:

.borde  { border: 1px solid #e2e8f0; }
.sombra { box-shadow: 0 4px 12px rgb(0 0 0 / .1); }
.avatar { width: 48px; height: 48px; }

Úsalo para bordes, sombras, tamaños fijos de íconos y detalles pequeños.

Relativas a la fuente: rem y em

• rem: relativo al tamaño de fuente del elemento raíz (html). Por defecto, 1rem = 16px.
• em: relativo al tamaño de fuente del propio elemento (o del padre, si se usa en font-size).

html { font-size: 100%; }   /* = 16px por defecto (¡respeta la configuración del usuario!) */

h1 { font-size: 2.5rem; }   /* 40px */
p  { font-size: 1rem; }     /* 16px */
.contenedor { padding: 1.5rem; }  /* 24px */

/* em: el padding escala con el tamaño de fuente del botón */
.boton { font-size: 1rem; padding: 0.75em 1.5em; }
.boton.grande { font-size: 1.25rem; }  /* el padding crece solo, proporcionalmente */

¿Por qué rem para el texto?

Muchas personas aumentan el tamaño de fuente en la configuración de su navegador o teléfono por problemas de vista. Con rem, tu sitio respeta esa preferencia; con px en el font-size, la ignora. Es una cuestión de accesibilidad.

Cuidado con em anidado

em se acumula: si un li tiene font-size: 1.2em y dentro hay otro li con lo mismo, el interior medirá 1.2 × 1.2 = 1.44 veces. Por eso para font-size se prefiere rem.

Porcentajes

Relativos al padre (en la mayoría de propiedades, a su ancho):

.columna { width: 50%; }         /* mitad del ancho del contenedor */
.imagen  { max-width: 100%; }    /* nunca más ancha que su contenedor */

Curiosidad: un padding o margin vertical en % también se calcula sobre el ancho del padre.

Unidades de viewport

El viewport es el área visible de la ventana.

Unidad	Equivale a
vw	1 % del ancho del viewport
vh	1 % del alto del viewport
vmin / vmax	1 % del lado menor / mayor
dvh	1 % del alto dinámico (se ajusta cuando aparece/desaparece la barra del navegador móvil)
svh / lvh	alto con la barra visible (small) / oculta (large)

.hero {
  min-height: 100vh;   /* respaldo para navegadores antiguos */
  min-height: 100dvh;  /* en móviles evita que el contenido quede bajo la barra */
}

Error común

width: 100vw incluye el ancho de la barra de desplazamiento en escritorio y provoca un scroll horizontal molesto. Para ocupar todo el ancho usa width: 100%.

Otras unidades útiles

.articulo { max-width: 65ch; }        /* ch = ancho del carácter "0": ~65 caracteres por línea, ideal para leer */
.titulo   { margin-bottom: 0.5lh; }   /* lh = una altura de línea */
.grid     { grid-template-columns: 1fr 2fr; } /* fr = fracción del espacio libre (lo verás en Grid) */

Funciones de cálculo

.contenido {
  width: calc(100% - 2rem);            /* mezcla unidades */
  width: min(100% - 2rem, 1200px);     /* el menor de los dos: contenedor responsive en una línea */
  padding: max(1rem, 3vw);             /* el mayor */
  font-size: clamp(1rem, 2.5vw, 1.5rem); /* entre un mínimo y un máximo, fluido en medio */
}

En calc() los operadores + y - necesitan espacios alrededor: calc(100% - 2rem), no calc(100%-2rem).

¿Qué unidad uso? Guía rápida

Para...	Usa
Tamaño de texto	rem (o clamp() con rem + vw para textos fluidos)
Padding y margin	rem (o em si debe escalar con el texto del componente)
Bordes, sombras, radios pequeños	px
Anchos de columnas	%, fr o flex
Ancho máximo de contenedores	px o rem con max-width, o min()
Ancho de textos largos	ch (≈ 60–75ch)
Altura de pantalla completa	dvh con respaldo en vh
Imágenes	max-width: 100%

Ejemplo completo: tarjeta de precio

<article class="precio">
  <h3>Plan Pro</h3>
  <p class="precio__monto">$499 <span>/mes</span></p>
  <a href="#" class="precio__boton">Contratar</a>
</article>

.precio {
  max-width: 22rem;                         /* ~352px, crece si el usuario agranda la fuente */
  padding: 2rem;
  border: 1px solid hsl(220 13% 88%);
  border-radius: 12px;
  background: hsl(0 0% 100%);
  color: hsl(222 47% 11%);
  text-align: center;
}

.precio__monto {
  font-size: clamp(2rem, 6vw, 3rem);        /* grande y fluido */
  font-weight: 800;
  color: hsl(262 83% 58%);
}

.precio__monto span {
  font-size: 0.4em;                         /* 40 % del tamaño del monto */
  color: hsl(215 16% 47%);
}

.precio__boton {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75em 2em;
  border-radius: 999px;                     /* píldora */
  background: hsl(262 83% 58%);
  color: white;
  text-decoration: none;
}

.precio__boton:hover {
  background: hsl(262 83% 48%);             /* sólo cambia la luminosidad */
}

Ejercicios

1. Escribe el mismo color morado (#7c3aed) en rgb() y una versión al 20 % de opacidad para un fondo.
2. Crea con hsl() una paleta de 3 tonos (claro, normal, oscuro) de un verde.
3. Haz un contenedor que ocupe todo el ancho con un margen de 1rem a cada lado, pero que nunca supere los 1100px, usando una sola línea.
4. Haz que el h1 mida 2rem en móvil y crezca de forma fluida hasta 3.5rem.

Ver solución

/* 1 */
.morado { color: rgb(124 58 237); }
.fondo-morado { background: rgb(124 58 237 / 0.2); }

/* 2 */
:root {
  --verde-claro:  hsl(145 60% 70%);
  --verde:        hsl(145 60% 45%);
  --verde-oscuro: hsl(145 60% 28%);
}

/* 3 */
.contenedor {
  width: min(100% - 2rem, 1100px);
  margin-inline: auto;   /* centra horizontalmente */
}

/* 4 */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
}

Resumen

• Colores: nombres, hex, rgb(), hsl() (intuitivo para variaciones) y oklch() (moderno y uniforme).
• Transparencia: usa colores con alfa (/ 0.5) en lugar de opacity si sólo quieres el fondo translúcido.
• rem para textos y espaciados (accesible), px para bordes y detalles, %/fr para columnas.
• dvh para alturas de pantalla completa en móvil; evita 100vw.
• min(), max(), clamp() y calc() crean medidas fluidas sin media queries.
• Verifica el contraste: 4.5:1 mínimo para texto normal.

Siguiente: Tipografía y Google Fonts.