Ir para o conteúdo

Roleta de cores

Toque na roda e ela para numa cor. O nome sai escrito abaixo do desenho — não só na tinta —, o acaso vem do gerador criptográfico do seu navegador e a lista de cores é sua para editar.

Toque para girar

Uma cor por linha. Tire as que não valem e acrescente as suas — nome conhecido sai pintado do que é, e a caixa e o acento não importam.

Rodadas desta sessão

Rodada 1 ainda não girou
Rodada 2 ainda não girou
Rodada 3 ainda não girou

O link leva a lista, não o resultado — quem abrir gira a própria roda.

Sorteio feito dentro do seu navegador, com crypto.getRandomValues. Nada é enviado, gravado ou guardado.

Como melhorar esta calculadora?

Faltou uma verba, o número saiu diferente ou alguma palavra ficou confusa? Escreva.

Escrever uma sugestão →

Abre seu programa de e-mail com o assunto e a página já preenchidos, e com as perguntas que ajudam a entender o caso. Sem formulário, sem cadastro, sem cookie.

publicidade

336×280 · in-content

De onde vem o acaso desta roda

Quase toda roleta de cores da internet chama Math.random(). Ele é rápido e resolve bem a pergunta "quem começa jogando" — mas é pseudoaleatório: parte de um estado interno e produz uma sequência que, conhecido esse estado, é inteiramente previsível. A especificação da linguagem nem exige que ele seja imprevisível.

Esta página usa crypto.getRandomValues(), que vem do gerador do próprio sistema operacional — o mesmo que produz chaves criptográficas, alimentado pelo ruído físico que a máquina coleta. Não há semente, não há relógio, não há contador.

Doze não divide 2³², e é aí que a roda torta aparece

O gerador entrega um número inteiro entre 0 e 4.294.967.295 (são 232 valores). Para virar uma posição da sua lista, o caminho óbvio é tirar o resto da divisão — e o caminho óbvio está errado sempre que o tamanho da lista não divide 232. Doze cores é exatamente esse caso: sobra uma cauda incompleta, e as primeiras cores da lista passam a sair um pouquinho mais que as últimas. É o viés de módulo, e ele não é visível a olho nu em vinte giros.

Numa brincadeira de tarde de domingo o desvio não muda nada. Numa roda que decide a cor de um time toda semana, ou que sorteia entre pessoas disfarçado de cor, ele é a diferença entre o sorteio ser justo e não ser. O motor deste site descarta a cauda incompleta em vez de dobrá-la, e é o mesmo motor do Sorteador de nomes, do Sorteador de números e do Cara ou coroa — a garantia não pode depender de o autor de cada página ter percebido que o caso dele era o difícil.

Por que a cor é sorteada antes de a roda girar

A roda gira depois, e não antes: o resultado já existe quando a animação começa, e a animação é calculada para parar em cima dele. O caminho intuitivo seria o contrário — empurrar a roda com uma força aleatória, deixar o atrito frear e ler onde o ponteiro parou. Ele é bonito e é ruim, por duas razões independentes.

  • A uniformidade morreria no último passo. A cor sorteada passaria a ter a distribuição da curva de desaceleração sobre um ângulo em ponto flutuante, que ninguém consegue provar uniforme — jogando fora, no fim, todo o cuidado com o viés de módulo.
  • O resultado ficaria refém do relógio de quadros. Aba em segundo plano, quadro perdido e a preferência de "reduzir animações" do sistema mudariam quem ganha. Do jeito que a página é, eles mudam só quanto tempo a roda gira: com animação reduzida ela salta para a posição final, e a cor é a mesma que seria.

Um detalhe que sai de graça dessa escolha: a roda nunca para em cima do traço que separa dois setores. O ponto de parada é sorteado dentro da faixa central da fatia, com margem nas duas bordas — porque parar na divisa é a única forma de o desenho contradizer o texto, e numa página em que o resultado é uma cor isso seria a pior falha possível.

Por que o nome da cor aparece escrito

Uma roleta de cores tem uma armadilha que uma roleta de nomes não tem: é tentador deixar o resultado ser a cor. Um retângulo grande da cor sorteada é bonito, e é uma resposta que uma parte das pessoas não recebe. Cerca de 8% dos homens e 0,5% das mulheres têm alguma alteração na visão de cores — a mais comum confunde exatamente vermelho e verde, que é o par que qualquer roda de cores tem —, e quem usa leitor de tela não recebe nada: <canvas> é um desenho, não texto.

Por isso, aqui, a cor sorteada é sempre uma palavra. Ela aparece em texto grande fora do desenho, entra em texto no histórico das rodadas, sai em texto no comprovante que o botão de copiar leva, e está escrita dentro do próprio setor — com tinta escura sobre o amarelo e o branco, clara sobre o roxo e o vinho, escolhida cor a cor para que o nome se leia por cima de qualquer uma delas. A roda é marcada como decorativa para o leitor de tela, e não é abandono: é o contrário disso, porque tudo o que ela mostra já existe escrito na página, e anunciar o desenho por cima leria a mesma coisa duas vezes.

