Paletas prontas · Chromoforge

Paleta de cores pastel com códigos HEX

Cores suaves podem funcionar bem em fundos, áreas de apoio e ilustrações. Estas três paletas pastel incluem também uma cor escura para leitura e uma cor de ação com contraste calculado.

Ver as três combinações

O pastel entra na superfície

As combinações abaixo não tentam fazer o texto branco funcionar sobre todo fundo claro. Cada uma inclui um par de texto e fundo e uma ação mais escura, para você usar a aparência suave sem depender de letras pouco legíveis.

Combinações prontas para copiar

Clique em uma amostra para copiar seu HEX, ou copie a paleta inteira e o CSS. As prévias são exemplos visuais, com cores opacas e dados ilustrativos.

Pêssego e lavanda

Uma base quente, uma superfície lilás e detalhes em pêssego. O índigo faz o texto; o violeta mais forte identifica a ação.

Prévia da combinação

Espaço para uma nova ideia.

Uma superfície, uma mensagem e uma ação bem definida.

Explorar destaque

Gerar variações do destaque

:root {
  --canvas: #FFF7ED;
  --surface: #F5E8FF;
  --accent: #FED7AA;
  --support: #DDD6FE;
  --text: #312E81;
  --brand: #6D28D9;
  --on-brand: #FFFFFF;
}

Texto / fundo: 10.76:1Conferir o par
Texto / painel: 9.72:1Conferir o par
Texto do botão: 7.10:1Conferir o par

Jardim suave

Verdes claros para superfícies e um amarelo de apoio. O verde escuro mantém o texto legível e pode ser usado no botão principal.

Prévia da combinação

Espaço para uma nova ideia.

Uma superfície, uma mensagem e uma ação bem definida.

Explorar destaque

Gerar variações do destaque

:root {
  --canvas: #F0FDF4;
  --surface: #DCFCE7;
  --accent: #BBF7D0;
  --support: #FDE68A;
  --text: #14532D;
  --brand: #166534;
  --on-brand: #FFFFFF;
}

Texto / fundo: 8.70:1Conferir o par
Texto / painel: 8.30:1Conferir o par
Texto do botão: 7.13:1Conferir o par

Céu e rosa

Uma base azul-clara com rosa nos detalhes. Use o azul profundo no texto e na ação, deixando as cores claras para áreas maiores.

Prévia da combinação

Espaço para uma nova ideia.

Uma superfície, uma mensagem e uma ação bem definida.

Explorar destaque

Gerar variações do destaque

:root {
  --canvas: #F0F9FF;
  --surface: #E0F2FE;
  --accent: #BAE6FD;
  --support: #FBCFE8;
  --text: #0C4A6E;
  --brand: #075985;
  --on-brand: #FFFFFF;
}

Texto / fundo: 8.87:1Conferir o par
Texto / painel: 8.24:1Conferir o par
Texto do botão: 7.56:1Conferir o par

O que os números de contraste mostram

As taxas comparam apenas os dois valores indicados. Para texto normal, a referência AA é 4,5:1; para texto grande, 3:1. As marcas gráficas essenciais usam outra avaliação, em geral 3:1 contra cores adjacentes. Isso não certifica o layout completo nem todos os pares da paleta.

Confira no seu projeto o tamanho e o peso da fonte, o foco e os estados de interação. Consulte os critérios do W3C para contraste de texto e contraste não textual.

Como usar uma paleta pastel sem perder legibilidade

Uma cor pastel é uma descrição visual, não uma faixa técnica com limites universais. Nesta seleção, os fundos têm luminosidade alta e as cores de ação são mais escuras. Os códigos HEX definem o resultado exato.

Comece aplicando o fundo e a superfície em áreas grandes. Depois acrescente o texto escuro. Use o tom de apoio em pequenos detalhes e confira o foco do teclado, as bordas e os estados de interação no componente pronto.

Texto branco sobre pastel precisa ser conferido

O fato de duas cores parecerem diferentes não garante contraste de texto. Compare, por exemplo, branco sobre o pêssego #FED7AA com índigo #312E81 sobre o mesmo fundo. O verificador mostra a diferença sem depender da aparência da sua tela.

Os pares indicados nas coleções foram calculados para cores opacas. Uma foto, um gradiente ou transparência muda o fundo efetivo e pede outra avaliação. A seleção não certifica a acessibilidade de uma página inteira.

Adapte a combinação ao seu projeto

Copiar a lista HEX preserva estas cores exatas. Copiar o CSS mantém os papéis do exemplo. O link para gerar variações abre a cor de ação na ferramenta principal: a harmonia gerada será uma nova combinação, diferente da seleção manual desta página.

Para aproveitar cores de uma referência própria, use o extrator de cores de imagens. A imagem é processada no seu navegador. Você ainda deve escolher os pares de texto e fundo depois da extração.

Continue com suas cores

Explorar tons de azulCompare códigos e combinações para fundos claros e escuros.Conferir o uso das coresEntenda os limites das verificações de contraste e das simulações.Aplicar em um dashboardSepare superfícies, categorias e estados de interface.