Gerador de cores aleatórias
Cores e códigos aleatórios para design e código.
Clique em um código para copiá-lo. Clique no cadeado para manter uma cor quando gerar de novo.
- Códigos HEX, RGB ou HSL
- Paletas pastel e escura
- Trave cores, sorteie o resto
Como gerar cores aleatórias
- Defina quantas cores e escolha um formato de código.
- Escolha uma paleta aleatória, pastel ou escura.
- Clique em uma amostra para copiar o código, ou trave antes de gerar mais.
HEX, RGB e HSL comparados
Os três formatos descrevem exatamente a mesma cor. Qual você precisa depende de onde vai colar.
| Formato | Aparência | Melhor para |
|---|---|---|
| HEX | #3B82F6 | CSS, ferramentas de design, compartilhamento rápido |
| RGB | rgb(59, 130, 246) | CSS, código que mistura ou funde cores |
| HSL | hsl(217, 91%, 60%) | Ajustar uma cor na mão: matiz, depois quanto vibrante, depois quanto clara |
HSL costuma ser o mais fácil de ajustar você mesmo, já que deslizar o número de luminosidade mais claro ou mais escuro mantém a mesma matiz, algo que HEX e RGB dificultam a olho.
Aleatória, pastel e escura, em números
Cada modo escolhe uma fatia diferente da roda de cores em vez de só mudar a matiz.
| Modo | Intervalo de saturação | Intervalo de luminosidade |
|---|---|---|
| Aleatória | 40 a 100% | 25 a 75% |
| Pastel | 35 a 60% | 75 a 88% |
| Escura | 35 a 70% | 12 a 28% |
A matiz é sempre escolhida do intervalo completo de 0 a 359 em todo modo, então pastel e escura ainda cobrem toda família de cor, só mais clara ou mais escura.
Para que as pessoas usam cores aleatórias
- Inspiração rápida de design quando você está travado escolhendo uma cor de marca ou tema.
- Cores provisórias para wireframes, gráficos e mockups de UI antes de escolher uma paleta de verdade.
- Gerar fundos de avatar, tags ou cores de categoria em um app.
- Projetos de arte e artesanato, como um prompt de cor aleatória para um desenho diário.
Perguntas frequentes sobre Gerador de cores aleatórias
Qual é a diferença entre as paletas?
Aleatória cobre toda a roda de cores. Pastel mantém a saturação e a luminosidade suaves para fundos delicados. Escura mantém as cores com luminosidade baixa para temas escuros e texto de contraste.
Como eu mantenho uma cor que gostei?
Clique no ícone de cadeado em uma amostra. Amostras travadas mantêm a cor na próxima vez que você gerar, então você pode sortear só o resto.
Qual é a diferença entre HEX, RGB e HSL?
HEX e RGB descrevem uma cor pelas quantidades de vermelho, verde e azul. HSL descreve pela matiz, saturação e luminosidade, muitas vezes mais fácil de ajustar na mão.
Como eu copio um código de cor?
Clique no texto do código abaixo de qualquer amostra e ele é copiado para sua área de transferência na hora.
Quais intervalos as paletas realmente usam?
Aleatória escolhe qualquer matiz com saturação de 40 a 100 por cento e luminosidade de 25 a 75 por cento. Pastel estreita a luminosidade para 75 a 88 por cento. Escura estreita a luminosidade para 12 a 28 por cento, com saturação de 35 a 70 por cento para as cores continuarem ricas em vez de sujas.
Duas cores aleatórias vão combinar bem juntas?
Às vezes. Esta ferramenta escolhe cores de forma independente para variedade e inspiração, ela não monta uma paleta combinada. Para cores garantidas de combinar, gere várias, trave as que você gostar, e sorteie o resto até o conjunto ficar bom.
Posso gerar só uma cor em vez de um conjunto?
Sim, defina a quantidade para 1 e clique em Gerar para uma única cor aleatória no formato escolhido.
Onde posso usar um código HEX ou RGB depois de ter um?
Cole um código HEX direto no CSS, Figma, Photoshop ou quase qualquer ferramenta de design. Valores RGB e HSL funcionam do mesmo jeito em funções CSS como rgb() e hsl().