HEX, RGB, HSL: qual a diferença entre formatos de cores

Formatos de cores na web

No desenvolvimento e design web, as cores são especificadas de várias maneiras. Cada formato tem suas vantagens.

HEX (#RRGGBB)

A notação hexadecimal é o formato mais comum na web.

cor: #4f46e5; /* Índigo */ 
cor: #09090b; /* Quase preto */ 
cor: #fff; /* Forma abreviada #ffffff */ 

Prós: Brevidade, clareza para designers, suporte em qualquer lugar.

RGB (vermelho, verde, azul)

Define a cor através da intensidade de três canais de 0 a 255.

cor: rgb(79, 70, 229); /* Índigo */ 
cor: rgba (79, 70, 229, 0,5); /* Com transparência */ 

Prós: Intuitivo, conveniente para manipulação programática de cores.

HSL (matiz, saturação, luminosidade)

O formato mais “humano”: matiz (°), saturação (%), luminosidade (%).

cor: hsl(243, 75%, 59%); /* Índigo */ 
cor: hsl(243, 75%, 45%); /* Mais escuro */ 
cor: hsl(243, 75%, 75%); /* Isqueiro */ 

Prós: Crie facilmente paletas de tons alterando apenas a luminosidade.

CMYK (ciano, magenta, amarelo, chave/preto)

Usado em impressão.

cmyk(66%, 69%, 0%, 10%) = índigo 

Prós: Correspondência exata da cor quando impressa.

Quando usar o quê?

Converta cores online com nossa ferramenta - verificador de contraste HEX, RGB, HSL, CMYK e WCAG.