Find the Closest Tailwind Colors

Sobre o projeto • Executando localmente • Tecnologias

Ver projeto

💻 Sobre o projeto

Tailwind CSS é um framework CSS que visa a utilidade, para isso, ele fornece diversas classes utilitárias. Acerca de cores, o Tailwind apresenta uma grande lista de opções, o que facilita a construção de um projeto. Entretanto, ao desenvolver uma aplicação, é comum que o desenvolvedor possua uma cor que deseja utilizar no projeto e que não está na paleta do Tailwind, logo, precisa encontrar uma cor que seja semelhante a desejada. (ainda que seja possível adicionar cores personalizadas, a utilização da própria paleta acaba sendo mais fácil e rápida).

Foi com esse propósito que o "Find the closest Tailwind CSS Colors" surgiu, tornando-se uma ferramenta que todo desenvolvedor Tailwind precisa. Fácil e intuitivo, nesse site você pode inserir uma cor em código Hex/RGB ou selecioná-la de um seletor de cores e obter instantaneamente as cores mais próximas da paleta Tailwind. Além disso, é possível ver sugestões de cores próximas dadas pelo Gemini, IA do Google, que, em diversos casos, sugere cores melhores do que as encontradas pelos cálculos.

Você pode acessar/usar a ferramenta clicando aqui.

Nota: Para ampliar o alcance da ferramenta, o projeto foi escrito em inglês. Já a documentação, em português, para facilitar a análise dos avaliadores da Alura.

Sobre a versão 2 e a inserção da Google Gemini AI no projeto

Por mais que o principal problema citado tenha sido solucionado no lançamento da v1, ainda havia uma questão que me tirava o sono.

Como o "Find the closest Tailwind CSS Colors" se utiliza de cálculos matemáticos para encontrar as cores mais próximas, cores menos saturadas faziam com que o resultado fossem, principalmente, de diversos tons de cinza(como mostrado na imagem a seguir). Porém, como solucionar isso?

Foi, então, assistindo às aulas da Imersão de Inteligência Artificial com o Google Gemini da Alura que me veio a solução. O Gemini, IA do Google, seria capaz de identificar a qual cor determinada tonalidade pertence, e, consequentemente, encontrar cores próximas melhor do que os cálculos matemáticos. (a imagem abaixo mostra as cores mais próximas encontradas pelo Gemini a partir da mesma cor do exemplo anterior)

A partir disso, um botão foi adicionado abaixo dos inputs de cor para visualizar as sugestões de cores dadas pelo Gemini. Dessa forma, a versão 2 do "Find the closest Tailwind CSS Colors" surgiu, criando um pequeno botão, mas resultado de um grande avanço tecnológico.

Você pode acessar/usar a ferramenta clicando aqui.

🔧 Executando localmente

1. Clone o repositório

git clone https://github.com/GabrielCenteioFreitas/FindTheClosestTailwindColors-v2.git

2. Entre na pasta do projeto

cd FindTheClosestTailwindColors-v2

3. Instale as dependências

npm install

4. Crie o arquivo .env e adicione sua API Key dessa forma:

# .env

REACT_APP_API_KEY="insira aqui sua API Key"

5. Inicie o servidor de desenvolvimento

npm start

6. Acesse http://localhost:3000 para visualizar a aplicação

🚀 Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias:

• ReactJS
• Create React App
• Javascript
• HTML
• CSS
• Google Gemini API

🤝 Contribuições

Issues e pull requests são muito bem-vindos!

👨🏻‍💻 Autor: Gabriel Centeio Freitas