Escolha uma paleta de cores para o site; depois, personalize as cores de elementos específicos.

Use paletas de cores e temas de cores para estilizar as cores em todo o seu site, seja qual for a sua preferência: um tema em preto e branco ou combinações de cores ousadas.

Estas opções de cores estão disponíveis nos sites da versão 7.1. Os sites da versão 7.0 têm configurações de cores diferentes.

Vídeo sobre como alterar as cores do site

Assista a este vídeo para ver um passo a passo sobre a paleta de cores e os temas de cores do seu site.

Alterar cores com paletas de cores gerais do site

Todos os sites do Squarespace usam uma paleta com cinco cores para criar um estilo visual coeso. É possível alterar imediatamente as cores do site personalizando a paleta ou selecionando uma nova, o que aplica as cores da paleta a todo o site.

Edite sua paleta de cores atual

Para editar a paleta de cores selecionada:

1. Abra o painel "Estilos do site".
2. Clique em > ao lado de Cores.
3. Clique em Editar paleta. As paletas usam cinco cores, e a maioria inclui preto e branco, que são usados para texto.
4. Clique em uma das cores da paleta e depois clique e arraste os controles deslizantes no seletor de cores para alterá-la. Se você deseja usar o código de uma cor, insira o código hexadecimal, RGB ou HSL no campo abaixo.
5. Repita essas etapas para cada cor da paleta e clique em Salvar.

Defina uma nova paleta de cores

Para definir uma nova paleta de cores:

1. Abra o painel "Estilos do site".
2. Clique em > ao lado de Cores.
3. Clique em Editar paleta, depois escolha:
   • Predefinições - Escolha entre um conjunto de paletas predefinidas em cores selecionadas.
   • Da imagem - Carregue uma imagem para gerar uma paleta com base nas três cores mais marcantes da imagem.
   • Da cor - use o seletor de cores para escolher uma cor primária e gere paletas para complementar essa cor.
4. Clique em Salvar.

Use temas para alterar as cores da seção

Sua paleta define as cores do site, e os temas de cores do site usam essas cores em diferentes combinações. Cada paleta tem dez temas de cores, então você pode dar às suas seções aparências únicas que ainda combinam entre si.

Em alguns casos, o texto e os botões mudam automaticamente para preto ou branco para garantir um contraste melhor com a cor de fundo. Consulte nossas práticas recomendadas de acessibilidade para selecionar cores.

Definir um tema de seção

Para selecionar um tema de cores para uma seção:

1. Abra o painel "Páginas".
2. Clique na página que você quer editar e clique em Editar no canto superior esquerdo.
3. Clique em Editar seção na seção a ser alterada.
4. Clique em Cores e depois em um tema de cores.
5. Clique em Salvar.

Observação: escolher um novo tema de cores altera todas as cores da seção, incluindo quaisquer alterações de cor de texto feitas na barra de ferramentas do bloco de texto.

Como saber qual tema uma seção da página usa?

Para saber qual tema de cores uma seção usa:

1. Abra o painel "Páginas".
2. Clique na página que deseja editar.
3. Role pela prévia do site e veja as etiquetas do tema de cores exibidas no canto superior direito de cada seção.

Por que a etiqueta do meu tema de cores está vazia?

Se aparecer uma caixa vazia em vez de uma etiqueta do tema, a cor da fonte e a cor de fundo podem ser as mesmas, tornando o texto invisível. Para tornar a etiqueta do tema visível:

1. Abra o painel "Estilos do site".
2. Clique em > ao lado de Cores.
3. Clique no tema que aparece vazio no menu Cores.
4. Clique em Título (grande) e altere a cor.
5. Clique em Salvar.

Quais temas outras áreas do site usam?

Outras áreas do seu site têm configurações específicas de tema de cores:

• Barra de notificações - se o cabeçalho do seu site tiver um tema de cores, a barra de notificações seguirá o mesmo tema. Caso contrário, seguirá o tema de cores padrão.
• Páginas incorporadas - as páginas incorporadas do site, como a página 404 padrão ou a página do carrinho de compras, seguem o tema de cores padrão do seu template.
• Botão do menu de sobreposição para celulares - defina um tema de cores para a sobreposição da versão móvel ao editar o cabeçalho do site.
• Cabeçalho do site - defina um esquema de cores ou uma cor personalizada para o cabeçalho do site.

Alterar as cores de elementos específicos do site

Você pode personalizar ajustes de cores para elementos específicos em qualquer tema de cores. Quaisquer alterações feitas nas cores de um tema se aplicam a todas as áreas do seu site que usam esse tema.

Para editar um tema:

1. Abra o painel "Estilos do site".
2. Clique em > ao lado de Cores.
3. Clique no tema que deseja editar. Se você não tiver certeza de qual tema precisa editar, procure a etiqueta do tema de cores na seção que deseja alterar.
4. Clique no ajuste a ser alterado e escolha uma nova cor. Você pode usar uma cor predefinida na aba Paleta ou clicar em Personalizar para usar o seletor de cores.
5. Para desfazer uma mudança antes de salvar, clique no ícone de desfazer no topo do painel ou clique no ponto ao lado de um ajuste específico.
6. As alterações permanecem enquanto você edita outro conteúdo da página. Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.

