O seletor de cores do Morph permite escolher qualquer cor visualmente e ler na hora o código nos formatos que você realmente usa: HEX (`#3A7BD5`), RGB (`rgb(58, 123, 213)`) e HSL (`hsl(214, 64%, 53%)`). Arraste pelo campo de cor, ajuste com o controle de matiz e copie o valor direto para o seu CSS, arquivo de design ou onde precisar.
Os três códigos descrevem a mesma cor — são só formas diferentes de escrevê-la, e cada uma tem uma função:
Mude a cor da forma que quiser e os três códigos permanecem sincronizados, então você pega o que o seu projeto precisar.
Designers usam para fechar uma paleta e copiar valores exatos para um arquivo de design ou um guia de estilo. Desenvolvedores front-end usam para pegar um HEX para um botão ou converter o RGB de um designer em HSL para criar um estado de hover. Qualquer pessoa ajustando um tema, a cor de um gráfico ou um template de e-mail pode chegar ao tom exato e copiá-lo com um clique. Como o HSL fica ali ao lado do HEX, criar variações mais claras e mais escuras de uma cor base fica muito mais fácil do que tentar adivinhar dígitos hexadecimais.
O seletor de cores é código puro de navegador — o cálculo de cor e a interface rodam no seu dispositivo. Não há upload, não há conta, e nada é enviado a um servidor. Carrega rápido e continua funcionando offline depois que a página é aberta, porque escolher uma cor e calcular seus códigos nunca precisa de conexão com a internet.
Quando você copia um valor HEX, ele já está pronto para colar no CSS. Se precisar de uma cor com transparência, converta para RGB e adicione um canal alfa (`rgba(...)`) no seu código. Para montar uma paleta consistente, escolha uma cor base e use o valor de luminosidade do HSL para gerar tons mais claros e mais escuros, ajustando a luminosidade para cima ou para baixo enquanto mantém a matiz e a saturação fixas — isso faz um conjunto de cores parecer uma família, e não uma mistura aleatória.
Ele mostra HEX, RGB e HSL para cada cor escolhida, todos sincronizados, então você copia o formato que o seu projeto precisar.
O HSL facilita ajustar uma cor de forma intuitiva — aumente a luminosidade para um tom mais claro, diminua para um mais escuro, ou mude a matiz — sem precisar adivinhar dígitos hexadecimais.
Escolha sua cor, copie os valores RGB e adicione um canal alfa no seu código como rgba(...) para definir o nível de transparência que quiser.
Não. O seletor roda inteiramente no seu navegador. Não há upload e nada é enviado a um servidor — funciona até offline depois de carregado.
Escolha uma cor base e use o valor HSL dela, depois ajuste a luminosidade para cima ou para baixo mantendo a matiz e a saturação fixas para criar tons que pareçam um conjunto.