Seletor e conversor de cores hexadecimais (RGB, HSL, HSV)

Converta hexadecimal em RGB, HSL e HSV, copie amostras de harmonia e exporte CSS ou JSON diretamente no seu navegador.

JavaScript é necessário para recursos interativos. Ative o JavaScript no seu navegador para usar esta ferramenta.

Cor hexadecimal

Digite #RGB ou #RRGGBB (com ou sem #). Valores inválidos mantêm a última conversão válida.

Conversões

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

Amostras de harmonia

Tipo de harmonia

Contagem de amostras

Faixa de tonalidade/sombra

Etapas de matiz/sombra

Exportar amostras

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7
}

Escolha ou cole uma cor hexadecimal, converta para RGB, HSL e HSV, gere amostras complementares/análogas/triádicas/monocromáticas, copie valores e exporte CSS ou JSON. Gratuito, rápido e roda inteiramente no seu navegador.

Como usar este seletor de cores hexadecimais

Digite ou cole um valor hexadecimal ou use o seletor nativo. A página converte para RGB, HSL e HSV instantaneamente, gera amostras de harmonia e uma faixa de tonalidade/sombra e mantém tudo pronto para cópia. Compartilhe sua configuração com o URL – o estado é armazenado na string de consulta.

Referência hexadecimal, RGB, HSL e HSV

Hex é uma codificação RGB compacta. RGB descreve canais vermelho/verde/azul. HSL expressa matiz, saturação e luminosidade; HSV usa matiz, saturação e valor (brilho). Esta ferramenta usa matemática determinística em seu navegador – sem uploads e sem APIs externas.

Complementar, análogo, triádico e monocromático

Complementar gira matiz 180°. Etapas análogas são matizadas por um ângulo fixo em torno de sua base. Triádico usa deslocamentos de 120°. Monocromático mantém matiz e varia luminosidade. Os controles de contagem aplicam-se aos modos análogo e monocromático.

Variáveis CSS e exportação JSON

A exportação produz propriedades personalizadas :root com nomes estáveis (por exemplo --color-base, --color-analogous-1) e JSON com baseHex, modo de harmonia e listas de amostras para scripts ou tokens de design.

Perguntas frequentes

#ABC se expande para seis dígitos?

Sim. O hexadecimal de três dígitos é expandido por par de dígitos, então #ABC se torna #AABBCC.

O que acontece se meu hexadecimal for inválido?

Você vê um erro embutido. A última cor válida permanece nas linhas de conversão, no seletor e nas exportações até que você insira um hexadecimal válido novamente.

Como as cores da harmonia são calculadas?

Eles são determinísticos: complementar é uma mudança de matiz de 180° no HSL; análogo usa etapas de matiz fixas; triádico usa deslocamentos de 120°; monocromático varia a luminosidade, mantendo o matiz e a saturação da base.

O que há na exportação JSON?

Chaves estáveis: baseHex, Harmony, HarmonCount quando aplicável, HarmonySwatches (strings hexadecimais), tintShadeStrip e stripCount — adequadas para ferramentas ou documentação.

Posso compartilhar minhas cores?

Sim. O URL é atualizado com hexadecimal, modo de harmonia, contagens e tamanho de faixa para que você possa marcar ou compartilhar uma configuração exata.