Entendendo os Formatos de Cor na Web
Designers web e desenvolvedores frontend constantemente precisam traduzir cores entre diferentes formatos dependendo do contexto de seus CSS ou ferramentas de design. Nosso conversor de cores permite que você alterne perfeitamente entre os três formatos mais dominantes na web.
HEX (Hexadecimal)
Os códigos hex são a forma mais comum de representar cores no design web. Eles consistem em uma cerquilha (#) seguida de 6 caracteres (usando números de 0 a 9 e letras de A a F). Os caracteres são divididos em três pares representando Vermelho, Verde e Azul. Exemplo: #FF0000 é vermelho puro.
RGB (Vermelho, Verde, Azul)
O RGB representa cores através da combinação de luz Vermelha, Verde e Azul. Cada valor varia de 0 a 255. Exemplo: rgb(255, 0, 0) é vermelho puro. O RGB é frequentemente usado em CSS quando os desenvolvedores precisam adicionar um canal alfa para transparência (RGBA).
HSL (Matiz, Saturação, Luminosidade)
O HSL é o formato mais intuitivo para os humanos entenderem e manipularem.
- Matiz: O grau no círculo cromático (0-360). 0 é vermelho, 120 é verde, 240 é azul.
- Saturação: Porcentagem (0-100%). 0% é um tom de cinza, 100% é a cor completa.
- Luminosidade: Porcentagem (0-100%). 0% é preto, 50% é normal, 100% é branco.
Frameworks de UI modernos dependem fortemente do HSL porque torna a geração de paletas de cores incrivelmente fácil. Para criar um tom mais escuro da sua cor primária ao passar o mouse, você simplesmente diminui a porcentagem de Luminosidade enquanto mantém Matiz e Saturação inalterados.