Úteis — Tudo o que você precisa, em um só lugar.

Gerador de variáveis CSS

Transforme uma paleta de cores em custom properties CSS (:root) ou em tema do Tailwind v3 e v4, com escala 50–900 opcional.

Como utilizar

  1. Defina nomes e cores da paleta.
  2. Escolha prefixo, formato e se quer escala de tons.
  3. Copie o código para CSS ou Tailwind.

Informações técnicas

  • Escala gerada por mistura linear com branco/preto (a base fica em 500).

Ferramentas relacionadas

  • Conversor de cores HEX, RGB e HSL — Converta cores entre HEX, RGB, HSL, HSV e CMYK, verifique o contraste WCAG e gere tons e sombras.
  • Gerador de gradiente CSS — Crie gradientes lineares, radiais e cônicos com várias paradas de cor e pré-visualização em tempo real.
  • Formatador de CSS — Formate CSS, SCSS e Less com o Prettier, com indentação e largura de linha configuráveis.
  • Analisador de URL — Decomponha uma URL em esquema, host, porta, caminho, parâmetros decodificados e fragmento, edite e reconstrua.
  • Analisador de User-Agent — Descubra navegador, motor, sistema operacional e tipo de dispositivo a partir de uma string User-Agent.
  • Comparador de JSON (JSON Diff) — Compare dois JSON e veja o que foi adicionado, removido ou alterado em cada caminho, com opção de ignorar a ordem de arrays.