🎨 Kolora — O playground definitivo para criar, testar e exportar paletas de cores acessíveis

Kolora é uma ferramenta visual, gratuita e open source para criar, visualizar e exportar paletas de cores totalmente personalizadas — com suporte a bibliotecas reais de UI como Ant Design, Shadcn, Chakra UI , Material UI, etc.

✅ Tudo no navegador
🎯 Com previews reais de componentes
🧠 Com análise de contraste acessível
🚀 E exportação para múltiplos formatos, pronta pra produção

---

✨ O que o Kolora oferece?

🎨 Criador de Paletas Visual

• Crie sua paleta do zero ou modifique uma base existente
• Suporte a cores HEX, HSL, OKLCH, RGB
• Interface fluida, simples e acessível

🧩 Preview em Componentes Reais

• Veja como sua paleta se comporta em:
  • Buttons, Cards, Inputs, etc.
  • Com componentes de:
    • Shadcn UI
    • Antd Design entre outros
    • adicione outros contribuindo com o projeto 💪

⚖️ Contrast Grid (grátis e visual)

• Gere uma grade com todas as combinações possíveis de cores de fundo/texto
• Veja a razão de contraste (ex: 4.5:1) com indicação AA/AAA
• Ideal para garantir acessibilidade (WCAG 2.1 e 3.0)

📦 Exportação Rápida e Pronta pra Uso

• Exporte sua paleta em:
  • HEX, HSL, OKLCH, RGB
  • Tokens CSS customizados
  • Arquivo tailwind.config.js automático
  • @Theme para TailwindCSS v4
  • JSON para importar em outros projetos

---

🚀 Começando

git clone https://github.com/seu-usuario/kolora.git
cd kolora
npm install
npm run dev

---

🔍 Casos de uso

• Criar um tema acessível e testá-lo visualmente
• Verificar contraste em UI real
• Exportar temas direto pro Tailwind ou outro design system
• Compartilhar paletas com o time de forma visual e acessível

---

🛠️ Tecnologias

• React + Vite
• TailwindCSS
• Algumas bibliotecas de UI
• Color.js / Culori / WCAG contrast checker
• 100% client-side

---

💡 Roadmap

• [ ✅ ] Editor de paleta visual
• [ ✅ ] Exportação multi-formato
• [ 🔹 ] Visualização com componentes
• [ ✅ ] Contrast Grid interativa
• Compartilhamento por link
• Galeria de temas públicos
• Modo responsivo e acessível
• Integração com Figma Tokens

---

🤝 Contribua com o Kolora

• Pull requests, feedback e sugestões são sempre bem-vindos!
• Faça um fork
• Crie uma branch com sua feature
• Commit e push
• Abra um PR!

---

📜 Licença

MIT License

---

🦊 Feito com criatividade no navegador

Kolora nasceu para dar mais cor (literalmente) à forma como criamos interfaces.

Bonito no código. Bonito na tela. Bonito pra todo mundo. 💜