# 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.

- Endereço oficial: https://pradev.com.br/conversor-de-cores
- Categoria: Front-end e design
- Tipo: Conversor
- Atualizado em: 2026-10-01
- Autor: Leonardo Gaertner (https://pradev.com.br/sobre)
- Preço: grátis, sem cadastro. O processamento acontece no navegador de quem usa.

## Como usar

1. Digite ou cole a cor em qualquer formato, ou escolha no seletor ao lado.
2. Confira a amostra e, se houver, o nome CSS da cor.
3. 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

```text
HEX: #3b82f6
RGB: rgb(59 130 246)
HSL: hsl(217 91% 60%)
OKLCH: oklch(62.3% 0.188 259.8)
```

## 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
```

_JavaScript_

```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
```

_Python_

```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
```

_PHP_

## 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().

## Fontes

- [W3C: CSS Color Module Level 4 (formatos e cores com nome)](https://www.w3.org/TR/css-color-4/)
- [Björn Ottosson: o espaço de cor OKLab](https://bottosson.github.io/posts/oklab/)

## Guias

- [Contraste de cores e acessibilidade: o que a WCAG exige](https://pradev.com.br/guias/contraste-de-cores-wcag-acessibilidade): O que a WCAG exige de contraste entre texto e fundo (4,5:1 no AA), como a razão é calculada e como corrigir cores que não passam, com código.
- [OKLCH no CSS: cores e paletas que fazem sentido](https://pradev.com.br/guias/oklch-no-css-cores-e-paletas): O que é OKLCH, por que ele gera paletas mais equilibradas que HSL e como usar oklch() no CSS, com a conversão de HEX em JavaScript e Python.

## Ferramentas relacionadas

- [Verificador de Contraste](https://pradev.com.br/verificador-de-contraste): Confira o contraste entre a cor do texto e a do fundo pela WCAG 2.2: razão, níveis AA e AAA e sugestões de cor que passam. Grátis.
- [Gerador de Paleta a partir de HEX](https://pradev.com.br/gerador-de-paleta-a-partir-de-hex): Gere uma escala de tons de 50 a 950 e combinações (complementar, análogas, tríade) a partir de uma cor. Exporta para CSS e Tailwind.
- [Tabela de Cores HTML](https://pradev.com.br/tabela-de-cores-html): As 148 cores com nome do HTML e do CSS, com HEX, RGB e nome em português. Busque, ordene por tom ou luz e copie com um clique.
- [Conversor px para rem](https://pradev.com.br/conversor-px-rem): Converta px em rem, em, pt e % e o contrário, com a base de 16px ou outra. Tabela com os tamanhos mais usados. Grátis, no navegador.
- [Gerador de Lorem Ipsum](https://pradev.com.br/gerador-de-lorem-ipsum): Gere texto Lorem Ipsum por parágrafos, frases ou palavras, com ou sem tags <p>, para preencher layouts e protótipos. Grátis e sem cadastro.
- [Qual é a Tecla](https://pradev.com.br/qual-e-a-tecla): Aperte uma tecla e veja event.key, event.code, keyCode e os modificadores do JavaScript. Útil para atalhos de teclado e jogos.