# Paletas de colores pastel: códigos suaves para marcas delicadas [Canonical HTML page](https://gradiently.design/es/guide/pastel-color-palettes) Los pastel son fáciles de querer y difíciles de usar: por sí solos no pueden sostener texto. Cada paleta de esta guía viene con los dos colores extra que la hacen funcionar. ## The short version - Una paleta de colores pastel está formada por colores claros de saturación suave, normalmente por encima del 85% de luminosidad en HSL. - Los pastel son demasiado claros para usarlos como texto sobre blanco, así que una paleta pastel necesita un color de tinta oscuro para las palabras. - La mayoría de las marcas pastel también necesitan un color ancla más profundo, lo bastante fuerte para llevar texto blanco en botones y etiquetas. - Los pastel se ven más coherentes cuando comparten la misma luminosidad y se diferencian sobre todo en el tono. - Un fondo blanco roto cálido les sienta mejor a los pastel que el blanco puro, que puede hacer que parezcan desvaídos. Una **paleta de colores pastel** es un conjunto de colores pálidos y suavemente saturados: melocotón, mantequilla, salvia, azul empolvado, lila. Transmiten delicadeza, frescura y cercanía, y por eso recurren a ellos panaderías, marcas de cosmética, marcas de bebé y papelerías de boda. La trampa es que ningún pastel es lo bastante oscuro para el texto. Por eso cada paleta de abajo combina tres pastel con dos colores de trabajo: una **tinta** oscura para las palabras y un **ancla** más profunda para botones y acentos. Los códigos están listos para copiar y el contraste ya está comprobado. ## Cinco paletas de colores pastel con códigos hex **Melocotón y salvia** es cálida, natural y serena, una gran opción para alimentación, cerámica y marcas de vida pausada. El ancla terracota evita que resulte empalagosa. - Melocotón #f9d5c7: #f9d5c7 - Mantequilla #fbe7b5: #fbe7b5 - Salvia #cfe3d1: #cfe3d1 - Terracota #ad5a45: #ad5a45 - Tinta cacao #3a2e2a: #3a2e2a La tinta cacao sobre melocotón da 9,6:1. El blanco sobre terracota da 4,9:1, suficiente para las etiquetas de los botones. **Vidrio marino** es fresca y limpia, ideal para bienestar, cosmética y todo lo que deba sentirse como aire fresco. - Vidrio marino #c9e9e4: #c9e9e4 - Azul empolvado #c9dff2: #c9dff2 - Bruma #e3f1ec: #e3f1ec - Laguna profunda #3f7f86: #3f7f86 - Tinta pizarra #2f3a4a: #2f3a4a La tinta pizarra sobre vidrio marino da 8,9:1. El blanco sobre laguna profunda da 4,6:1. **Lavanda y limón** junta dos casi opuestos con la misma luminosidad suave, lo que la mantiene alegre sin estridencias. Buena para papelería, floristerías y libros infantiles. - Lavanda #ddd3f2: #ddd3f2 - Limón #fbf0b5: #fbf0b5 - Rubor #f6cfdc: #f6cfdc - Violeta #7a5ba8: #7a5ba8 - Tinta ciruela #3b2f48: #3b2f48 La tinta ciruela da 8,7:1 sobre lavanda y 10,8:1 sobre limón. El blanco sobre violeta da 5,4:1. **Sorbete** es la más dulce de las cinco, rosas y albaricoques cálidos para panaderías, estudios de uñas y campañas de verano. - Fresa #f6cfdc: #f6cfdc - Albaricoque #fcd9b8: #fcd9b8 - Vainilla #fbe7b5: #fbe7b5 - Frambuesa #b54f6e: #b54f6e - Tinta frutos rojos #4a2e37: #4a2e37 La tinta frutos rojos sobre fresa da 8,6:1. El blanco sobre frambuesa da 4,9:1. **Pistacho** es fresca y verde, natural sin resultar terrosa. Encaja con viveros, cafeterías y marcas ecológicas. - Pistacho #d9e8c4: #d9e8c4 - Apio #eef3d9: #eef3d9 - Melocotón #f9d5c7: #f9d5c7 - Hoja #4f7a3f: #4f7a3f - Tinta musgo #2e3b33: #2e3b33 La tinta musgo sobre pistacho da 9,1:1. El blanco sobre hoja da 5:1. El melocotón es un pequeño acento cálido. Para elegir entre ellas, empieza por la temperatura. Los pastel cálidos (melocotón, albaricoque, mantequilla) resultan hogareños y apetecibles; los fríos (vidrio marino, azul empolvado, lavanda) se sienten limpios y aireados. Después fíjate en el ancla, porque aparecerá en cada botón y etiqueta de precio, y es el color que la gente recordará. Si ninguna de estas anclas te encaja, quédate con los pastel y pon en su lugar tu propio color de marca, oscurecido hasta que el texto blanco encima supere 4,5:1. ¿Necesitas más contención de la que permiten los pastel? Las [paletas de colores apagados](https://gradiently.design/es/guide/muted-color-palettes) están un paso más hacia el gris. ## Por qué los pastel necesitan una tinta y un ancla Cada pastel de arriba tiene una relación de contraste de entre 1,1:1 y 1,4:1 frente al blanco. Eso queda muy por debajo del 4,5:1 que necesita el texto de cuerpo, lo que significa que unas palabras en pastel sobre una página blanca son sencillamente ilegibles para mucha gente. Los botones pastel con etiquetas blancas fallan igual. La tinta y el ancla resuelven ambos problemas sin que la paleta deje de ser suave en conjunto. | Uso | Color que elegir | Por qué | | --- | --- | --- | | Fondos de página y de sección | Un pastel, o un blanco roto cálido | Las superficies grandes y suaves marcan el ambiente | | Titulares y texto de cuerpo | La tinta | Lo bastante oscura para 8:1 o más sobre cualquier pastel | | Botones y etiquetas | El ancla, con texto blanco | Supera 4,5:1 y le da a la vista un punto focal | | Ilustraciones y formas | Cualquier pastel, más el ancla con moderación | Variedad sin ruido | | Texto sobre fotos | La tinta sobre un panel pastel, o blanco sobre una zona oscura de la foto | Los pastel desaparecen sobre imágenes recargadas | Un reparto de funciones sencillo para cualquier paleta pastel. Comprueba tus propias combinaciones con un verificador de contraste antes de publicar. Elige una tinta que tire hacia uno de tus pastel en lugar de un gris plano: cacao para paletas cálidas, pizarra o ciruela para las frías. Una tinta teñida hace que toda la paleta parezca diseñada. Las reglas detrás de esas cifras están en [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility). ## Cómo convertir cualquier color en pastel Un pastel es cualquier tono con luminosidad alta y saturación moderada. En [HSL](https://gradiently.design/es/guide/hsl-colors), apunta a una luminosidad del 85% al 92% y una saturación del 40% al 80%. El problema de HSL es que el amarillo y el azul con los mismos números se ven muy distintos en brillo. [OKLCH](https://gradiently.design/es/guide/oklch-explained) lo resuelve, así que una sola fórmula te da un pastel homogéneo en cualquier tono. ```css :root { /* lightness 90%, gentle chroma, any hue */ --pastel-peach: oklch(90% 0.06 60); --pastel-lemon: oklch(90% 0.06 100); --pastel-mint: oklch(90% 0.06 150); --pastel-aqua: oklch(90% 0.06 200); --pastel-pink: oklch(90% 0.06 340); /* the ink: same idea, very dark */ --ink: oklch(30% 0.03 40); } ``` Cambia solo el tono y cada pastel conserva el mismo peso visual. Mantén el croma entre 0,04 y 0,07; por encima empieza a parecer de golosina. El mismo método convierte tu color de marca en su propio pastel: conserva su tono, sube la luminosidad y baja la saturación. Así obtienes un color de fondo suave que es inconfundiblemente tuyo. Para la teoría de los tintes, consulta [tintes, tonos y sombras](https://gradiently.design/es/guide/tints-tones-shades). ## Errores que abaratan los pastel ### Evita - Texto pastel sobre blanco o sobre otro pastel - Seis pastel a la vez sin ningún color oscuro - Pastel con distinta luminosidad, de modo que uno parece sucio - Fondos blanco puro que apagan los pastel - Tipografías caligráficas finas en colores pálidos ### Haz - Tinta oscura y teñida para cada palabra - Tres pastel más un ancla y una tinta - Pastel con la misma luminosidad - Un blanco roto cálido como #fdf8f2 - Pesos sólidos con letras claras ## Paletas pastel en una publicación real Aquí está la idea en acción: fondo suave, tinta oscura y un color ancla usado una sola vez. Si quieres los pastel como fondos fluidos en lugar de bloques planos, [degradados pastel](https://gradiently.design/es/guide/pastel-gradients) tiene códigos, y la [estética soft](https://gradiently.design/es/guide/soft-aesthetic) muestra cómo el estilo se mantiene en todo un feed. Una publicación de Instagram en tonos pastel suaves para una panadería que anuncia que vuelve el bizcocho de limón este fin de semana Un fondo suave con una tipografía oscura y segura. El pastel marca el ambiente; la tinta es la que habla. Los fondos pálidos son donde suele romperse la legibilidad, y Gradiently se encarga de ello por ti. La tinta automática de un Mark elige tipografía clara u oscura para cada línea a partir de su propia paleta, así que las palabras sobre un Mark pastel suave siguen siendo lo bastante oscuras para leerse sin que tengas que comprobar cada combinación. ## FAQ ### ¿Qué colores tiene una paleta de colores pastel? Versiones pálidas y suavemente saturadas de cualquier tono: melocotón, amarillo mantequilla, salvia, menta, azul empolvado, lavanda y rosa rubor son los más habituales. ### ¿Cuál es el código hex del rosa pastel? No hay un único código, pero #f6cfdc es un rosa pastel equilibrado. Combínalo con una tinta oscura como #4a2e37 para el texto. ### ¿Qué color de texto va con los colores pastel? Un color oscuro y ligeramente teñido como cacao #3a2e2a, pizarra #2f3a4a o ciruela #3b2f48, que dan entre 8:1 y 10:1 sobre los pastel habituales. ### ¿Los colores pastel son accesibles? Como fondos, sí. Como texto o como color de botón detrás de texto blanco, no: los pastel son demasiado claros. Usa una tinta oscura para las palabras y un color ancla más profundo para los botones. ### ¿Cómo convierto un color en pastel? Sube su luminosidad a entre el 85% y el 92% y mantén una saturación moderada. En CSS, `oklch(90% 0.06 H)` da un pastel homogéneo para cualquier tono H.