Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gabrielcenteiofreitas/findtheclosesttailwindcolors-v2

"Find the closest Tailwind CSS colors" é uma ferramenta que todo desenvolvedor Tailwind precisa. Desenvolvida com o propósito de eliminar dúvidas ao escolher qual cor do Tailwind é mais similar àquela usada em um projeto.
https://github.com/gabrielcenteiofreitas/findtheclosesttailwindcolors-v2

alura color colors create css gemini gemini-api google-gemini-ai html javascript js react reactjs tailwind tailwind-css tailwindcss

Last synced: 2 days ago
JSON representation

"Find the closest Tailwind CSS colors" é uma ferramenta que todo desenvolvedor Tailwind precisa. Desenvolvida com o propósito de eliminar dúvidas ao escolher qual cor do Tailwind é mais similar àquela usada em um projeto.

Awesome Lists containing this project

README 

        
Find the Closest Tailwind Colors





  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  






  Sobre o projeto •

  Executando localmente •

  Tecnologias








  

  [Preview do projeto.](https://find-the-closest-tailwind-colors-v2.vercel.app/)






  

  [Ver projeto](https://find-the-closest-tailwind-colors-v2.vercel.app/)










## 💻 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](https://find-the-closest-tailwind-colors-v2.vercel.app/).



> **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?





  

  [Cores mais próximas encontradas pelos cálculos.](https://find-the-closest-tailwind-colors-v2.vercel.app/)




Foi, então, assistindo às aulas da [Imersão de Inteligência Artificial com o Google Gemini da Alura](https://cursos.alura.com.br/imersao) 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)





  

  [Cores mais próximas encontradas pelo Gemini.](https://find-the-closest-tailwind-colors-v2.vercel.app/)




**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.**





  

  [Botão de consulta ao Gemini.](https://find-the-closest-tailwind-colors-v2.vercel.app/)




Você pode acessar/usar a ferramenta clicando [aqui](https://find-the-closest-tailwind-colors-v2.vercel.app/).





## 🔧 Executando localmente



#### 1. Clone o repositório

```bash

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

```



#### 2. Entre na pasta do projeto

```bash

cd FindTheClosestTailwindColors-v2

```



#### 3. Instale as dependências

```bash

npm install

```



#### 4. Crie o arquivo .env e adicione sua [API Key](https://support.gemini.com/hc/pt-br/articles/360031080191-Como-fa%C3%A7o-para-criar-uma-chave-de-API) dessa forma:

```bash

# .env



REACT_APP_API_KEY="insira aqui sua API Key"

```



#### 5. Inicie o servidor de desenvolvimento

```bash

npm start

```



#### 6. Acesse [http://localhost:3000](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