O matiz escolhe a família
Percorra vermelho, amarelo, verde, ciano, azul e magenta na roda. Com saturação zero, o matiz quase não aparece.
Ferramenta de cor gratuita
Seletor de cores HSB e conversor HEX RGB
Escolha uma cor com matiz, saturação e brilho ou digite um valor HEX ou RGB exato. Todos os formatos ficam sincronizados para explorar e copiar o código necessário.
Atualizado em 18 de julho de 2026
seletor de cores HSB
O que este seletor de cores HSB faz?
O seletor edita o matiz de 0 a 360 graus e a saturação e o brilho de 0 a 100 por cento. Ele converte a mesma cor visível para HEX de seis dígitos e RGB, mantém todas as entradas sincronizadas e oferece valores prontos para copiar. Use para ajustar uma paleta de desenho, conferir um token de design, entender qual canal mudou um tom ou preparar cores antes da calculadora Delta E do Toon Tone.
HSB · HEX · RGB
Escolha e converta uma cor
Mova um controle, digite um canal, escolha uma predefinição ou escreva um HEX. A prévia e todos os formatos seguem a mesma cor.
Prévia de cor ao vivo#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
Variável CSS
--toon-color: #2FB8D8;Predefinições de cores cartoon
Exemplos editáveis do Toon Tone, não especificações oficiais de franquias.
Leia os três canais HSB
HSB separa a decisão em família, intensidade e nível de luz. Mude um canal por vez para entender por que uma cor parece diferente.
A saturação controla a intensidade
Reduzir aproxima a cor do cinza; aumentar deixa o matiz mais vivo. Não significa simplesmente clarear ou escurecer.
O brilho define o teto de luz
Zero produz preto. Ao subir, matiz e saturação aparecem, embora a claridade percebida também dependa da família e da tela.
Escolha o controle certo para a tarefa
Os formatos descrevem uma cor por ângulos diferentes. Comece pela decisão necessária e use o canal ou a medição que responda à questão.
| Tarefa | Melhor começo | Próxima verificação |
|---|---|---|
| Escolher família vermelha, verde ou azul | Matiz | Saturação e depois brilho |
| Deixar um tom vivo ou suave | Saturação | Manter o matiz estável |
| Clarear ou escurecer | Brilho | Testar contraste no contexto real |
| Copiar um token web ou de design | HEX ou RGB | Registrar fonte e perfil de cor |
| Medir a diferença entre duas cores | Calculadora Delta E | Ver amostras e diferenças HSB |
Como HSB organiza uma decisão de cor
HSB significa matiz, saturação e brilho. O matiz identifica a posição numa roda circular, a saturação descreve a distância de um cinza neutro e o brilho controla o nível máximo dos canais de exibição. Essa separação lembra uma sequência natural de edição: escolher primeiro a família ampla, decidir quanto ela deve parecer intensa e finalmente definir o quanto o tom resultante será claro ou escuro. Os três números descrevem juntos uma cor digital; nenhum deles funciona sozinho como nota de qualidade ou prova de conformidade.
O mesmo modelo também é chamado HSV, no qual valor substitui a palavra brilho. Em ferramentas digitais comuns, HSB e HSV geralmente indicam o mesmo cálculo matemático. HSL é diferente: seu eixo de luminosidade coloca matizes puros no meio e mistura em direção ao branco acima desse ponto. Portanto, uma porcentagem HSL não deve ser colada em HSB como se fosse idêntica. Esta página mostra cada canal junto com HEX e RGB para facilitar a identificação de termos, escalas ou arredondamentos diferentes entre aplicativos.
Uma sequência confiável de matiz, saturação e brilho
Comece pelo matiz enquanto saturação e brilho estiverem altos o bastante para mostrar claramente a família. Vá até a região vermelha, laranja, amarela, verde, ciano, azul ou roxa antes de perseguir pequenas diferenças numéricas. Depois reduza a saturação até atingir a suavidade desejada. Muitas cores de desenho lembradas são menos saturadas do que o nome sugere, especialmente quando sombras, compressão e cores vizinhas alteram a impressão. Ajuste o brilho por último para não confundir uma versão escura do matiz correto com outra família de cor.
Em um trabalho preciso, altere um canal por vez e anote o valor anterior. Um grande movimento simultâneo pode gerar um resultado bonito e esconder qual correção resolveu o problema. Os campos HEX e RGB sincronizados oferecem um valor estável para entrega depois da exploração visual. Se já houver um token aprovado, digite-o diretamente em vez de tentar recriá-lo com controles. O seletor liga a exploração a um valor exato; ele não deve substituir uma fonte conhecida por uma nova aproximação.
O que acontece na conversão HEX, RGB e HSB
HEX e RGB codificam quantidades de vermelho, verde e azul para uma tela digital. Um HEX de seis dígitos reserva dois algarismos hexadecimais a cada canal, enquanto RGB normalmente apresenta os mesmos canais como números decimais de 0 a 255. O seletor converte esses valores para HSB, edita as coordenadas e transforma o resultado novamente numa cor RGB exibível. Um HEX curto de três dígitos é expandido antes do cálculo. Pequenas diferenças de ida e volta podem aparecer quando porcentagens contínuas são arredondadas aos inteiros mostrados na interface.
A conversão não descobre um nome oficial, uma especificação de marca, uma fórmula de tinta ou uma amostra física. Ela também não calibra a tela, deduz o perfil incorporado de uma imagem nem garante a mesma aparência em outro aparelho. Guarde o token original quando a reprodução exata for importante e registre se o valor veio de um sistema de design, arquivo fonte ou captura. Uma imagem comprimida pode já conter pixels alterados: o cálculo pode estar correto para a entrada sem que a entrada seja a cor autorizada que você pretendia capturar.
Uso do seletor em paletas cartoon e ilustração
Desenhos animados costumam usar famílias claras, mas a identidade memorável de um tom depende de mais que uma etiqueta. Um amarelo pode tender ao verde ou laranja, um azul pode ser pálido ou intensamente saturado e um vermelho pode se aproximar de coral, laranja ou magenta. Use HSB para montar uma pequena família relacionada sem perder o matiz inicial. Copie o HEX para suas anotações e altere saturação ou brilho deliberadamente para criar luzes, sombras, destaques de interface ou amostras fáceis de comparar.
As predefinições desta página são exemplos genéricos do Toon Tone. Servem para aprender os controles, não como códigos oficiais de estúdio, personagem, franquia, gráfica ou produto. Quando o projeto tiver uma paleta aprovada, siga essa fonte. Ao estudar uma imagem, mantenha visíveis a área amostrada e as condições de visualização. Um pequeno detalhe, um quadro sombreado e uma grande superfície plana podem gerar cores representativas distintas, ainda que as pessoas usem a mesma palavra cotidiana para descrevê-las.
Telas, contraste e diferença perceptiva
A prévia é gerada pelo navegador; sua aparência depende de calibração, brilho da tela, gerenciamento de cor, ângulo de visão, luz ambiente e cores vizinhas. O brilho HSB não mede claridade percebida nem é uma relação de contraste acessível. Um amarelo e um azul com brilho HSB em cem por cento podem parecer muito diferentes. Teste texto, ícones, indicadores de foco e controles com o método de contraste adequado usando a combinação real de primeiro plano e fundo.
Para comparar duas cores salvas, use a calculadora Delta E como medição separada e leia o número com as amostras visíveis. Delta E modela a diferença perceptiva geral; os canais HSB oferecem direções intuitivas de edição. Nenhum resultado cria sozinho um limite universal para marca, acessibilidade, impressão ou fabricação. A decisão final deve seguir a especificação relevante, um processo calibrado e as condições reais de saída, não um único valor conveniente de uma ferramenta geral do navegador.
Continue trabalhando com esta cor
Perguntas sobre o seletor de cores HSB
HSB e HSV são iguais?
Normalmente indicam o mesmo modelo digital. HSB chama o terceiro canal de brilho e HSV o chama de valor. Confira os intervalos documentados antes de transferir números.
HSB é igual a HSL?
Não. Ambos usam matiz e saturação, mas HSL calcula luminosidade de outra forma. As mesmas porcentagens podem produzir cores diferentes perto de branco e preto.
Posso converter HEX de três dígitos?
Sim. Uma forma como #0af é expandida para #00AAFF antes da conversão. Seis dígitos funcionam com ou sem o sinal # inicial.
A ferramenta envia ou salva minha cor?
Não exige conta nem envio ao servidor. O seletor roda no navegador e os botões copiam apenas o texto exibido quando a área de transferência está disponível.
O brilho HSB comprova contraste acessível?
Não. O contraste acessível compara luminância relativa entre primeiro plano e fundo. O brilho HSB sozinho não é um cálculo WCAG.
Por que outro seletor mostra números um pouco diferentes?
Pode arredondar de outra forma, usar HSL, aplicar gerenciamento de cor ou exibir mais casas decimais. Compare o HEX ou RGB final e o modelo documentado.