Misturador de cores
Insira duas cores HEX, escolha quantas etapas deseja e o misturador mostra a cor inicial, a cor final e as cores distribuídas de forma uniforme entre elas. É útil para rampas rápidas de interface, planejamento de gradientes, estados de ícones e conferência dos códigos HEX exatos antes de levar para CSS ou para uma ferramenta de design.
Como a mistura HEX é calculada
-
1
Insira duas cores HEX
Use HEX de 3 ou 6 dígitos, com ou sem #. Exemplos: #FF6B35, #1E3A8A, F60.
-
2
Escolha 2-20 etapas
A primeira amostra é a primeira cor e a última é a segunda; as amostras do meio são calculadas entre elas.
-
3
Interpole os canais RGB
A ferramenta converte HEX para canais vermelho, verde e azul, interpola cada canal linearmente e arredonda para o inteiro mais próximo.
-
4
Leia as etapas HEX
Cada amostra aparece com um código HEX de 6 dígitos em maiúsculas que você pode selecionar e reutilizar no design ou na folha de estilos.
O que esta ferramenta faz
O misturador trabalha apenas com a notação de cor HEX padrão. Ele aceita HEX curto, como #F60, e HEX completo, como #FF6B35, normaliza os valores internamente e mostra cada resultado como código HEX de 6 dígitos em maiúsculas.
A mistura é uma interpolação linear simples nos canais RGB/sRGB:
- Converter cada cor HEX em valores
R,GeBde 0 a 255. - Para cada etapa, calcular
tde0a1. - Para cada canal, usar
início + (fim - início) * t. - Arredondar cada canal para o inteiro mais próximo e converter o resultado de volta para HEX.
Como os extremos estão incluídos, 2 etapas significa “apenas início e fim”. Com 7 etapas de #FF6B35 até #1E3A8A, o resultado é:
| Etapa | Posição | HEX |
|---|---|---|
| 1 | 0% | #FF6B35 |
| 2 | 16,67% | #DA6343 |
| 3 | 33,33% | #B45B51 |
| 4 | 50% | #8F5360 |
| 5 | 66,67% | #694A6E |
| 6 | 83,33% | #44427C |
| 7 | 100% | #1E3A8A |
Bons usos
- Rampas de estado de UI: crie cores intermediárias para hover, ativo, selecionado ou desativado.
- Planejamento de gradientes: defina os stops HEX exatos antes de escrever um gradiente CSS em outra ferramenta.
- Variações de ícones e ilustrações: mantenha um pequeno conjunto de cores relacionadas consistente.
- QA de design: compare o ponto médio calculado por canal em vez de estimar visualmente.
Limites importantes
Este misturador não aceita rgb(), hsl(), nomes de cores, valores alpha nem HEX de 8 dígitos. Ele não exporta RGB, HSL, LAB, LCH, snippets CSS, verificações de contraste nem avaliações de acessibilidade. Se precisar disso, use um conversor, um verificador de contraste ou um gerador de gradientes depois de obter as etapas HEX.
Perguntas frequentes
Apenas HEX: 3 ou 6 dígitos, com ou sem # no início. A ferramenta não lê rgb(), hsl(), canais alpha nem nomes de cores.
Sim. A primeira etapa é a primeira cor e a etapa final é a segunda cor. As demais etapas são as cores interpoladas entre elas.
A mistura é calculada canal por canal em RGB/sRGB. Isso é previsível e fácil de reutilizar em código, mas não é o mesmo que interpolação perceptual LAB ou LCH.
Não. Ela mostra apenas amostras e códigos HEX. Use os valores HEX gerados no seu CSS ou passe-os para um verificador de contraste se as razões de acessibilidade forem importantes.
Ferramentas relacionadas
Gerador de cards CSS
Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.
Gerador de Docker Compose
Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.
Conversor de base numérica
Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.
Conversor de Tamanho de Arquivo
Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.
Gerador de README
Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.
Ofuscador de JavaScript
Ofusque JavaScript com codificação de array de strings, renomeação de variáveis, achatamento de fluxo de controle e injeção de código morto para proteção do front-end.
Ferramenta disponível em outros idiomas
- Färgmixer [SV]
- Kleurenblender [NL]
- ตัวผสมสี [TH]
- 색상 혼합기 [KO]
- مزج الألوان [AR]
- Pencampur warna [ID]
- Trộn màu [VI]
- Mieszanie kolorów [PL]
- Farbmischer [DE]
- カラーブレンダー [JA]
- Mezclador de colores [ES]
- Mélangeur de couleurs [FR]
- Color Blender [EN]
- Miscelatore di colori [IT]
- Смешивание цветов [RU]
- Renk Karıştırıcı [TR]
- 颜色混合器 [ZH]