Conversor de cores

Cole uma cor em qualquer formato e copie em todos os outros: hex para rgb, rgb para hex, hex para hsl, um conversor OKLCH, hex para CMYK, Display P3 e mais.

Como converter uma cor

  1. Cole ou digite uma cor em qualquer formato CSS: hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() ou color(), um valor CMYK ou um nome de cor como coral.
  2. A linha de status confirma o que foi lido, incluindo a opacidade e se a cor cabe no sRGB ou no Display P3.
  3. Copie qualquer linha da lista de formatos. Eles são agrupados em web, perceptual, dispositivo e código nativo.
  4. O endereço da página é atualizado com a sua cor, então você pode salvar nos favoritos ou compartilhar uma conversão.

O que você pode fazer

  • Formatos web

    HEX, com HEX de 8 dígitos quando há opacidade, além de RGB, HSL e HWB, escritos como o CSS espera.

  • Formatos perceptuais

    CIE Lab, LCH, OKLab e OKLCH, além de uma variável de tema Tailwind v4 pronta.

  • Display P3 e CMYK

    Display P3 de gama ampla e uma estimativa simples de CMYK. Se uma cor ficar fora do sRGB, você recebe uma alternativa com gamut mapeado e outra cortada.

  • Código nativo

    Valores de ARGB do Android, UIColor do Swift, Color do SwiftUI e Color do Flutter, prontos para colar.

  • Opacidade

    Uma cor com alfa mantém a opacidade em todos os formatos que a comportam.

  • Exemplos e próximos passos

    Experimente os exemplos, abra a página da cor para ver tons e harmonias ou verifique o contraste dela.

Perguntas frequentes

Como converter HEX para RGB?

Cole o código hex, por exemplo #3B82F6, e copie a linha RGB. À mão, divida os seis dígitos em três pares e converta cada par da base 16 para um número de 0 a 255: 3B é 59, 82 é 130 e F6 é 246, então #3B82F6 é rgb(59, 130, 246).

Como converter RGB para HEX?

Informe o valor rgb() e copie a linha HEX. À mão, escreva cada canal com dois dígitos hexadecimais e junte: 59, 130 e 246 viram 3B, 82 e F6, o que dá #3B82F6.

Qual é a diferença entre HEX, RGB e HSL?

HEX e RGB descrevem a mesma coisa: as quantidades de luz vermelha, verde e azul a misturar. O HEX escreve as três quantidades na base 16 e o RGB na base 10. O HSL descreve matiz, saturação e luminosidade, o que é mais fácil de ajustar à mão.

O que é OKLCH?

OKLCH é um formato de cor CSS com três partes: luminosidade, croma e matiz. Ele se baseia no espaço de cor OKLab, onde passos numéricos iguais parecem passos visuais iguais, então mudar a luminosidade não desloca o matiz aparente como acontece no HSL. Os navegadores modernos o suportam por meio de oklch().

O valor CMYK é preciso para impressão?

Não. O valor CMYK vem de uma fórmula simples, sem perfil ICC, então a cor impressa vai variar. Use como ponto de partida e confira uma prova com a sua gráfica.