Cambiar los colores

Elige una paleta de colores para tu sitio y luego aplica colores específicos a diferentes secciones de página.

Última actualización: 29 de enero de 2025

Ya sea que prefieras un tema en blanco y negro o combinaciones de colores audaces, puedes usar estilos del sitio y estilos de sección para cambiar los colores de tu sitio.

Esta guía proporciona información general de cómo cambiar los colores de los diferentes elementos del sitio.

Mira el video

Antes de comenzar

Cambiar los colores de todo el sitio

Para cambiar todos los colores del sitio, elige una paleta de colores:

  1. Abre el panel Estilos del sitio y haz clic en > junto a Colores.
  2. Haz clic en Editar paleta para elegir una nueva paleta de colores. Puedes elegir entre estos tipos de paletas de colores:
    • Ajustes preestablecidos: elige entre un conjunto de paletas predefinidas en colores selectos.
    • De imagen: Sube una imagen para generar una paleta basada en los colores más destacados de la imagen.
    • De color: Elige un color primario utilizando el selector de color y genera paletas que complementen ese color.
  3. Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.

colors_-_edit_palette.png

colors_-_edit_palette.png

Ten en cuenta lo siguiente:

  • Todas las paletas siempre incluyen blanco y negro, que generalmente se utilizan para texto.
  • Cuando se genera una paleta a partir de una imagen, los colores se extraen de los tres colores más dominantes de la imagen.
  • En cualquier paleta, puedes utilizar el Editor de paletas para personalizar cada color.

Cambiar los colores de la sección

La paleta de colores genera distintos temas de color para las secciones de tu página. Después de configurar los colores de todo el sitio, puedes cambiar el tema de color de cualquier sección para darle un aspecto especial.

Para confirmar qué tema utiliza una sección:

  1. Abre el panel Estilos del sitio y haz clic en > junto a Colores.
  2. Desplázate por la vista previa de la página y revisa las etiquetas del tema de la sección en cada sección.

section_themes_on_preview.png

section_themes_on_preview.png

Nota

si ves un cuadro en blanco en una sección en lugar de una etiqueta de tema, el color del Encabezado (grande) probablemente esté configurado en el mismo color que el del Fondo de la sección. Para ver la etiqueta del tema, haz clic en el tema que también aparece en blanco en el menú Colores y, a continuación, cambia Encabezado (grande) a otro color. Consulta la siguiente sección para ver los pasos detallados.

Para cambiar el tema de color de una sección:

  1. Abre el panel Páginas.
  2. Selecciona la página que deseas editar y presiona Editar en la esquina superior izquierda.
  3. Haz clic en Editar sección o en el ícono de lápiz en la sección que quieres cambiar.
  4. En la pestaña Colores, haz clic en un tema para aplicarlo a esa sección.
  5. Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.

Nota

Al cambiar el tema de color de una sección, se restablecen todos los colores de esa sección, incluidos los cambios de color del texto realizados en la barra de herramientas del bloque de texto.

section_theme_editor.png

Tipos de temas

El tipo de tema (1 o 2) controla qué color se aplica al texto principal de una sección y qué color se aplica a otros elementos:

  • El más claro 1, Claro 1, Oscuro 1 y El más oscuro 1: el texto y los encabezados son negros o blancos, y otros colores se aplican al fondo y a los elementos más pequeños del sitio.
  • Muy claro 2, Claro 2, Oscuro 2 y Muy oscuro 2: El color en el lado izquierdo de la paleta se aplica a todo el texto y encabezados, y otros colores se aplican al fondo y a los elementos más pequeños del sitio.
  • Brillante: el color del lado izquierdo de la paleta se aplica al texto (Brillante 1) o al fondo (Brillante 2) y otros colores se aplican al fondo y a los elementos más pequeños del sitio.

En algunos casos, los colores de texto y de botones son blanco o negro por defecto para proporcionar un mejor contraste con el color de fondo.

Temas para otras áreas del sitio

