↔️ Um kit de ferramentas,
cada tarefa de design

Calculadora Clamp

Gere tipografia fluida com CSS clamp(). Defina tamanhos mínimo, preferido e máximo — obtenha a fórmula clamp() perfeita e uma pré-visualização visual da escala.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

↔️ Calculadora Clamp

Guia da Função Clamp

clamp() é uma função matemática CSS que define um valor entre um mínimo e um máximo: clamp(MIN, VAL, MAX). Retorna VAL enquanto ele estiver entre MIN e MAX — quando VAL cai abaixo de MIN retorna MIN, e quando sobe acima de MAX retorna MAX. Isso torna a tipografia fluida possível sem media queries.

Defina seus tamanhos de fonte mínimo e máximo, mais a faixa de viewport onde o escalonamento acontece. A ferramenta calcula a fórmula perfeita baseada em vw e mostra uma prévia do tamanho da fonte em seis larguras de viewport, mais uma curva de como o tamanho muda em toda a faixa.

Pro Tips

Frequently Asked Questions

Q: O que clamp() faz em CSS?
O que clamp() faz em CSS? clamp(MIN, VAL, MAX) escolhe um valor entre MIN e MAX. Se VAL for menor que MIN retorna MIN, se for maior que MAX retorna MAX, caso contrário retorna VAL. Perfeito para tamanhos fluidos que nunca ficam pequenos ou grandes demais.
Q: Como clamp() difere de min() e max()?
Como clamp() difere de min() e max()? min() escolhe o menor valor, max() o maior, e clamp() combina os dois: limita o valor médio entre um limite inferior e um superior. clamp() é o cavalo de batalha da tipografia fluida.
Q: clamp() é suportado em todos os navegadores?
clamp() é suportado em todos os navegadores? Sim. clamp(), min() e max() são suportados em todos os navegadores modernos desde 2020 (Chrome 79+, Firefox 75+, Safari 13.1+).
Q: Quais tamanhos de viewport devo usar para tipografia fluida?
Quais tamanhos de viewport devo usar para tipografia fluida? Faixas comuns são 320px-1200px para sites gerais, ou 360px-768px para projetos mobile-first. Além de vmax o tamanho fica fixo no máximo — é intencional.
Q: Posso usar clamp() também para espaçamento?
Posso usar clamp() também para espaçamento? Sim. Padding e gaps fluidos usam a mesma fórmula: clamp(16px, 4vw, 48px). O espaçamento fluido mantém o ritmo entre dispositivos sem media queries extras.

Cores do Brasil

Do verde da bandeira ao azul dos azulejos, as cores brasileiras misturam natureza tropical, herança portuguesa e a energia do carnaval. Uma paleta viva que reflete a identidade visual do país.

Verde Bandeira #009C3B

O verde da bandeira nacional, símbolo das matas

Amarelo Bandeira #FFDF00

O ouro do losango da bandeira brasileira

Azul Bandeira #002776

O azul do círculo e das estrelas

Azul Azulejo #1E5FA8

Herança dos azulejos portugueses em igrejas e casarões

Rosa Choque #FF1493

A energia vibrante do carnaval e das marcas jovens

Verde Amazônia #228B22

A floresta tropical, pulmão do planeta

Amarelo Ouro #FFD700

O ouro do barroco mineiro de Ouro Preto

Terracota Nordestina #CD5C5C

A argila do sertão e do artesanato nordestino

Anil #4B0082

Cor do vestido tradicional das baianas

Branco Areia #EDE4D3

As praias de areia clara do litoral

Q: Qual é o verde da bandeira do Brasil?
Qual é o verde da bandeira do Brasil? O verde oficial da bandeira brasileira é aproximadamente #009C3B, junto com o amarelo #FFDF00 e o azul #002776.
Q: O que é o azul azulejo?
O que é o azul azulejo? É o azul característico dos azulejos portugueses (aproximadamente #1E5FA8), herança colonial presente na arquitetura de igrejas, casarões e cidades históricas brasileiras.