Como gerar cores aleatórias em hexadecimal, RGB ou HSL

Escolha uma representação para o seu trabalho

Este gerador cria valores de cor aleatórios em texto, adequados para explorar opções visuais, preparar um protótipo ou obter uma base para uma paleta. Pode solicitar uma única cor ou várias e escolher uma representação hexadecimal, RGB ou HSL, consoante o local onde irá utilizar o resultado. Quando não define a quantidade, o ponto de partida é uma cor.

A geração baseia-se em três componentes de cor: vermelho, verde e azul. Cada componente é escolhido de forma independente dentro do intervalo de 0 a 255, pelo que os valores apresentados podem assumir combinações diferentes entre execuções. O resultado deve ser lido como uma proposta de cor para análise ou utilização posterior, não como uma paleta com propriedades asseguradas.

Passos para gerar e verificar as cores

1. Comece por indicar quantas cores pretende receber. Um campo vazio usa a quantidade 1, enquanto um número como 3 permite preparar três valores para comparação. A quantidade pedida serve para controlar o número de linhas ou valores devolvidos pelo gerador.

2. Verifique o valor introduzido antes de gerar. Quando a conversão para inteiro é possível, o número é ajustado para ficar entre 1 e 50. Um valor abaixo de 1 passa para 1 e um valor acima de 50 passa para 50. Se ocorrer um erro de valor ou de tipo durante a conversão, é utilizada a quantidade 1; não é possível aplicar esta explicação a outras falhas de conversão.

3. Selecione a representação que corresponde ao seu destino. O formato hexadecimal é usado por predefinição. Para pedir RGB ou HSL, utilize os valores de opção rgb ou hsl; para a opção hexadecimal, utilize hex. Um valor diferente dessas opções não cria uma representação com o nome introduzido e resulta em texto hexadecimal.

4. Inicie a geração e examine a quantidade de valores devolvidos. Se precisar de comparar alternativas, pode repetir a consulta ou tratar os valores apresentados no seu editor, folha de estilos ou ferramenta de design. A quantidade efetivamente normalizada, e não apenas o número inicialmente escrito, determina quantas cores aparecem no resultado.

5. Confirme a notação antes de aplicar os valores. No hexadecimal, procure o cardinal inicial e seis algarismos hexadecimais minúsculos. No RGB, espere três componentes inteiros separados por vírgulas dentro de rgb(...). No HSL, procure valores inteiros para matiz, saturação e luminosidade, com percentagens na saturação e na luminosidade.

Leia a quantidade e a estrutura do resultado

A quantidade final informa quantos valores deve ler, porque o gerador usa o número normalizado para controlar a saída. Por exemplo, um pedido de 3 corresponde a três valores, ao passo que uma entrada superior a 50 fica representada por 50 resultados e uma entrada inferior a 1 por um resultado.

Um valor hexadecimal segue a estrutura # mais seis algarismos hexadecimais minúsculos; a estrutura não permite identificar antecipadamente qual será a cor gerada. Uma saída RGB aparece como rgb(r, g, b), com cada componente entre 0 e 255. Na saída HSL, a matiz, a saturação e a luminosidade são números inteiros, sendo que os dois últimos incluem o símbolo de percentagem.

A presença de uma forma válida não significa que as cores de diferentes gerações sejam únicas, reproduzíveis ou distribuídas uniformemente. Se o texto não corresponder à notação escolhida, reveja primeiro a opção de formato e depois confirme se está a interpretar a estrutura correta.

Exemplo prático

Uma pessoa está a preparar três opções de cor para comparar num protótipo de uma página.

Introduza 3 como quantidade, escolha hex e inicie a geração; depois, compare os três valores devolvidos no protótipo.

A saída deverá conter três valores; em hexadecimal, cada um terá # seguido de seis algarismos hexadecimais minúsculos.

Limitações

• Os componentes vermelho, verde e azul são escolhidos independentemente entre 0 e 255, sem base suficiente para assegurar que gerações repetidas sejam únicas, reproduzíveis ou uniformemente distribuídas.

Erros comuns

• Escrever um nome de formato fora das opções suportadas conduz a texto hexadecimal, mesmo que o nome sugira outra representação. Substitua esse valor por hex, rgb ou hsl, conforme o formato que pretende analisar.

Perguntas frequentes

Quantas cores posso pedir numa geração?

A quantidade começa em 1 quando o campo fica vazio. Depois de convertida para inteiro, é ajustada ao intervalo de 1 a 50, e erros de valor ou de tipo nessa conversão fazem regressar à quantidade 1.

Que formato é usado se eu não escolher outro?

O formato inicial é o hexadecimal. A opção rgb produz a estrutura RGB e hsl produz a estrutura HSL; uma opção diferente conduz à saída hexadecimal.

Como distingo uma saída RGB de uma saída HSL?

RGB apresenta três números inteiros entre 0 e 255 dentro de rgb(r, g, b). HSL apresenta números inteiros de matiz, saturação e luminosidade, colocando percentagens nos dois últimos valores.