Sigue los pasos que se indican a continuación para encontrar los temas de color de estas áreas de tu sitio:

  • Barra de anuncios: siempre coincide con el tema de color del encabezado.
  • Botón de menú de superposición móvil: los colores de superposición móvil se configuran en el encabezado.
  • Fondo de sección: abre el panel Colores y busca la etiqueta del tema y, a continuación, haz clic en ese tema para abrir todos los colores. Busca el color junto a Fondo de sección.
  • Páginas integradas: La página de error 404 predeterminada, la página de carrito de compras, la página de confirmación del pedido y la página de búsqueda integrada utilizan el tema cromático predeterminado de tu plantilla.

Personalizar colores del tema

Puedes personalizar aún más cualquier tema estableciendo colores específicos para diferentes elementos del sitio. Los cambios hechos a los colores de un tema se aplican a todas las áreas de tu sitio que utilicen ese tema.

Para editar un tema:

  1. Abre el panel Estilos del sitio y haz clic en > junto a Colores.
  2. Haz clic en el tema que desees editar.
  3. Haz clic en el ajuste que deseas cambiar y, a continuación, elige un nuevo color. Puedes utilizar un color preestablecido en la pestaña Paleta o hacer clic en Personalizado para utilizar el selector de colores. Es probable que tengas que desplazarte para revisar todos los ajustes.
  4. Utiliza el control deslizante de opacidad para cambiar la transparencia.
  5. Para deshacer los cambios antes de guardar, en la parte superior del panel, haz clic en el icono de deshacer o presiona el punto al lado de un ajuste en particular.

Tus cambios se mantienen mientras editas el contenido de otra página. Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.

A medida que cambies los colores del tema, ten en cuenta estos consejos:

  • Si no sabes qué tema tienes que editar, busca la etiqueta del tema cromático en el área de la página que deseas cambiar.
  • El menú Editar tema muestra todos los ajustes de color posibles para tu sitio, incluso si la página que estás editando actualmente no incluye esos elementos. Por ejemplo, todas las opciones de color del blog aparecerán incluso si estás editando una página de diseño.
  • Si una sección tiene una imagen de fondo, utiliza el ajuste Superposición de fondo para establecer la opacidad del color de superposición. Si la sección utiliza un color o video de fondo, utiliza Fondo de sección para establecer dicho color.

Selector de color

Utiliza el selector de color para elegir un color personalizado para un elemento de tu sitio. Cada ajuste de color tiene un círculo junto a su etiqueta que muestra el color actual de ese elemento.

Para elegir un nuevo color, haz clic en el círculo de colores junto al ajuste que quieres cambiar. Haz clic en el control deslizante inferior para seleccionar un color y, a continuación, haz clic en el cuadrado de arriba para elegir un tono.

pick_a_color.png

Si conoces el valor del color que deseas, también puedes hacer clic en el campo de valor para editarlo. Este campo acepta cualquiera de los siguientes formatos:

  • HEX; p. ej.: #FFFFFF
  • RGB o RGBA; p. ej.: rgba(255, 0, 149, 1)
  • HSL/HSLA; p. ej.: hsla(325, 100%, 50%, 1)
  • HTML (debe estar en minúscula); p. ej.: blanco

Si necesitas ayuda para encontrar el valor de un color específico, puedes consultar sitios externos, como color-hex.com o imagecolorpicker.com.

Consejo

El campo de valor se rellena automáticamente cuando se utiliza el control deslizante de color para buscar un color. Puedes copiar y pegar este código para agregar el mismo color a otros retoques en el tema.

Transparencia

Para cambiar la transparencia de un color, usa el control deslizante de opacidad arrastrando el círculo debajo del selector de colores. El control deslizante de opacidad es especialmente útil para los colores de la superposición, que aparecen encima de las imágenes.

  • En la versión 7.1, solo es posible cambiar la transparencia de los colores de la paleta.
  • En la versión 7.0, algunos retoques de color no incluyen un control deslizante de opacidad.
adjust_the_opacity.png

Consejo

Si utilizas el control deslizante de opacidad para hacer que el color de fondo de una sección sea transparente, el color de fondo del tema de color predeterminado de la plantilla puede mostrarse a través de esta. 

