Conversor de Cores

Converta qualquer cor entre HEX, RGB, HSL, HSV, CMYK e nomes de cor CSS instantaneamente. Funciona totalmente no seu navegador: nada é enviado a nenhum servidor.

Cor

Qualquer formato de cor

HEX (#2563eb), rgb(), hsl(), hsv(), cmyk(), oklch(), lab() ou um nome CSS como rebeccapurple. Suporta alpha.

Conversões

O que é um conversor de cores?

A mesma cor pode ser escrita em várias notações. HEX e RGB a descrevem como quantidades de luz vermelha, verde e azul; HSL e HSV a descrevem por matiz, saturação e luminosidade ou valor, o que é mais fácil de raciocinar ao ajustar uma cor manualmente; OKLCH e Lab a descrevem em termos perceptuais, em que passos iguais parecem igualmente diferentes, e CMYK a descreve como as tintas ciano, magenta, amarela e preta que uma gráfica usaria. Esta ferramenta lê uma cor em qualquer um desses formatos, ou um nome CSS, e a mostra em todos os outros de uma vez, junto com a mais próxima das 148 cores nomeadas do CSS.

Exemplos

Convertendo e escrevendo a mesma cor em código:

JavaScript

const hex = "#2563eb";
const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
// r = 37, g = 99, b = 235

CSS

color: #2563eb;
color: rgb(37, 99, 235);
color: hsl(221, 83%, 53%);

Python

import colorsys

r, g, b = (int("2563eb"[i:i + 2], 16) for i in (0, 2, 4))
h, l, s = colorsys.rgb_to_hls(r / 255, g / 255, b / 255)

Sass

$brand: #2563eb;
hue($brand)        // 221deg
lightness($brand)  // 53%

Swift

UIColor(red: 37 / 255, green: 99 / 255, blue: 235 / 255, alpha: 1)

Casos de uso

Levar cores entre ferramentas de design e código

Ferramentas de design costumam mostrar HSB ou CMYK, enquanto o CSS pede HEX, RGB ou HSL. Cole o valor que você tem e copie o que precisa.

Ajustar uma cor de marca

Leia um valor HEX como HSL para ver matiz, saturação e luminosidade separadamente, o que deixa óbvio como obter uma variante mais clara ou menos saturada.

Preparar cores para impressão

Obtenha uma decomposição CMYK aproximada de uma cor de tela como ponto de partida antes de ajustá-la no seu fluxo de impressão.

Nomear uma cor em uma folha de estilos

Descubra se uma cor tem nome CSS exato, ou qual cor nomeada é a mais próxima, quando quiser um placeholder legível em um protótipo.

Perguntas frequentes

Quais formatos de entrada são aceitos?

Hex com 3, 4, 6 ou 8 dígitos (com ou sem #), rgb() e rgba(), hsl() e hsla(), hsv() ou hsb(), cmyk(), oklch(), oklab(), lab() e lch(), os 148 nomes de cor CSS mais transparent, e três números soltos como 255 128 0, lidos como RGB. Funcionam tanto a sintaxe com vírgulas quanto a moderna com espaços e barra.

Por que o valor CMYK é apenas aproximado?

A conversão real para impressão depende do papel, das tintas e de um perfil de cor ICC. Esta ferramenta usa a fórmula padrão independente de dispositivo, que serve como referência mas não vai coincidir exatamente com uma prova de impressão.

Qual a diferença entre HSL e HSV?

Os dois usam o mesmo matiz. Em HSL, luminosidade 100% é sempre branco e 50% é a cor pura. Em HSV (também chamado HSB), valor 100% é a versão mais brilhante da cor, e o branco precisa de saturação 0%. Ferramentas como Photoshop e Figma costumam mostrar HSB.

Como funciona o alpha (transparência)?

Se o input tiver alpha, como #2563eb80 ou rgba(37, 99, 235, 0.5), ele é mantido nas saídas HEX, RGB e HSL. HSV e CMYK não têm canal alpha, então mostram a cor opaca.

Meus dados são enviados a algum servidor?

Não. Cada conversão acontece no seu navegador com JavaScript puro. Nada do que você digita é transmitido ou armazenado.

Ferramentas relacionadas

Verificador de Contraste de Cores (WCAG AA / AAA)Gerador de Tonalidades (Tints e Shades)Gerador de Gradiente CSS Gerador de Paleta de Cores (Harmonias)Seletor de Cor de Imagem Simulador de Daltonismo