🎨 Combos de Cores prontos pra sua UI

Nível 1 · 🪷 Lotófagos · ⏱️ ~5 min · Pré-requisitos: nenhum

📌 Pra que serve

Essa é uma lista de paletas de cores (par a par) pensadas pra interfaces digitais. Serve pra quem tá travado na hora de escolher cores de um app/site e quer combinações já testadas, com contraste bom pra fundo, destaque, botão ou call-to-action.

🛠️ Passo a passo

1. Escolha um dos 6 combos abaixo conforme o clima que você quer passar (mais vibrante, mais clean, mais tech etc).
2. Combo 1 — Cyber Grape #6D28D9 + Acid Lime #D7FF00: roxo forte com verde-limão pra destaque.
3. Combo 2 — Raspberry #C2185B + Pale Sky #E0F2FE: rosa pink com azul bem claro de fundo.
4. Combo 3 — Quantum Blue #2457FF + Ice Glass #DFF7FF: azul elétrico com azul quase branco.
5. Combo 4 — Deep Graphite #1F2329 + Lime Compute #B6FF2E: cinza chumbo com verde neon, visual mais tech/dark mode.
6. Combo 5 — Blueberry #243B8F + Cream Sode #FFF0C9: azul marinho com creme, combinação mais suave.
7. Combo 6 — Cyber Teal #03313A + Aqua Foam #8FFFE0: verde-azulado escuro com verde-água claro.
8. Pegue os códigos hex e joga direto no Figma, CSS ou na ferramenta de design que você usa.

💡 Dica prática: use a cor mais escura do combo como fundo/base e a mais clara/vibrante só nos pontos de destaque (botão, ícone, hover) — assim o contraste funciona e a interface não fica poluída.

🔗 Links e instalação

Fonte: https://www.instagram.com/reel/DbVahuaM2tv/?igsh=MTQ5N2t3NGY3Mml3dg==
Figma (web/app, sem instalação obrigatória): https://www.figma.com
Figma Desktop (instalação): https://www.figma.com/downloads/

Uso no CSS (exemplo com variáveis):

:root {
  --bg-color: #1F2329;
  --accent-color: #B6FF2E;
}.button {
  background-color: var(--accent-color);
  color: var(--bg-color);
}

No Figma: cole o código hex direto no campo de cor (painel Fill, canto superior direito) ao selecionar um elemento.