Cambiar el color del borde del recuadro

Cuando una sección tiene una imagen de fondo, puedes visualizarla como imagen sin bordes o recuadro.

  • Imagen sin bordes extiende la imagen de un borde de la ventana del navegador al otro, abarcando el ancho de tu sitio.
  • El recuadro aplica una ligera sangría a la imagen y crea un borde alrededor de ella.

Cuando la imagen se establece en recuadro, puedes cambiar el color del borde:

  1. Abre el panel Estilos del sitio y haz clic en > junto a Colores.
  2. Haz clic en el tema de color de la sección que quieres cambiar.
  3. En Todo el sitio, haz clic en Borde del recuadro y elige un color.
  4. Tus cambios se mantienen mientras editas el contenido de otra página. Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.

Cambiar los colores de fondo del bloque

Cómo acceder a esta función

Los colores de fondo del bloque solo se admiten en los sitios de la versión 7.1.

Algunos bloques incluyen una función de color de fondo. Esta es una excelente manera de hacer que un bloque se destaque o de ayudar a que los bloques con solapamiento sean más visibles en el Editor dinámico. Agrega colores de fondo a los siguientes bloques activando la opción Fondo en la pestaña Diseño del bloque:

  • Bloques de acordeón
  • Bloques de formulario
  • Bloques de newsletter
  • Bloques de Cita
  • Bloques de resumen

También puedes habilitar los colores de fondo en los bloques de texto haciendo clic en el bloque de texto y luego en el icono de fondo del bloque. Después de cambiar el fondo, haz clic en Color para seleccionar un color de la paleta de colores de tu sitio web o un color personalizado. Haz bloques con colores de fondo coincidentes o dale a cada bloque su propio color único.

Temas de colores predeterminados

Cada plantilla de la versión 7.1 tiene una combinación de colores predeterminada. Este tema se aplica automáticamente a las siguientes páginas y áreas integradas en tu sitio:

  • Pantalla de acceso denegado
  • Barra de anuncios
  • Página de búsqueda integrada
  • Página 404 predeterminada
  • Encabezado dinámico sobre una imagen o video de fondo
  • Página de confirmación del pedido
  • Página de vista rápida del producto
  • Secciones con una imagen de fondo o video
  • Página del carrito de compras

No puedes asignar un tema diferente a estas áreas de tu sitio, pero puedes hacer cambios en el tema predeterminado para personalizar estas páginas. Para encontrar el tema predeterminado de tu plantilla:

  1. Agrega una sección en blanco a una página.
  2. Abre el panel Estilos del sitio y haz clic en > junto a Colores.
  3. Busca la etiqueta del tema. A las nuevas secciones se les asigna la combinación de colores predeterminada.

Consejo

Otra forma de determinar el tema cromático predeterminado es abrir una de las páginas del sistema, presionar / y buscar Estilos del sitio. Puedes acceder al panel Colores y revisar el indicador del tema desde allí.

Espacio entre la sección y el pie de página

En páginas con una sola sección o páginas muy cortas, puede aparecer un espacio entre la última sección y el pie de página. El espacio hereda el color de fondo de la sección del tema predeterminado.

Cuando el espacio es de un color diferente, como cuando la sección y el pie de página usan temas de color diferentes a los predeterminados, es posible que se note más.

Para solucionarlo, establece el color de fondo de la sección de tu tema predeterminado para que coincida con el color de fondo de la sección de tu página o con el tema del pie de página.

Consejo

Si combinas el color de fondo de sección del tema predeterminado y el color de fondo de la página, esta se verá coherente a medida que se cargue. Los colores de fondo se cargan antes que las imágenes.

Cambiar colores en la versión 7.0

Si el sitio está en la versión 7.0, el proceso para cambiar los colores funciona de otra manera diferente.

Consejo

Las páginas de portada tienen sus propias opciones de estilo.

