Guía de paletas y combinaciones de color: de la teoría del color a la combinación profesional de UI en la práctica

Herramientas de desarrollo

Fundamentos de la teoría del color

Modelo de color HSL

H (Hue) Tono: 0-360°, ángulo en el círculo cromático
S (Saturation) Saturación: 0-100%, gris → color puro
L (Lightness) Luminosidad: 0-100%, negro → blanco
Valor de tono Color
0° / 360° Rojo
60° Amarillo
120° Verde
180° Cian
240° Azul
300° Magenta

Círculo cromático

         0° Rojo
    300°       60°
   Magenta     Amarillo
  240°         120°
    Azul       Verde
        180° Cian

Cinco esquemas clásicos de combinación de color

1. Combinación monocromática (Monochromatic)

Mismo tono, diferente saturación y luminosidad.

:root {
  --primary-50: hsl(220, 100%, 97%);   /* Azul extremadamente claro */
  --primary-100: hsl(220, 100%, 94%);
  --primary-200: hsl(220, 100%, 88%);
  --primary-300: hsl(220, 100%, 78%);
  --primary-400: hsl(220, 100%, 68%);
  --primary-500: hsl(220, 100%, 58%);  /* Azul base */
  --primary-600: hsl(220, 100%, 48%);
  --primary-700: hsl(220, 100%, 38%);
  --primary-800: hsl(220, 100%, 28%);
  --primary-900: hsl(220, 100%, 18%);  /* Azul extremadamente oscuro */
}

Aplicación: Simple, profesional, fuerte identidad de marca

2. Combinación análoga (Analogous)

Colores adyacentes a 30° en el círculo cromático.

:root {
  --analogous-1: hsl(200, 80%, 50%);  /* Azul */
  --analogous-2: hsl(220, 80%, 50%);  /* Azul-violeta */
  --analogous-3: hsl(240, 80%, 50%);  /* Violeta */
}

Aplicación: Armónico, natural, cálido

3. Combinación complementaria (Complementary)

Colores opuestos a 180° en el círculo cromático.

:root {
  --primary: hsl(220, 80%, 55%);    /* Azul */
  --complement: hsl(40, 80%, 55%);  /* Naranja */
}

Aplicación: Alto contraste, llamativo, botones CTA

4. Combinación triádica (Triadic)

Tres colores equidistantes a 120° en el círculo cromático.

:root {
  --triadic-1: hsl(0, 70%, 55%);    /* Rojo */
  --triadic-2: hsl(120, 70%, 55%);  /* Verde */
  --triadic-3: hsl(240, 70%, 55%);  /* Azul */
}

Aplicación: Vivo, colorido, productos infantiles

5. Combinación complementaria dividida (Split-Complementary)

30° a cada lado del color complementario.

:root {
  --primary: hsl(220, 80%, 55%);     /* Azul */
  --split-1: hsl(10, 80%, 55%);      /* Rojo-naranja */
  --split-2: hsl(50, 80%, 55%);      /* Amarillo-naranja */
}

Aplicación: Rico pero no caótico, más suave que la complementaria

Estándares de contraste WCAG

Cálculo del contraste

Contraste = (L1 + 0.05) / (L2 + 0.05)

L1 = Luminancia relativa del color más claro
L2 = Luminancia relativa del color más oscuro

Cálculo de luminancia relativa:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
(R/G/B deben linealizarse primero en sRGB)

Estándar WCAG 2.1

Nivel Texto del cuerpo Texto grande Componentes UI
AA 4.5:1 3:1 3:1
AAA 7:1 4.5:1 -

Texto grande: ≥18pt (24px) o ≥14pt negrita

Verificar contraste con JavaScript

