# Paletas de colores apagados: códigos empolvados para marcas calmadas [Canonical HTML page](https://gradiently.design/es/guide/muted-color-palettes) La salvia, el rosa empolvado, la pizarra y la arcilla transmiten calma porque el color se ha suavizado con gris. Así funciona apagar un color, siete paletas para copiar y lo único que evita que un esquema apagado se vuelva niebla. ## The short version - Una paleta de colores apagados se compone de colores con la saturación reducida, normalmente mezclando gris o un poco del matiz opuesto. - Los colores apagados como la salvia, el rosa empolvado, el azul pizarra, el malva y la arcilla transmiten calma, naturalidad y madurez. - Los colores apagados suelen compartir la misma luminosidad, así que una paleta apagada necesita un color mucho más oscuro para el texto y los bordes. - El verde salvia y el rosa empolvado difieren en matiz pero son casi idénticos en luminosidad, por eso el texto de uno sobre el otro es ilegible. - En CSS, color-mix() en el espacio oklch es una forma fiable de apagar cualquier color de marca mezclándolo con gris. 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](https://gradiently.design/es/guide/hue-saturation-brightness)). 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. ### Puro - Verde `#2ECC71` - Rosa `#FF5C8A` - Azul `#2F6BFF` - Naranja `#FF7A1A` ### Apagado - Salvia `#9CAF88` - Rosa empolvado `#C9A9A6` - Azul pizarra `#6B7F99` - Arcilla `#B5826B` 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](https://gradiently.design/es/guide/pastel-color-palettes) y [tintes, tonos y sombras](https://gradiently.design/es/guide/tints-tones-shades) trazan la línea con más detalle. ## Siete paletas de colores apagados con códigos hex - Tiza: #eef0e8 - Salvia: #9caf88 - Rosa empolvado: #c9a9a6 - Arcilla: #b5826b - Tinta musgo: #2e3a2c Estudio de jardín, la paleta que la mayoría imagina al oír «apagado». La tinta musgo es el ancla que hace utilizables los otros cuatro. - **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. | Pareja | Contraste | Uso | | --- | --- | --- | | Salvia sobre rosa empolvado | 1,09:1 | Dos formas lado a lado, nunca texto | | Salvia sobre blanco | 2,36:1 | Formas grandes e ilustración | | Azul pizarra sobre blanco | 4,10:1 | Solo títulos grandes | | Rosa empolvado con texto `#3A2A2A` | 6,29:1 | Texto corrido, cumple AA | | Tinta musgo `#2E3A2C` sobre tiza | 10,39:1 | Texto corrido, cumple AAA | | Berenjena `#4A3F4F` sobre neblina | 8,40:1 | Texto corrido, cumple AAA | WCAG pide 4,5:1 para texto corrido y 3:1 para texto grande. En una paleta apagada, el oscuro de anclaje hace todo el trabajo de lectura. Comprueba tus propias parejas con la guía de [contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility). 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. ```css :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); } ``` Mezclar hacia un gris medio apaga sin cambiar el matiz. En oklch, un croma de entre 0,03 y 0,07 se lee como apagado; 0,15 o más se lee como vivo. [OKLCH explicado](https://gradiently.design/es/guide/oklch-explained) cubre por qué este espacio se comporta de forma más pareja que HSL, y [saturación en el diseño](https://gradiently.design/es/guide/color-saturation) 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. - Mañana de salvia: `linear-gradient(160deg, #eef0e8 0%, #9caf88 70%, #6f8460 100%)` - Polvo de melocotón: `radial-gradient(circle at 30% 25%, #efe6da 0%, #d9a88f 55%, #a06f6b 100%)` - Bruma de puerto: `linear-gradient(170deg, #e6e9ea 0%, #93a3a6 50%, #6b7f99 100%)` - Tarde malva: `radial-gradient(circle at 70% 30%, #b48a9b 0%, #6e5866 55%, #2a2329 100%)` Cuatro degradados apagados. Cada uno conserva matices vecinos, así que la mezcla nunca se vuelve marrón en el medio. 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](https://gradiently.design/es/guide/earth-tone-colors) de las que toman prestado los esquemas apagados. Una publicación vertical para redes de una colección de cerámica con letras oscuras sobre un fondo suave y empolvado Una publicación de cerámica a 1080×1350. Los colores apagados llevan el ambiente; el texto oscuro lleva el mensaje. 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. ## FAQ ### ¿Qué es una paleta de colores apagados? Una paleta de colores con la saturación reducida, de modo que parecen suaves, empolvados y algo grises. La salvia, el rosa empolvado, el azul pizarra y la arcilla son ejemplos comunes. ### ¿Cuál es la diferencia entre colores apagados y pastel? Los pasteles se hacen añadiendo blanco, así que siguen claros y limpios. Los colores apagados se hacen añadiendo gris, así que pueden tener cualquier luminosidad y siempre se sienten algo empolvados. ### ¿Cómo apago más un color? Baja su saturación, mezcla gris o añade una pequeña cantidad de su color complementario. En CSS, `color-mix(in oklch, yourcolour 50%, #8c8c8c)` lo hace de forma fiable. ### ¿Qué colores combinan con el verde salvia? Rosa empolvado, arcilla, crema, gris cálido y un musgo profundo o carbón para el texto. Evita poner texto en salvia sobre rosa empolvado: tienen casi la misma luminosidad. ### ¿Son buenos los colores apagados para el branding? Van muy bien con marcas calmadas, artesanales y de bienestar. Incluye un oscuro fuerte para el texto y los bordes para que la paleta siga siendo legible.