Como elegir una paleta de colores para tu proyecto: teoria, herramientas y generador gratis

Los colores afectan emociones, decisiones de compra y percepcion de marca:

• 85% de los consumidores citan el color como la razon principal para comprar un producto (KISSmetrics)
• El reconocimiento de marca aumenta un 80% con colores consistentes
• Los usuarios forman una opinion sobre un sitio web en 50 milisegundos, basada principalmente en colores

Psicologia del color basica:

• Azul: Confianza, profesionalismo (Facebook, LinkedIn, PayPal, Samsung)
• Rojo: Urgencia, pasion, energia (YouTube, Netflix, Coca-Cola)
• Verde: Naturaleza, salud, dinero (Spotify, Starbucks, WhatsApp)
• Negro: Lujo, elegancia, poder (Apple, Chanel, Nike)
• Amarillo: Optimismo, atencion (McDonald's, IKEA, Snapchat)

Genera paletas armonicas con el generador de paletas de NexTools.

Monocromatica: Un solo tono con variaciones de saturacion y luminosidad. Ejemplo: azul oscuro (#1a365d), azul medio (#2b6cb0), azul claro (#63b3ed). Uso: minimalismo, elegancia, cuando quieres unidad visual.

Complementaria: Dos colores opuestos en la rueda (ej: azul + naranja). Alto contraste. Uso: CTAs, elementos que deben resaltar.

Analogica: 2-3 colores adyacentes en la rueda (ej: azul, verde-azul, verde). Armoniosa y natural. Uso: paisajes, naturaleza, calm design.

Triadica: 3 colores equidistantes (ej: rojo, azul, amarillo). Vibrante. Uso: disenos juveniles, creativos.

Split-complementaria: Un color base + los 2 adyacentes a su complementario. Equilibrio entre contraste y armonia.

Convierte entre formatos de color con el conversor de colores de NexTools.

Paso 1: Define la emocion. ¿Tu proyecto debe sentirse profesional? Usa azules/grises. ¿Energetico? Rojos/naranjas. ¿Natural? Verdes/terrosos.

Paso 2: Elige un color primario. Este sera tu color dominante (~60% de la superficie visual).

Paso 3: Genera la paleta. Usa el generador de NexTools para encontrar colores complementarios o analogos.

Paso 4: Agrega neutros. Toda paleta necesita blanco/negro/gris para texto, fondos y separadores. No uses negro puro (#000) — usa gris muy oscuro (#111827 o #1f2937).

Paso 5: Define la jerarquia.

• Primario (~60%): Color principal, fondos grandes
• Secundario (~30%): Acento, CTAs, highlights
• Terciario (~10%): Detalles, hover states, badges

La regla 60-30-10 viene del diseno de interiores y se aplica perfectamente a web:

60% — Color dominante: Fondo principal. Generalmente un neutro (blanco, gris claro) o tu primario en tono suave.

30% — Color secundario: Secciones alternas, cards, sidebars. Tu color primario o complementario.

10% — Color acento: CTAs (botones de accion), links, badges, alerts. El color que mas llama la atencion.

Ejemplo practico: Fondo blanco (#FFFFFF) 60%, cards gris claro (#F3F4F6) + headers azul (#2563EB) 30%, botones naranja (#F59E0B) 10%.

Si trabajas con gradientes entre tus colores, usa el generador de gradientes de NexTools.

WCAG 2.1 exige ratios minimos de contraste:

• Texto normal: 4.5:1
• Texto grande (+18px bold o +24px): 3:1
• Elementos UI (botones, inputs): 3:1

Errores comunes:

• Texto gris claro sobre fondo blanco: ratio ~2:1. FALLA.
• Texto blanco sobre fondo amarillo: ratio ~1.5:1. FALLA.
• Texto verde sobre fondo rojo: ilegible para daltonicos (8% de hombres).

Herramientas de verificacion: WebAIM Contrast Checker, Colour Contrast Analyser, axe DevTools.

Verifica contraste con la calculadora de porcentajes de NexTools.

Dark mode NO es simplemente invertir la paleta. Reglas especificas:

1. No usar negro puro (#000) como fondo. Causa fatiga visual. Usa gris muy oscuro: #111827, #1f2937, #0f172a.

2. Reducir saturacion de colores. Colores brillantes sobre fondo oscuro cansan. Desatura ~20-30% para dark mode.

3. Ajustar la jerarquia de sombras. Las sombras (box-shadow) no funcionan igual en dark mode. Usa bordes sutiles (1px solid rgba(255,255,255,0.1)) o elevation con fondos ligeramente mas claros.

4. El texto no debe ser blanco puro. Usa #E5E7EB o #D1D5DB. Blanco puro (#FFF) sobre gris oscuro tiene demasiado contraste y cansa.

NexTools: El generador de paletas crea combinaciones armonicas desde un color base.

Coolors.co: El mas popular. Genera 5 colores aleatorios con Space. Permite bloquear colores y regenerar los demas.

Adobe Color: Rueda de color interactiva con reglas de armonia. Permite extraer paleta de una imagen.

Realtime Colors: Previsualizacion en tiempo real de tu paleta en un layout de sitio web.

Tailwind CSS colors: Paletas predefinidas (slate, gray, zinc, red, blue...) con 10 tonos cada una. Excelente como punto de partida.

Fintech/Banca: Azul + blanco + gris. Transmite confianza y seguridad. Stripe, PayPal, Goldman Sachs.

Salud: Verde + azul + blanco. Limpieza, naturaleza, bienestar. Atencion: verde + rojo es inaccesible para daltonicos.

E-commerce: Naranja/rojo para CTAs (urgencia) + neutros para productos. Amazon: naranja CTA sobre blanco.

SaaS/Tech: Purpura + azul + gradientes. Moderno, innovador. Slack, Twitch, Figma.

Alimentacion: Rojo + amarillo estimulan apetito (McDonald's, KFC, Pizza Hut). Verde para "saludable".

Lujo: Negro + dorado + blanco. Minimalismo. Apple, Rolex, Louis Vuitton.