Conversor de cores: HEX, RGB, HSL e OKLCH

Este conversor recebe uma cor em qualquer formato do CSS, como #3b82f6, rgb(59 130 246), hsl(217 91% 60%), oklch() ou um nome como tomato, e mostra a mesma cor em HEX, RGB, HSL, OKLCH, HWB, HSV e CMYK, pronta para copiar. Ele aceita transparência, tem seletor de cores e diz quando a cor tem nome no CSS.

Atualizado em 1 de outubro de 2026 · Por Leonardo Gaertner

Cor

HEX: #3b82f6
RGB: rgb(59 130 246)
HSL: hsl(217 91% 60%)
OKLCH: oklch(62.3% 0.188 259.8)
HWB: hwb(217 23% 4%)
HSV / HSB (sem sintaxe CSS): 217° 76% 96%
CMYK (aproximado, sem perfil de cor): 76% 47% 0% 4%

Aceita HEX (3, 4, 6 ou 8 dígitos), rgb(), hsl(), hwb(), oklch(), oklab() e os 148 nomes de cor do CSS. A conversão é feita no seu navegador.

Achou um resultado errado ou tem uma sugestão? Avise por e-mail.

Como usar

Digite ou cole a cor em qualquer formato, ou escolha no seletor ao lado.
Confira a amostra e, se houver, o nome CSS da cor.
Copie o formato de que precisa.

Como funciona

HEX e RGB descrevem a mesma coisa: a quantidade de vermelho, verde e azul, de 0 a 255. No HEX, cada canal vira dois dígitos hexadecimais: 59 é 3b, 130 é 82 e 246 é f6, então rgb(59 130 246) é #3b82f6. Com 8 dígitos, os dois últimos são a transparência.

HSL descreve a cor por matiz (o ângulo no círculo de cores), saturação e luminosidade, o que facilita criar variações. O OKLCH faz o mesmo, mas num espaço que acompanha a percepção do olho: dois tons com a mesma luz em OKLCH parecem igualmente claros, o que não acontece no HSL. Ele é aceito por todos os navegadores atuais.

O CMYK mostrado é uma conversão simples, sem perfil de cor. Para impressão, a gráfica usa um perfil (como o FOGRA ou o SWOP), e os valores mudam.

Exemplo

HEX: #3b82f6

RGB: rgb(59 130 246)

HSL: hsl(217 91% 60%)

OKLCH: oklch(62.3% 0.188 259.8)

Fonte: W3C: CSS Color Module Level 4 (formatos e cores com nome); Björn Ottosson: o espaço de cor OKLab

Em código

Para converter HEX em RGB em código, separe o código em pares e leia cada um em base 16. O caminho de volta formata cada canal com dois dígitos hexadecimais.

JavaScript

// "#3b82f6" ou "#38f" para { r, g, b }
function hexParaRgb(hex) {
  let h = hex.replace('#', '');
  if (h.length === 3) h = [...h].map((c) => c + c).join('');
  if (!/^[0-9a-f]{6}$/i.test(h)) throw new Error(`Cor inválida: ${hex}`);
  const n = parseInt(h, 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}

// { r, g, b } para "#3b82f6"
function rgbParaHex({ r, g, b }) {
  return '#' + [r, g, b].map((v) => Math.round(v).toString(16).padStart(2, '0')).join('');
}

console.log(hexParaRgb('#3b82f6')); // { r: 59, g: 130, b: 246 }
console.log(rgbParaHex({ r: 59, g: 130, b: 246 })); // #3b82f6

Python

def hex_para_rgb(cor: str) -> tuple[int, int, int]:
    """"#3b82f6" ou "#38f" para (r, g, b)."""
    h = cor.lstrip("#")
    if len(h) == 3:
        h = "".join(c * 2 for c in h)
    if len(h) != 6:
        raise ValueError(f"Cor inválida: {cor}")
    return int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)


def rgb_para_hex(r: int, g: int, b: int) -> str:
    return f"#{r:02x}{g:02x}{b:02x}"


print(hex_para_rgb("#3b82f6"))  # (59, 130, 246)
print(rgb_para_hex(59, 130, 246))  # #3b82f6

PHP

<?php
// "#3b82f6" ou "#38f" para [r, g, b]
function hexParaRgb(string $cor): array
{
    $h = ltrim($cor, '#');
    if (strlen($h) === 3) {
        $h = $h[0] . $h[0] . $h[1] . $h[1] . $h[2] . $h[2];
    }
    if (!ctype_xdigit($h) || strlen($h) !== 6) {
        throw new InvalidArgumentException("Cor inválida: $cor");
    }
    return array_map('hexdec', str_split($h, 2));
}

function rgbParaHex(int $r, int $g, int $b): string
{
    return sprintf('#%02x%02x%02x', $r, $g, $b);
}

echo implode(', ', hexParaRgb('#3b82f6')), PHP_EOL; // 59, 130, 246
echo rgbParaHex(59, 130, 246), PHP_EOL; // #3b82f6

Perguntas frequentes

Como converter HEX para RGB?

Separe o código em pares e converta cada par de hexadecimal para decimal: em #3b82f6, 3b é 59, 82 é 130 e f6 é 246. A seção Em código, nesta página, mostra a função em JavaScript, Python e PHP.

Qual a diferença entre rgb(59, 130, 246) e rgb(59 130 246)?

Nenhuma no resultado. A forma com vírgulas é a antiga e a com espaços é a atual do CSS, que aceita a transparência depois de uma barra: rgb(59 130 246 / 50%). Os navegadores aceitam as duas, e o conversor também.

Vale a pena usar OKLCH no CSS?

Sim, para criar paletas e variações: mudar só a luz em OKLCH gera tons que parecem da mesma família, sem o efeito de cores "lavadas" do HSL. Todos os navegadores atuais aceitam oklch().

Guias sobre este assunto

Outras ferramentas que podem ajudar

Ver tudo em Front-end e design