Usar o seletor de cores para selecionar uma cor personalizada

Cada ajuste de cor tem um círculo ao lado da etiqueta mostrando a cor atual desse elemento. Normalmente, essas cores são da paleta do seu site.

Para escolher uma cor personalizada com o seletor de cores:

1. Clique no ajuste que deseja alterar.
2. Clique em Personalizar para abrir o seletor de cores.
3. Clique no controle deslizante inferior para selecionar uma cor, depois clique no quadrado acima para escolher uma tonalidade ou use o campo de valor para inserir um código de cor específico.
4. Se o ajuste tiver um controle deslizante de opacidade, será possível usá-lo para alterar a transparência.

Selecionar uma cor específica com um código de cor

Caso saiba o valor da cor desejada, clique no campo de valor abaixo do seletor de cores para adicioná-lo. Se precisar de ajuda para encontrar um valor específico de cor, visite sites externos como color-hex.com ou imagecolorpicker.com.

O campo de valor aceita qualquer um destes formatos:

• HEX - Exemplo: #FFFFFF
• RGB ou RGBA - Exemplo: rgba (255, 0, 149, 1)
• HSL/HSLA - Exemplo: hsla (325, 100%, 50%, 1)
• HTML (deve ser em minúscula) - Exemplo: branco

Dica: o campo de valor mostra automaticamente o código de cor quando você usa o controle deslizante de cores para encontrar uma cor. Você pode copiar e colar esse código para adicionar a mesma cor a outros ajustes no tema.

Alterar a transparência de uma cor

Para alterar a transparência de uma cor personalizada, use o controle deslizante de opacidade e arraste o círculo abaixo do seletor de cores. O controle deslizante de opacidade é bastante útil para cores de sobreposição, que são exibidas sobre imagens. Nem todos os ajustes incluem um controle deslizante de opacidade.

Dica: se você usar o controle deslizante de opacidade para tornar a cor de fundo de uma seção transparente, a cor de fundo do tema de cores padrão do seu template poderá aparecer.

O que são temas de cores padrão?

Todo site da versão 7.1 tem um tema padrão de cores. O tema padrão de cores é aplicado automaticamente às seguintes páginas e áreas integradas do site:

• Tela de acesso negado
• Barra de Notificações
• Página de pesquisa integrada
• Página 404 padrão
• Cabeçalho dinâmico sobre uma imagem ou vídeo de fundo
• Página de confirmação do pedido
• Lacunas nas páginas causadas pela rolagem horizontal além da borda da página
• Página de visualização rápida do produto
• Página do carrinho de compras

Como encontro o tema de cores padrão do meu site?

Para encontrar o tema padrão do seu template:

1. Abra o painel "Páginas".
2. Clique em Editar em uma página e depois em Adicionar seção.
3. Clique em + Adicionar em branco, depois em Seção. Novas seções começam com o tema padrão.
4. Clique no ícone de pincel para abrir o painel de estilos do site e clique em ＞ ao lado de Cores.
5. Procure a etiqueta do tema na nova seção.

Posso alterar o tema padrão do meu site?

Não. Não é possível atribuir um novo tema padrão ao seu site, mas, se você souber qual é o tema padrão, poderá alterar a paleta de cores ou alterar os ajustes individuais de cor do tema para personalizar as páginas integradas e outras seções que usam o tema padrão.

Como faço para alterar a cor entre as seções da página e o meu rodapé?

Uma lacuna pode aparecer entre a última seção de uma página e o rodapé, ou abaixo do rodapé. Essas lacunas usam a cor de fundo da seção do seu tema padrão. Quando a seção e o rodapé usam temas de cores diferentes do seu tema padrão, essas lacunas podem ficar mais perceptíveis.

Para que a cor do espaço corresponda à das seções da página ou do rodapé:

1. Abra o painel Estilos do site.
2. Clique em > ao lado de Cores.
3. Clique no seu tema padrão.
4. Clique em Cor de fundo e altere-a para que corresponda à cor de fundo da seção no tema de cores da seção da página ou do rodapé.

Dica: se você combinar a cor de fundo da seção do tema padrão com a cor de fundo da página, a página terá um visual consistente à medida que for carregada. As cores do fundo carregam antes das imagens.

Altere cores de fundo do bloco

É possível adicionar uma cor de fundo a alguns blocos. Essa é uma ótima maneira de destacar um bloco ou ajudar a tornar os blocos sobrepostos mais visíveis no Editor Intuitivo.

Você pode adicionar cores de fundo a estes blocos:

• Blocos em acordeão
• Blocos de Formulários
• Blocos de Newsletter
• Blocos de Citações
• Blocos de Sumário
• Blocos de Texto