> converter | visualizar | escolher <
// Converta entre formatos de cor HEX, RGB, HSL, HSV e CMYK
Pré-visualização de cores
A pré-visualização ao vivo atualiza instantaneamente enquanto você digita ou escolhe cores.
Entrada em qualquer formato
Insira uma cor em qualquer formato e todos os outros formatos são atualizados automaticamente.
5 formatos de cor
Converta entre HEX, RGB, HSL, HSV/HSB e CMYK. Copie qualquer formato com um clique.
// SOBRE FORMATOS DE COR
Modelos de cor:
As cores podem ser representadas por diferentes modelos: RGB aditivo para telas, CMYK subtrativo para impressão, notação HEX como representação RGB compacta, e HSL/HSV para matiz, saturação e luminosidade/valor.
Exemplo:
#FF5733 → rgb(255, 87, 51) → hsl(11, 100%, 60%)
Casos de uso comuns:
- >Desenvolvimento web: cores CSS em HEX, RGB ou HSL
- >Design para impressão: conversão de RGB para CMYK
- >Design UI: HSL para ajustes intuitivos de cor
- >Diretrizes de marca: cores consistentes entre formatos
- >Acessibilidade: verificação de razões de contraste
>> perguntas frequentes
P: Qual a diferença entre HEX e RGB?
R: HEX e RGB representam o mesmo modelo de cor em notações diferentes. HEX usa hexadecimal (#FF5733) enquanto RGB usa valores decimais (rgb(255, 87, 51)).
P: O que é HSL e por que usá-lo?
R: HSL significa Matiz, Saturação, Luminosidade. É um modelo de cor mais intuitivo para humanos. CSS suporta nativamente a notação hsl().
P: Quando devo usar CMYK?
R: CMYK é o modelo de cor usado na impressão. Nem todas as cores RGB podem ser reproduzidas em CMYK.
P: Quais formatos de cor CSS são suportados?
R: Navegadores modernos suportam HEX, RGB, HSL, cores nomeadas e formatos mais novos como hwb(), lab(), lch(), oklch().
P: Como os formatos de cor afetam a acessibilidade?
R: O formato não afeta diretamente a acessibilidade, mas entender os valores de cor ajuda a calcular razões de contraste. WCAG 2.1 requer um mínimo de 4,5:1 para texto normal.
// Cores comuns em HEX, RGB e HSL
| HEX | RGB | HSL |
|---|---|---|
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
// Notações de cor CSS e conversão
color: #ff8000; color: #f80; /* shorthand for #ff8800 */ color: #ff800080; /* 8 digits: last two = alpha */ color: rgb(255 128 0); color: rgb(255 128 0 / 50%); color: hsl(30 100% 50%); #FF8000 -> FF=255 80=128 00=0 -> rgb(255, 128, 0)
>> Mais perguntas
P: Como converto HEX para RGB manualmente?
R: Divida o código em pares e converta cada par de hexadecimal para decimal: #FF8000 → FF = 255, 80 = 128, 00 = 0, ou seja rgb(255, 128, 0).
P: O que significam a forma curta (#F80) e o HEX de 8 dígitos?
R: #F80 é a abreviação de #FF8800 (cada dígito é duplicado). Com 8 dígitos (#RRGGBBAA), os dois últimos são o canal alfa, ou seja, a opacidade.
P: Por que as cores ficam diferentes na impressão e na tela?
R: Telas misturam luz de forma aditiva (RGB) e cobrem uma gama maior; a impressão mistura tintas de forma subtrativa (CMYK). Verdes, azuis e neons vivos muitas vezes só são impressos de forma aproximada: confira com uma prova.