tints and shades

Tint & Shade Generator

Desenvolvimento local

Este projeto usa o gerador de sites estática eleve e implanta para as páginas do GitHub usando uma ação do GitHub da Shohei Ueda.

Pré -requisitos: Node.js 14+

1. Clone este projeto.
2. Navegue até o projeto no seu terminal.
3. Instale dependências: npm install .
4. Inicie o servidor: npm run start .
5. Navegue para localhost:8080 no seu navegador.

Qual é o gerador de tonalidade e sombra?

O objetivo desta ferramenta é produzir com precisão tonalidades (puro branco adicionado) e tons (preto puro adicionado) de uma determinada cor hexadecimal em incrementos de 10%.

Por que essa ferramenta é única?

Leva a matemática a sério. Na minha experiência, ferramentas semelhantes ficam incorretas no cálculo devido a erros de arredondamento, preferências do criador ou outras inconsistências.

Os testes mostram que a saída corresponde ao método de cálculo do Chrome Devtools, bem como alguns métodos populares e estabelecidos para derivar tonalidades e tons via SASS.

Quando eu usaria isso?

É melhor usado quando você já tem algumas cores básicas, mas gostaria de cores complementares para gradientes, bordas, fundos, sombras ou outros elementos.

Isso é útil para designers que podem estar comunicando a intenção de cores aos desenvolvedores que usam SASS ou POSTCSS em suas construções. Também é uma maneira sólida de visualizar rapidamente como são as tonalidades e tons de uma cor base que você pode estar considerando para o seu design.

Também ouvi dizer que é útil para professores, profissionais de dados e pessoas que fazem apresentações.

Método de cálculo

A cor hexadecimal dada é convertida pela primeira vez em RGB. Em seguida, cada componente da cor RGB tem o seguinte cálculo realizado nele, respectivamente.

• TINTS: New value = current value + ((255 - current value) x tint factor)
• Tons: New value = current value x shade factor

O novo valor é arredondado, se necessário, e depois convertido novamente em hexadecimal para exibição.

Exemplo de cálculo

Digamos que queremos tonalidade e tons de Rebecca Purple, #663399.

10% de tom

1. #663399 é convertido para o equivalente a RGB de 102, 51, 153
2. R: 102 + ((255 - 102) x .1) = 117.3 , arredondado para 117
3. G: 51 + ((255 - 51) x .1) = 71.4 , arredondado para 71
4. B: 153 + ((255 - 153) x .1) = 163.2 , arredondado para 163
5. RGB 117, 71, 163 é convertido no equivalente hexadecimal de #7547A3

10% de sombra

1. #663399 é convertido para o equivalente a RGB de 102, 51, 153
2. R: 102 x .9 = 91.8 , arredondado para 92
3. G: 51 x .9 = 45.9 , arredondado para 46
4. B: 153 x .9 = 137.7 , arredondado para 138
5. RGB 92, 46, 138 é convertido para o equivalente hexadecimal de #5C2E8A

Feedback e contribuição

Este projeto é de código aberto e eu adoraria sua ajuda!

Se você notar um bug ou deseja um recurso adicionado, registre um problema no GitHub. Se você não tiver uma conta lá, basta me enviar os detalhes.

Se você é um desenvolvedor e deseja ajudar com o projeto, comente sobre questões abertas ou crie uma nova e comunique suas intenções. Depois de concordarmos com um caminho a seguir, você pode simplesmente fazer uma solicitação de tração e levá -la à linha de chegada.

Apoie este projeto

O gerador de tonalidade e sombra estará sempre livre, mas seu apoio é muito apreciado.

• Compre me um café
• Venmo
• Aplicativo de caixa
• PayPal

Créditos

Michael Edelstone projetou e organizou o projeto com grande assistência de Nick Wing nos cálculos de cores.

Usamos essas incríveis bibliotecas de código aberto em todo o projeto:

• Anchorjs
• clipboard.js
• Escurecer
• Eleventy

Muito obrigado a Joel Carr, Sebastian Gutierrez, Tim Scalzo, Aman Agarwal, Aleksandr Hovhannisyan, Shubhendu Sen e Luis escarrilla por suas valiosas contribuições.

Outros detalhes

• Tipografia: Trabalho sem
• Cores: #000000, #ffffff, #e96443 e #CA228E
• Gosta do design de material do Google? Experimente esta outra coisa que eu fiz.