0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
Configuração
Converter cores entre todos os formatos: HEX, RGB, HSL, HWB, HSV, LAB, LCH, OKLab, OKLCh, XYZ D50/D65, Display P3, A98, ProPhoto, Rec. 2020 e CMYK. Inclui um seletor visual interativo.
#3b82f6
HEX, rgb(), hsl(), oklch(), color(), etc.
Resultados
Básico
#RRGGBB
#RRGGBBAA
rgb(r g b)
CSS nível 3
hsl(h s% l%)
CSS nível 4
hwb(h w% b%)
lab(l a b)
lch(l c h)
oklab(l a b)
oklch(l c h)
color(xyz-d50 x y z)
color(xyz-d65 x y z)
color()
color(display-p3 r g b)
color(a98-rgb r g b)
color(prophoto-rgb r g b)
color(rec2020 r g b)
Outros
hsv(h s% v%)
Impressão
cmyk(c% m% y% k%)

Como funciona

Uma mesma cor pode ser escrita de muitas maneiras. HEX (#RRGGBB) e RGB descrevem a mistura de vermelho, verde e azul; HSL e HSV a descrevem por matiz, saturação e luminosidade, mais intuitivos para escolher variantes; e CMYK visa a impressão.

Esta ferramenta recebe uma cor em HEX, RGB ou HSL e a traduz instantaneamente para todos os formatos, incluindo os espaços modernos do CSS Nível 4 como HWB, LAB, LCH, OKLab, OKLCh e as funções color() (Display P3, Rec. 2020, ProPhoto).

O seletor visual e os controles numéricos permitem ajustar a cor e ver como todos os valores mudam simultaneamente. Tudo é calculado no seu navegador.

Exemplos

#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)O vermelho puro: máximo no canal vermelho, zero em verde e azul.
#3b82f6rgb(59 130 246)Cada par de dígitos hexadecimais (3b, 82, f6) é o valor 0-255 de um canal: 59, 130 e 246.
#ffffffrgb(255 255 255) · hsl(0 0% 100%)O branco tem os três canais no máximo; em HSL, luminosidade 100%.

Casos de uso

  • Passar uma cor de um guia de design em HEX para o formato RGB ou HSL que seu CSS ou framework pede.
  • Obter o equivalente CMYK de uma cor de tela para preparar um material de impressão.
  • Explorar os espaços de cor modernos (OKLCh, Display P3) ao ajustar uma paleta de gama ampla.

Perguntas frequentes

O que é o canal alfa e como é escrito em HEX?

O alfa é a opacidade, de 0 (transparente) a 100%. Em HEX é adicionado como um par de dígitos no final: #RRGGBBAA. Por exemplo, #ff000080 é vermelho a 50% de opacidade.

Qual é a diferença entre HSL e HSV?

Ambos usam matiz e saturação, mas o terceiro eixo difere: HSL usa luminosidade (onde 100% é branco) e HSV usa valor ou brilho (onde 100% é a cor mais intensa). O HSL costuma ser mais cômodo para gerar tons claros e escuros.

Por que OKLab e OKLCh existem?

São espaços perceptualmente uniformes: distâncias iguais entre valores correspondem a diferenças visuais semelhantes. Produzem gradientes e ajustes de luminosidade mais naturais que o HSL, e o CSS os admite desde o Nível 4.

O CMYK que ele mostra serve para imprimir com exatidão?

É uma conversão aproximada de referência. O resultado real de impressão depende do perfil de cor, da tinta e do papel, por isso para trabalhos profissionais convém usar o perfil ICC da gráfica.

Veja também