Paletas de colores apagados: códigos empolvados para marcas calmadas

Una paleta de colores apagados es un conjunto de colores con la saturación bajada, de modo que parecen empolvados, suaves y algo grises y no puros. La salvia #9CAF88, el rosa empolvado #C9A9A6, el azul pizarra #6B7F99, el malva #B48A9B y la arcilla #B5826B son típicos. Van con marcas que quieren sentirse calmadas y cuidadas: cerámica, bienestar, papelería, arquitectura, moda lenta. La trampa es que los colores apagados tienden a la misma luminosidad, así que toda buena paleta apagada incluye un oscuro firme que la sostenga.

Qué hace que un color sea apagado

Un color tiene tres ajustes: matiz, saturación y luminosidad (mira matiz, saturación y brillo). Apagar baja la saturación y deja el matiz reconocible. Hay dos formas clásicas de hacerlo: mezclar gris, lo que los diseñadores llaman hacer un tono, o mezclar un poco del color complementario, algo que los pintores han hecho siempre. Ambas acercan el color al neutro.

Apagado no es lo mismo que pastel. Un pastel añade blanco, así que sigue limpio y claro; un color apagado añade gris, así que puede ser claro, medio u oscuro y siempre se siente algo empolvado. Paletas de colores pastel y tintes, tonos y sombras trazan la línea con más detalle.

Siete paletas de colores apagados con códigos hex

• Puerto: niebla #E6E9EA, azul pizarra #6B7F99, gris marino #93A3A6, cuerda #C2AD8E, azul marino profundo #22303C.
• Cerámica: bizcocho #F1E8DD, arcilla #B5826B, esmalte ceniza #A7A39A, hierro #5B4A42, negro de horno #231D1A.
• Polvo de lavanda: neblina #F1EBE6, malva #B48A9B, brezo #8E8AA6, salvia #9CAF88, berenjena #4A3F4F.
• Olivar: crema #F2EDE1, oliva #8A8A5C, hierba seca #B1A87F, terracota #A9674E, corteza #3A3328.
• Nórdico: nieve #F2F3F1, abedul #D8D1C4, liquen #A3AE9D, fiordo #5F7A80, pino #24302E.
• Ocaso empolvado: pergamino #EFE6DA, polvo de melocotón #D9A88F, marrón rosado #A06F6B, gris ciruela #6E5866, noche #2A2329.

Cada una de estas termina en un oscuro. No es decoración. Sin él, no hay nada con lo que componer el texto ni nada con lo que trazar un borde, y la paleta parece una fotografía olvidada al sol.

Por qué las paletas apagadas se vuelven niebla

Apagar quita las diferencias más fuertes entre colores, así que la luminosidad se convierte en lo único que queda para separarlos. La salvia #9CAF88 y el rosa empolvado #C9A9A6 parecen un bonito contraste de verde y rosa, pero su ratio de contraste es 1,09:1: casi la misma luminosidad. El texto de uno sobre el otro es ilegible. Incluso la salvia sobre blanco puro solo llega a 2,36:1.

Comprueba tus propias parejas con la guía de contraste de color. Un buen hábito es convertir un momento la paleta a escala de grises: si dos colores se vuelven el mismo gris, nunca pongas uno encima del otro.

Cómo apagar cualquier color en CSS

Si ya tienes un color de marca vivo y quieres un compañero más calmado, mézclalo con gris en lugar de elegir a ojo un color nuevo. color-mix() en el espacio oklch mantiene estable el matiz mientras baja la saturación, y es compatible con todos los navegadores principales actuales.

:root {
  --brand: #2f6bff;

  /* the same hue, progressively muted */
  --brand-muted-1: color-mix(in oklch, var(--brand) 70%, #8c8c8c);
  --brand-muted-2: color-mix(in oklch, var(--brand) 45%, #8c8c8c);
  --brand-muted-3: color-mix(in oklch, var(--brand) 25%, #8c8c8c);

  /* or set chroma directly in oklch: low chroma reads as muted */
  --slate: oklch(0.58 0.05 255);
  --sage: oklch(0.72 0.06 130);
}

OKLCH explicado cubre por qué este espacio se comporta de forma más pareja que HSL, y saturación en el diseño cubre cuándo volver a subirla.

Degradados y fondos apagados

Los colores apagados dan degradados suaves y callados, sobre todo cuando las paradas están cerca en matiz y la luz viene de un lado. Añade un poco de grano: las mezclas de bajo contraste muestran banding con facilidad, y la textura las hace parecer una superficie y no un ajuste de pantalla.

Un esquema apagado también admite un color algo más fuerte como acento, como una terracota entre salvias o un verde azulado más profundo entre grises. Limítalo a un solo elemento por diseño: un precio, un botón, una fecha. Da al ojo un lugar donde posarse sin romper la calma, y así suelen funcionar las paletas de colores tierra de las que toman prestado los esquemas apagados.

Si tu marca vive en colores apagados, un fondo con grano y luz propios hace gran parte del trabajo. Un Mark de Gradiently te da una superficie suave y distintiva que mantiene legible el texto por sí sola, algo que importa más en un esquema apagado que en cualquier otro.