Um espaço de cor perceptualmente uniforme — distâncias numéricas iguais parecem distâncias visuais iguais. O CSS moderno suporta nativamente e ferramentas como Figma 2024+ estão adotando para gradientes mais suaves e melhor contraste.

Por que duas linhas RGB?

O CSS moderno usa espaços 'rgb(59 130 246)'; o legado e navegadores antigos esperam vírgulas 'rgb(59, 130, 246)'. Produzem a mesma cor.

E a transparência (RGBA/HSLA)?

Esta ferramenta foca cores opacas. Para transparência, adicione '/ 0.5' na sintaxe moderna (ex: 'rgb(59 130 246 / 0.5)') ou use a clássica 'rgba(…, 0.5)'.

HSV é o mesmo que HSB?

Sim — HSV (Value) e HSB (Brightness) são dois nomes para o mesmo modelo. CSS não aceita hsv() diretamente; use HSL nas folhas de estilo.

Conversor de Formatos de Cor

Escolha uma cor com o seletor nativo ou cole um HEX e veja na hora em todos os formatos CSS comuns — HEX, RGB moderno separado por espaços, RGB clássico com vírgulas, HSL, HSV, OKLCH (o espaço perceptualmente uniforme preferido pelo CSS moderno) e uma variável CSS pronta para colar. Cada valor com seu próprio botão de copiar.

—

SeletorHEX

Pré-visualização

HEX#3B82F6
RGBrgb(59 130 246)
RGB (legacy)rgb(59, 130, 246)
HSLhsl(217 91% 60%)
HSVhsv(217, 76%, 96%)
OKLCHoklch(62.3% 0.188 259.8)
Variável CSS--color: #3B82F6;

Como usar

Use o seletor ou cole um HEX (3 ou 6 dígitos, # opcional).
Todos os formatos atualizam instantaneamente.
Copie o formato que precisar com o botão à direita.

Perguntas frequentes

O que é OKLCH?: Um espaço de cor perceptualmente uniforme — distâncias numéricas iguais parecem distâncias visuais iguais. O CSS moderno suporta nativamente e ferramentas como Figma 2024+ estão adotando para gradientes mais suaves e melhor contraste.
Por que duas linhas RGB?: O CSS moderno usa espaços 'rgb(59 130 246)'; o legado e navegadores antigos esperam vírgulas 'rgb(59, 130, 246)'. Produzem a mesma cor.
E a transparência (RGBA/HSLA)?: Esta ferramenta foca cores opacas. Para transparência, adicione '/ 0.5' na sintaxe moderna (ex: 'rgb(59 130 246 / 0.5)') ou use a clássica 'rgba(…, 0.5)'.
HSV é o mesmo que HSB?: Sim — HSV (Value) e HSB (Brightness) são dois nomes para o mesmo modelo. CSS não aceita hsv() diretamente; use HSL nas folhas de estilo.

Guias sobre este tema

Contraste de cor e paletas acessíveis O que as razões de contraste da WCAG realmente medem, por que uma cor que parece boa ainda pode reprovar, como o daltonismo muda o quadro e como montar uma paleta que se sustenta.

Ferramentas relacionadas

Seletor de Cor HSL

Arraste sliders de matiz, saturação, luminosidade e alpha pra escolher cor — copie HEX, RGB, HSL ou valor arbitrário Tailwind.

Cor 0 0

Gerador de Cores Aleatórias

Gere uma grade de cores aleatórias em HEX, RGB ou HSL — escolha quantas, copie qualquer valor com um clique e regenere na hora para se inspirar.

Aleatório 0 0

Seletor de Cor OKLCH

Escolha cores no espaço OKLCH perceptualmente uniforme (luminosidade · croma · matiz) — e veja se cada escolha cabe dentro do gamut de tela sRGB.

Cor 0 0

Pré-visualização de CSS color-mix()

Compare como a função moderna CSS color-mix() mistura duas cores em diferentes espaços de interpolação (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — amostras ao vivo, hex computado, faixa de gradiente completa por espaço e CSS copiável.

Cor 0 0

Conversor de comprimento de onda para cor (nm → sRGB)

Converte um comprimento de onda em nanômetros (380–780 nm — o espectro visível) em uma cor sRGB aproximada, com barra de gradiente arco-íris clicável e linhas de absorção de Fraunhofer do espectro solar real como referência.

Cor 0 0

Conversor de cor CMYK ↔ RGB (espaço de cor de impressão)

Converte entre cores RGB/hex de tela e porcentagens CMYK para impressão, com estratégias de geração de preto Simples, GCR (Substituição de componente cinza) e UCR (Remoção de cor sob), pré-visualização de separação de canais e leitura de cobertura total de tinta.

Cor 0 0