Ir para o conteudo

Conversor de Cores

Converta cores entre formatos HEX, RGB e HSL com pré-visualização ao vivo.

#
#FF5733

Pré-visualização da Cor

Resultados da Conversão

HEX
#FF5733
RGB
rgb(255, 87, 51)
HSL
hsl(11, 100%, 60%)
CMYK
cmyk(0%, 66%, 80%, 0%)

Conversor de Cores Grátis – Converta entre Formatos HEX, RGB e HSL

A representação de cores no design digital utiliza múltiplos formatos. Códigos HEX são o padrão web, RGB é usado em telas e programação, e HSL oferece uma forma intuitiva de descrever cores através de matiz, saturação e luminosidade.

As cores HEX (hexadecimais) usam um código de 6 dígitos precedido pelo símbolo hash, como #FF5733. Cada par de dígitos representa os canais vermelho, verde e azul respectivamente, com valores de 00 (0) a FF (255).

RGB (Vermelho, Verde, Azul) define cores especificando a intensidade de cada canal primário em uma escala de 0 a 255. O formato rgb(255, 87, 51) representa a mesma cor que #FF5733.

HSL (Matiz, Saturação, Luminosidade) descreve cores de forma mais intuitiva. O matiz é o ângulo na roda de cores (0-360 graus), a saturação é a intensidade (0-100%) e a luminosidade indica quão clara ou escura a cor é.

FAQ

Compartilhar
PatrocinadoAnúncio

Design profissional facilitado com Canva

Crie logos, posts sociais, apresentações e mais com a simplicidade de arrastar e soltar.

FAQ

Qual a diferença entre HEX e RGB?+
HEX e RGB representam o mesmo modelo de cor mas com notação diferente. HEX usa dígitos hexadecimais (00-FF), enquanto RGB usa números decimais (0-255). #FF5733 em HEX equivale a rgb(255, 87, 51) em RGB.
Por que HSL é útil para designers?+
HSL é intuitivo porque separa a identidade da cor (matiz) de suas propriedades (saturação e luminosidade). Para escurecer uma cor, diminua a luminosidade. Para encontrar a complementar, some 180 ao matiz.
Como encontro a cor complementar?+
Em HSL, a cor complementar é encontrada somando 180 graus ao valor do matiz. Por exemplo, se a cor tem matiz de 11 graus, a complementar tem matiz de 191 graus.
Posso usar esses formatos em CSS?+
Sim, os três formatos funcionam em CSS. HEX: color: #FF5733; RGB: color: rgb(255, 87, 51); HSL: color: hsl(11, 100%, 60%).
O que é a roda de cores?+
A roda de cores organiza as cores em círculo segundo seu matiz: 0/360 graus é vermelho, 60 é amarelo, 120 é verde, 180 é ciano, 240 é azul e 300 é magenta.

Ferramentas mais populares