Voltar ao Menu
🎨
Utilidades

Seletor de Cores

Escolha cores e converta entre HEX, RGB e HSL instantaneamente.

HEX

#FF5733

RGB

rgb(255, 87, 51)

HSL

hsl(11, 100%, 60%)

HEX, RGB e HSL são três formas diferentes de representar a mesma cor: HEX usa código hexadecimal, RGB usa valores de vermelho/verde/azul de 0 a 255, e HSL usa matiz/saturação/luminosidade.

Como funciona o cálculo de Seletor de Cores

A ferramenta permite escolher uma cor visualmente ou digitar um código HEX, e converte automaticamente entre os três formatos mais usados em design e desenvolvimento web: HEX (usado em CSS e a maioria dos softwares de design), RGB (usado quando se trabalha com intensidade de cada cor primária de luz) e HSL (mais intuitivo para ajustar tonalidade, saturação e brilho de uma cor).

Exemplo prático

Exemplo: convertendo uma cor laranja

  1. 1.

    Cor selecionada: #FF5733

  2. 2.

    Conversão para RGB: rgb(255, 87, 51)

  3. 3.

    Conversão para HSL: hsl(9, 100%, 60%)

A mesma cor laranja pode ser representada nos três formatos, dependendo do que seu projeto de design ou código precisar.

Perguntas Frequentes

Qual formato devo usar no meu projeto?
HEX é o mais comum em CSS e ferramentas de design. RGB é útil quando se trabalha com transparência (RGBA). HSL é mais intuitivo para ajustar tonalidade e brilho manualmente.
O que significa cada letra em HSL?
H (Hue/Matiz) é a cor em si (0-360°), S (Saturation/Saturação) é a intensidade da cor (0-100%), e L (Lightness/Luminosidade) é o quão claro ou escuro é (0-100%).
Por que HEX usa letras e números?
HEX é um sistema hexadecimal (base 16), que usa números de 0-9 e letras de A-F para representar valores de 0 a 255 de forma mais compacta.
RGB e RGBA são a mesma coisa?
RGB tem 3 valores (vermelho, verde, azul). RGBA adiciona um 4º valor (Alpha) para controlar a transparência da cor.

Gostou? Compartilhe com quem vai usar

WhatsAppFacebookXTelegramPPinterestLinkedIn

Sugestões de compra: curso design (link de afiliado)