A regra que isso ilustra é maior que esta página, e é a mesma que todo formulário do site segue: nenhuma informação pode depender só de cor para ser entendida. Se você usar a roda numa brincadeira com crianças, vale o mesmo — quem responde "amarelo" com o nome, e não apontando, joga em igualdade com quem enxerga todas as cores.

Time, fantasia, peça de jogo: outras listas de cor

A roda que vem montada tem as doze cores que qualquer pessoa nomeia sem pensar, e ela quase nunca é a lista certa para o seu caso — a lista certa é a sua. Trocar leva um segundo no campo abaixo da roda, e é o uso normal desta página:

  • Cor de time, de camisa, de colete. Escreva só as que existem no armário: azul, vermelho e amarelo numa roda de três dá um terço para cada, o que é mais honesto que sortear entre doze e refazer quando sai uma cor que ninguém tem.
  • Peça de jogo de tabuleiro. Quem escolhe a peça primeiro leva vantagem em muita casa. Uma roda com as cores do jogo resolve a discussão antes de ela começar — e o histórico das três últimas rodadas mostra que a mesma cor não saiu duas vezes.
  • Fantasia, roupa do dia, cor da unha. Aqui a graça é justamente não decidir: a roda tira de você a escolha que estava travando, e o resultado é uma palavra que dá para repetir para outra pessoa.
  • Paleta e desenho. Para escolher uma cor de partida, o código de cada setor está listado logo abaixo — é o hexadecimal exato que a roda pintou, então o que saiu na tela é o que vai para o seu arquivo.

Duas coisas que a lista faz e que não são óbvias. Repetir uma cor dá peso a ela: escrever "Azul" três vezes numa lista de seis dá metade da roda ao azul, que é a única forma de dizer "prefiro azul, mas aceito sorteio". E nome desconhecido não quebra nada: quem escrever "roxo-bebê" ganha um setor com uma cor neutra no lugar dele, com o nome escrito por cima — a roda perde a tinta certa, nunca o item. Se o que você quer sortear não é cor, o caminho é o Sorteador de nomes ou os outros geradores do site; para as contas do dia a dia, as calculadoras de utilidades.

As doze cores da roda, e o código de cada uma

Vermelho #c62828
Laranja #f57c00
Amarelo #ffd600
Verde #2e7d32
Turquesa #0097a7
Azul #1565c0
Roxo #6a1b9a
Rosa #f06292
Marrom #6d4c41
Cinza #616161
Preto #101010
Branco #ffffff

Perguntas frequentes

Como sortear uma cor?

Toque na roda — ela gira por quatro segundos e para numa cor. O nome sai escrito logo abaixo do desenho, com a hora da rodada ao lado, e as três últimas rodadas ficam listadas na sequência. Não é preciso cadastro, login nem instalar nada: a roda já vem montada com doze cores e gira no primeiro toque. Pelo teclado o caminho é o mesmo — Tab até a roda, espaço ou Enter para girar.

Quais cores vêm na roda?

Doze: Vermelho, Laranja, Amarelo, Verde, Turquesa, Azul, Roxo, Rosa, Marrom, Cinza, Preto e Branco. São as cores que uma pessoa nomeia sem pensar, que é o que a roda precisa — sortear um tom que ninguém sabe chamar pelo nome não decide nada. A lista é editável, então tirar as que não valem para o seu caso leva um segundo, e é o uso normal desta página.

Dá para trocar as cores da roda?

Dá, e é para isso que o campo abaixo da roda existe: apague, acrescente, escreva uma cor por linha. A roda conhece mais nomes do que os doze que mostra — vinho, bege, lilás, azul-claro, verde-claro e dourado também saem pintados do que são, com ou sem acento, com ou sem maiúscula. Nome que ela não conhece continua ganhando um setor, só que numa cor neutra: escrever "roxo-bebê" dá um setor a mais, nunca um buraco na roda.

O sorteio é mesmo aleatório?

É, e vale saber por quê. A cor sai do gerador criptográfico do próprio navegador (crypto.getRandomValues), alimentado pelo ruído que o sistema operacional coleta — não há semente, não há relógio e não há contador. A conta que transforma esse número numa posição da lista descarta a sobra que criaria viés, em vez de tirar o resto da divisão: doze não divide 2³², e o atalho do resto faria as primeiras cores saírem um tiquinho mais que as últimas.

Quem não distingue cores consegue usar a página?

Consegue, e essa foi a primeira decisão do projeto: o resultado nunca é só a cor. O nome sorteado aparece em texto grande fora do desenho, o histórico das rodadas é texto, o comprovante copiado é texto, e o desenho da roda é marcado como decorativo para o leitor de tela justamente porque tudo que ele mostra já existe escrito. Dentro de cada setor o nome também está escrito, com a tinta clara ou escura conforme a cor, para se ler por cima dela.

A página guarda as minhas rodadas?

Não guarda nada, em lugar nenhum: sem servidor, sem cookie, sem armazenamento no aparelho. O histórico vive na memória da aba e some quando você recarrega a página — é por isso que existe o botão de copiar as rodadas, que leva a sessão inteira com a hora e a lista de cada uma. O botão de copiar o link também respeita isso: a lista viaja depois do # do endereço, e o que vem depois do # não é enviado ao servidor nem entra em log de acesso.