function getContrastRatio(color1: string, color2: string): number {
  const l1 = getRelativeLuminance(color1);
  const l2 = getRelativeLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

function getRelativeLuminance(hex: string): number {
  const rgb = hexToRgb(hex);
  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255]
    .map(c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function meetsWcagAA(fg: string, bg: string, isLargeText = false): boolean {
  const ratio = getContrastRatio(fg, bg);
  return isLargeText ? ratio >= 3 : ratio >= 4.5;
}

Generación de paletas profesionales

Escalas de color estilo Tailwind CSS

function generatePalette(baseHue: number, baseSat: number) {
  const lightnesses = [97, 94, 88, 78, 68, 58, 48, 38, 28, 18];
  return lightnesses.map((l, i) => ({
    name: `${(i) * 100}`,
    value: `hsl(${baseHue}, ${baseSat}%, ${l}%)`,
  }));
}

// Generar paleta azul
const bluePalette = generatePalette(220, 80);
// 50: hsl(220, 80%, 97%)
// 100: hsl(220, 80%, 94%)
// ...
// 900: hsl(220, 80%, 18%)

Espacio de color OKLCH (más uniforme)

/* OKLCH es perceptualmente más uniforme que HSL */
:root {
  --blue-50: oklch(97% 0.01 250);
  --blue-500: oklch(62% 0.19 250);
  --blue-900: oklch(30% 0.12 250);
}
Espacio de color Uniformidad perceptual Soporte de navegadores
HSL ❌ No uniforme Todos
OKLCH ✅ Uniforme Chrome 111+, Safari 15.4+
OKLAB ✅ Uniforme Chrome 111+, Safari 15.4+

Combinación de colores en modo oscuro

/* Modo claro */
:root {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --text: #1f2937;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
}

/* Modo oscuro: no simplemente invertir, sino reducir el contraste */
[data-theme="dark"] {
  --bg: #111827;
  --surface: #1f2937;
  --text: #f9fafb;
  --text-secondary: #9ca3af;
  --border: #374151;
}

Principios de combinación en modo oscuro

  1. No usar negro puro #000: Usar grises oscuros como #111827
  2. Reducir la saturación del color principal: Alta saturación en modo oscuro es deslumbrante
  3. Mantener contraste ≥ 4.5:1: Estándar WCAG AA
  4. Reemplazar sombras por capas de fondo más oscuras: Las sombras no son visibles en modo oscuro

Referencia de paletas clásicas

Tecnología/SaaS

Color principal: #3b82f6 (Azul 500)
Color secundario: #8b5cf6 (Violeta 500)
Acento: #06b6d4 (Cian 500)
Fondo: #f8fafc
Texto: #0f172a

E-commerce/Consumo

Color principal: #f97316 (Naranja 500)
Color secundario: #ef4444 (Rojo 500)
Acento: #22c55e (Verde 500)
Fondo: #ffffff
Texto: #1f2937

Finanzas/Profesional

Color principal: #1e40af (Azul 800)
Color secundario: #059669 (Verde 600)
Acento: #d97706 (Ámbar 600)
Fondo: #f9fafb
Texto: #111827

Generación de combinaciones con ToolsKu

  1. Abre la herramienta de conversión de color o el generador de degradados
  2. Selecciona el color base
  3. Genera automáticamente la escala de colores (50-900)
  4. Verifica si el contraste cumple con WCAG AA
  5. Previsualiza el efecto en modo oscuro
  6. Copia el código de variables CSS

Preguntas frecuentes

¿Por qué mi combinación de colores se ve "sucia"?

HSL tiene una percepción de saturación inconsistente en luminosidades altas/bajas. Usa el espacio de color OKLCH para generar escalas de color más limpias.

¿Los colores son demasiado llamativos en modo oscuro?

Reduce la saturación un 20-30%, aumenta la luminosidad un 5-10%:

/* Modo claro */
--primary: hsl(220, 80%, 55%);

/* Modo oscuro: reducir saturación */
--primary: hsl(220, 60%, 65%);

¿Cómo asegurar que sea amigable para daltónicos?

  • No confiar solo en el color para transmitir información (agregar iconos/texto)
  • La combinación rojo-verde no es amigable para daltónicos, usar azul-naranja como alternativa
  • Probar con el simulador de daltonismo

Resumen

Una buena combinación de colores proviene de la teoría del color + estándares de contraste + pruebas prácticas. Dominar los cinco esquemas clásicos de combinación, los estándares de contraste WCAG y el espacio de color OKLCH te permitirá generar paletas de nivel profesional. Recuerda: la combinación de colores no es arte, es ingeniería — hay estándares que seguir, herramientas que medir.

#调色板#颜色搭配#色彩理论#UI设计#教程