Conversor de cores

Conversor de cores

Cole uma cor em qualquer notação que o CSS entenda — #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%) — e as outras duas voltam instantaneamente. Hexadecimal curto como #f00 é expandido, o hash inicial é opcional e tanto a sintaxe de vírgula antiga quanto a sintaxe de espaço mais recente são lidas sem que seja informado qual delas você usou. Coloque uma cor por linha e uma paleta inteira será convertida de uma só vez, que é exatamente o que você deseja quando uma transferência de design chega como uma coluna de códigos hexadecimais e sua folha de estilo é escrita em HSL.

Alpha sobrevive à viagem da maneira que você escreve: rgba(59, 130, 246, 0.5), rgb(59 130 246/50%) e o hexadecimal de 8 dígitos #3b82f680 descrevem o mesmo azul meio transparente e cada um se converte nos outros. Desative “Manter canal alfa” quando desejar apenas a cor opaca. O menu de formato de saída restringe o resultado apenas para hex, RGB ou HSL – útil para listas em massa – e o menu de sintaxe decide entre rgb(255, 0, 0) e rgb(255 0 0 / 0.5), então o que você copia cola diretamente na base de código que você já possui. O hexadecimal maiúsculo está a uma caixa de seleção de distância.

Ative a paleta de tonalidades e cada cor ganha uma tabela de variantes mais claras e mais escuras, misturadas uniformemente em direção ao branco e ao preto. É uma maneira rápida de derivar estados de foco, bordas e estilos desativados de uma cor de marca sem abrir uma ferramenta de design. Escolha de um a oito passos de cada lado; a cor base fica no meio em 0%.

Tudo é executado no seu navegador – sem upload, sem ida e volta ao servidor, sem conta. As cores inéditas da marca permanecem na sua máquina. As linhas que não são coloridas são deixadas no lugar como um comentário CSS e contadas na contagem, para que um erro de digitação nunca esconda o resto de uma longa lista. Cores CSS nomeadas como rebeccapurple não são suportadas; converta-os em hexadecimal primeiro.

FAQ