Conversor px ⇄ rem
Converta pixels em rem e em (e vice-versa) para CSS. Defina o tamanho base (normalmente 16 px) e veja o valor na hora.
Para que serve
O CSS moderno costuma usar rem e em em vez de pixels para layouts escaláveis e acessíveis. Esta ferramenta faz a conversão na hora, para você não precisar calcular de cabeça.
Base de 16 px
Por padrão, 1 rem = 16 px (o tamanho de texto padrão do navegador). Se você alterou na raiz o font-size, edite a base para obter o valor certo.
rem e em: a diferença que custa caro
Parecem dois nomes para a mesma coisa, mas não são. O rem é sempre relativo à raiz do documento, então 1,5rem tem o mesmo tamanho em qualquer lugar da página. O em é relativo ao elemento pai, e por isso se acumula: um elemento com 1,2em dentro de outro com 1,2em fica 1,44 vez maior, e com três níveis de aninhamento, 1,73. É por isso que uma lista dentro de uma lista, ou um menu dentro de uma caixa, acaba com o texto crescendo sem que ninguém peça.
A regra prática que quase sempre vale: rem para tamanhos de texto e espaçamentos da página, em só onde você realmente quer que uma medida acompanhe o texto do próprio elemento (o padding de um botão, por exemplo, que assim se mantém proporcional a qualquer tamanho que você dê a ele).
Por que não se usam pixels para texto
Não é purismo: quem precisa de letras maiores muda o tamanho de texto padrão nas configurações do navegador, e um texto escrito em px não cresce nem um pixel. Com rem, a página inteira cresce junto e mantém o layout. É uma das poucas escolhas de CSS com efeito direto sobre pessoas com baixa visão, e é também por isso que as diretrizes de acessibilidade a exigem.
Para bordas, sombras e linhas finas, pixels funcionam perfeitamente: nesses casos o tamanho não deve acompanhar o texto, e uma borda de 1px é exatamente o que você quer.
O truque dos 62,5% e por que é melhor abandoná-lo
Durante anos se escreveu html { font-size: 62.5% } para que 1rem valesse 10px e as contas pudessem ser feitas de cabeça. Funciona, mas tem dois defeitos: quem lê esse CSS sem conhecer o truque acha todas as medidas erradas e, principalmente, o texto base passa a ser 10px para tudo que não tenha uma regra mais específica. Com uma página como esta não há necessidade de fazer contas de cabeça, então a base pode ficar como é naturalmente.
Um detalhe que surpreende: nas media queries o rem não olha para o font-size definido na raiz, e sim sempre para o padrão do navegador. Uma @media (min-width: 40rem) vale 640px mesmo que você defina 62,5%.
Veja também
Para cores em CSS existe o Conversor de cores, para sombras o Gerador de box-shadow e para cantos arredondados o Gerador de border-radius. Se o CSS precisar ficar mais enxuto antes de publicar, use o Minificador de CSS.