Guía de Paletas de Color UI/UX

El color es una de las herramientas más poderosas en el diseño de interfaces. Una paleta bien diseñada mejora la usabilidad, comunica la personalidad de marca y guía al usuario hacia las acciones deseadas.

1.1 ¿Por qué es crucial el color en UI/UX?

• Jerarquía visual: Dirige la atención del usuario.
• Feedback: Comunica estados (éxito, error, advertencia).
• Identidad: Refuerza el reconocimiento de marca.
• Emoción: Genera sensaciones y conexiones.
• Accesibilidad: Garantiza que todos puedan usar tu producto.

1.2 Lo que Aprenderás

1. Anatomía de una paleta UI completa
2. El sistema 60-30-10 aplicado a interfaces
3. Colores semánticos y estados
4. Modo oscuro y temas
5. Accesibilidad y contraste
6. Casos de estudio de apps exitosas

Una paleta UI profesional es un sistema estructurado con roles específicos para cada color.

2.1 Los 5 Componentes Esenciales

2.2 Escalas de Color

Cada color necesita una escala de 9-11 tonos (50-900) para diferentes usos: fondos sutiles, bordes, estados hover, texto, etc.

La regla 60-30-10 garantiza equilibrio visual y jerarquía clara.

Los colores semánticos tienen significados universales que los usuarios reconocen instintivamente.

4.2 Estados de Componentes

Cada componente interactivo necesita: Default, Hover, Active, Focus, Disabled.

Los neutros son el 80% de cualquier interfaz. Una escala bien diseñada marca la diferencia.

5.1 Escala de 11 Tonos

5.2 Neutros Cálidos vs Fríos

Añade un sutil tinte a tus neutros para hacerlos más sofisticados. Elige según tu color primario.

El 82% de los usuarios prefieren modo oscuro. Pero diseñarlo bien es complejo.

6.1 No es Solo Invertir Colores

6.2 Principios Clave

• Evita #000000: Usa #121212 o similar
• Reduce saturación: 10-20% menos en colores brillantes
• Texto: Usa #E0E0E0, no blanco puro
• Elevación: Fondos más claros, no sombras

La accesibilidad no es opcional. Es requisito legal en muchos países y mejora la UX para todos.

7.1 WCAG: Los Estándares

7.2 Daltonismo

El 8% de hombres tienen algún tipo de daltonismo. Soluciones:

• Usa azul + naranja en lugar de rojo + verde
• Añade iconos a los estados (✓ para éxito, ✕ para error)
• No dependas solo del color para comunicar información

Analicemos las paletas de apps exitosas y qué podemos aprender.

8.1 Spotify

8.2 Airbnb

8.3 Stripe

Vamos a crear una paleta UI completa desde cero.

Paso 1: Define tu Color Primario

Debe reflejar tu marca, ser distintivo y funcionar en light/dark mode.

Paso 2: Genera la Escala

Desde tu color base (500), genera 10 variaciones (50-900).

Paso 3: Elige Neutros

Añade un sutil tinte del primario a tus neutros.

Paso 4: Define Semánticos

• Success: Verde (#10B981)
• Error: Rojo (#EF4444)
• Warning: Amarillo (#F59E0B)
• Info: Azul (#3B82F6)

Paso 5: Versión Dark Mode

Invierte neutros, aclara primario, desatura colores brillantes.

Paso 6: Documenta

Usa nombres semánticos (--color-primary, no --blue-500).

Las CSS Custom Properties son la forma moderna de implementar sistemas de color.

10.1 Estructura Recomendada

:root {
  /* Primario */
  --color-primary: #3B82F6;
  --color-primary-hover: #2563EB;
  
  /* Neutros */
  --color-background: #FFFFFF;
  --color-surface: #F9FAFB;
  --color-text: #111827;
  
  /* Estados */
  --color-success: #10B981;
  --color-error: #EF4444;
}

[data-theme="dark"] {
  --color-primary: #60A5FA;
  --color-background: #111827;
  --color-text: #F9FAFB;
}

11.1 Nuestras Herramientas

11.2 Design Systems de Referencia

• Material Design 3: Sistema de Google con tokens de color
• Tailwind CSS: Paleta predefinida muy bien pensada
• Radix Colors: Escalas accesibles y consistentes
• Apple Human Interface: Guía de iOS/macOS

11.3 Recursos Externos

• Realtime Colors: Previsualiza paletas en UI real
• Coolors: Generador de paletas rápido
• Contrast Checker (WebAIM): Verificador WCAG
• Who Can Use: Simula discapacidades visuales

Una paleta UI bien diseñada es la base de cualquier producto digital exitoso.

Checklist del Diseñador UI

Antes de empezar a diseñar, es importante entender qué tipo de paleta se adapta mejor a tu proyecto.

Responde estas 4 preguntas y te recomendaremos un estilo de paleta basado en tu tipo de producto, audiencia y objetivos.

Estudiar las paletas de apps exitosas es una de las mejores formas de aprender diseño de color.

Explora las paletas de Notion, Slack, Discord, Linear, Figma y Stripe. Cada una tiene un enfoque único que puedes aplicar a tus proyectos.

14.1 ¿Qué Aprender de Cada App?

La mejor forma de aprender es practicando. Estos ejercicios te ayudarán a aplicar todo lo aprendido.

15.1 Cómo Usar los Ejercicios

1. Lee el brief del proyecto cuidadosamente
2. Considera la audiencia y el contexto
3. Selecciona tus colores usando los selectores
4. Observa la vista previa en tiempo real
5. Haz clic en "Obtener Feedback" para ver sugerencias

15.2 Criterios de Evaluación

• Contraste: ¿El texto es legible? (mínimo 4.5:1)
• Coherencia: ¿Los colores trabajan juntos?
• Contexto: ¿Son apropiados para el tipo de app?
• Diferenciación: ¿Primario y secundario son distinguibles?

Los design tokens son la forma moderna de gestionar sistemas de diseño a escala.

16.1 ¿Qué son los Design Tokens?

Son variables que almacenan decisiones de diseño: colores, espaciado, tipografía, etc. Permiten mantener consistencia entre diseño y código.

{
  "color": {
    "primitive": {
      "blue": {
        "50": { "value": "#EFF6FF" },
        "500": { "value": "#3B82F6" },
        "900": { "value": "#1E3A8A" }
      }
    },
    "semantic": {
      "primary": { "value": "{color.primitive.blue.500}" },
      "background": { "value": "{color.primitive.gray.50}" },
      "text": { "value": "{color.primitive.gray.900}" }
    },
    "component": {
      "button": {
        "primary": {
          "background": { "value": "{color.semantic.primary}" },
          "text": { "value": "#FFFFFF" }
        }
      }
    }
  }
}

16.2 Niveles de Tokens

16.3 Herramientas para Design Tokens

• Figma Tokens: Plugin para gestionar tokens en Figma
• Style Dictionary: Transforma tokens a múltiples plataformas
• Tokens Studio: Sincroniza tokens entre Figma y código

Figma es la herramienta de diseño más popular. Aquí te explicamos cómo exportar tu paleta a Figma.

17.1 Métodos de Exportación

17.2 Estructura de Estilos en Figma

Incluso diseñadores experimentados cometen estos errores. Aprende a identificarlos y evitarlos.

Usa este checklist para verificar que tu paleta está completa antes de implementarla.

Marca cada ítem a medida que lo completes. El checklist guarda tu progreso mientras navegas por la guía.