Desenvolvimento Web
Color Converter
Conversão de cor entre HEX, RGB, HSL, HSV/HSB e CMYK — insira um valor em qualquer campo e os demais serão atualizados instantaneamente.
The same color can be written differently depending on context: HEX and RGB are convenient for code, HSL is intuitive for picking a hue and lightness, and CMYK is for print. This tool converts between all of them at once.
How to use it
- Enter a value in any field (HEX, RGB, HSL, HSV/HSB, or CMYK) — every other format updates instantly.
- The "random color" button generates a random hue for quickly browsing a palette.
- Copy the format you need with one click to paste into CSS or a graphics editor.
Which format to use when
- HEX — a compact notation for CSS and design systems (#4453b8).
- RGB — when you need transparency via rgba() or programmatic access to individual color channels.
- HSL — the easiest for manual tuning: lighten or darken a color by changing just one value.
- CMYK — for materials headed to print, where colors mix subtractively, unlike the additive RGB used on screens.
Things to keep in mind
CMYK on screen is only an approximation — the exact printed color depends on the printer, paper, and color profile used.
Conversion between color spaces isn't always exact for extreme, highly saturated colors, due to differences in gamut coverage between models.
Artigo sobre esta ferramenta: HEX, RGB, HSL: por que existem tantas formas de escrever uma cor
Perguntas frequentes
Como o conversor lida com o canal alfa (transparência)?
Alfa é suportado em HEX (#RRGGBBAA), RGBA e HSLA — o que você insere se transfere para os outros formatos que suportam transparência, enquanto formatos sem canal alfa, como CMYK simples, simplesmente o ignoram.
Por que o valor muda ligeiramente após converter para CMYK e voltar para HEX?
CMYK é um modelo orientado para impressão sem uma única fórmula fixa para converter de/para RGB, então uma ida e volta pode alterar os valores por um erro de arredondamento de uma ou duas unidades; visualmente a cor permanece praticamente a mesma.
Meus dados de cor são enviados para algum lugar?
Não, toda conversão acontece localmente no seu navegador com JavaScript — nada é enviado a um servidor.
Qual a diferença entre OKLCH e HSL?
O OKLCH descreve uma cor por luminosidade (L), croma (C) e matiz (H), mas, diferente do HSL, leva em conta como o olho humano realmente percebe a luminosidade — mudar L no OKLCH não distorce a saturação percebida da cor, então as transições entre tons ficam mais uniformes.
O que significa uma cor estar «fora da gama» (out of gamut)?
Algumas cores em espaços amplos como OKLCH ou Display P3 não podem ser fisicamente reproduzidas em telas que suportam apenas sRGB — o navegador então substitui pela cor disponível mais próxima dentro da gama suportada.