Abre el panel Diseño y haz clic en Estilos del sitio para configurar manualmente los colores de tu sitio con ajustes de estilo.Los ajustes específicos dependen de la plantilla de tu sitio.Revisa las guías de tu plantilla para obtener ayuda más amplia sobre cómo cambiar los colores de tu sitio.

Para cambiar los colores en un sitio de la versión 7.0, primero navega hasta la página en la que desees realizar cambios. Algunos ajustes solo se muestran cuando estás en la página a la que afectan, por lo que navegar a la página que estás editando ayudará a que aparezcan los ajustes correctos. También puedes obtener una vista previa de tus ediciones de estilo en la página seleccionada a medida que las realizas.

Para encontrar los ajustes específicos para un elemento de la página, haz clic en dicho elemento en la vista previa. En Estilos del sitio solo aparecen los ajustes de estilo correspondientes a dicho elemento y el resto queda oculto. Este atajo está disponible en la mayoría de las plantillas y para la mayoría de las áreas de tu sitio. Haz clic en Mostrar todos para volver a ver todos los ajustes de la página.

site_styles_-_show_all.png

Para modificar los colores de tu sitio:

  1. Abre el panel de Páginas y haz clic en la página que quieres cambiar.
  2. Cuando la vista previa de tu sitio muestre la página correcta, regresa al panel de Sitio web.
  3. Haz clic en Diseño, y, luego, en Estilos del sitio.
  4. Desplázate hacia abajo para revisar todos los ajustes disponibles en la página que estás viendo. Haz clic en el ajuste que quieras cambiar y, a continuación, elige un color nuevo.
  5. Utiliza el control deslizante de opacidad para cambiar la transparencia.
  6. Haz clic en cualquier parte fuera de la ventana de color para cerrar el selector de colores.
  7. Para deshacer los cambios antes de guardar, en la parte superior del panel, haz clic en el icono de deshacer o presiona el punto al lado de un ajuste en particular.
  8. Haz clic en Guardar en la parte superior del panel.

Cambiar los colores de fondo

Estas familias de plantillas tienen zonas con fondo personalizable:

Familia de plantillas Áreas de fondo
Adirondack
  • Sitio
  • Lienzo
  • Barras de navegación
  • Encabezado
Avenue
  • Sitio
  • Lienzo
Aviator
  • Sitio
  • Lienzo
  • Encabezado/Pie de página
Bedford
  • Sitio
  • Encabezado
  • Pre-pie de página
  • Pie de página
Brine
  • Sitio
  • Lienzo
  • Borde
  • Encabezado superior
  • Pie de página
  • Barras móviles
Farro
  • Sitio
  • Borde
  • Encabezado
  • Pie de página
  • Barra móvil
Five
  • Sitio
  • Lienzo
  • Borde del lienzo
  • Encabezado
  • Navegación
Flatiron
  • Sitio
  • Encabezado/Pie de página
Forte
  • Sitio
Galapagos
  • Sitio
  • Encabezado
Ishimoto
  • Sitio
  • Borde de página
Momentum
  • Sitio
  • Lienzo
  • Navegación
Montauk
  • Sitio
  • Lienzo
Native
  • Sitio
Pacific
  • Sitio
  • Encabezado
  • Sección alternante del índice
  • Pre-pie de página
  • Pie de página
Skye
  • Sitio
Supply
  • Sitio
  • Navegación en el encabezado/la barra lateral
Tremont
  • Sitio
  • Superposición de navegación
  • Índice
Wells
  • Sitio
Wexley
  • Sitio
  • Navegación en dispositivos móviles
York
  • Sitio
  • Banner

Ten en cuenta lo siguiente:

  • Los colores de fondo no se transfieren cuando cambias de plantilla.
  • Algunas plantillas también admiten imágenes de fondo.
  • En algunas plantillas, se puede mostrar un banner detrás del encabezado.
  • Al iniciar sesión, el fondo muestra un color blanco al cargar una página, independientemente del color seleccionado en los estilos del sitio. Esto no es visible para los visitantes.

Para obtener más ayuda, visita la guía de tu plantilla.

Mira el video

Este video corresponde a la versión 7.0.

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.