Cómo crear una paleta de colores profesional para tu proyecto.

Teoría del color básica.

No necesitás ser diseñador para crear buenas paletas de color. Necesitás entender tres conceptos: tono (hue), saturación y luminosidad. El tono es el "color" percibido (rojo, azul, verde). La saturación es qué tan vívido es. La luminosidad es qué tan claro u oscuro es. Con estos tres controles podés construir cualquier paleta coherente.

La regla 60-30-10: 60% del espacio visual en un color neutral (fondos, surfaces), 30% en un secundario (texto, bordes), 10% en el acento de marca (botones principales, highlights). Los acentos funcionan precisamente porque son escasos.

Por qué OKLCH.

HSL fue el estándar por años pero tiene un defecto fundamental: pasos iguales en lightness no se perciben como iguales. Un amarillo al 70% de lightness y un azul al 70% de lightness se ven completamente diferentes en luminosidad percibida. OKLCH (Oklab Lightness Chroma Hue) es perceptualmente uniforme: si subís 10 puntos de L en cualquier color, el cambio visual percibido es consistente.

/* HSL — problema: misma L, luminosidad percibida diferente */
color: hsl(60 100% 70%);   /* amarillo: se ve muy claro */
color: hsl(240 100% 70%);  /* azul: se ve oscuro */

/* OKLCH — solución: la L es perceptualmente uniforme */
color: oklch(0.75 0.15 90);   /* amarillo */
color: oklch(0.75 0.15 240);  /* azul — misma luminosidad percibida */

Construir la paleta.

El proceso para crear una paleta de 9 tonos para un color base:

1. Elegí tu color acento. Usá OKLCH: empieza con el hue de tu marca, chroma ~0.15-0.2, lightness ~0.55.
2. Generá los 9 tonos variando solo lightness (de 0.95 a 0.15) manteniendo hue y chroma constantes.
3. Ajustá chroma para los extremos: los tonos muy claros y muy oscuros se ven mejor con chroma reducido (0.05-0.08).
4. Verificá contraste: el texto necesita al menos 4.5:1 contra el fondo (WCAG AA). Usá el checker de WebAIM.
5. Nombrá los tonos del 50 al 950 siguiendo la convención de Tailwind.

Implementar con CSS.

:root {
  /* Color de marca: lime */
  --color-brand-50:  oklch(0.97 0.04 130);
  --color-brand-100: oklch(0.93 0.08 130);
  --color-brand-500: oklch(0.75 0.20 130);
  --color-brand-900: oklch(0.25 0.06 130);

  /* Semantic tokens — lo que realmente usás */
  --color-accent:    var(--color-brand-500);
  --color-text:      oklch(0.15 0.01 130);
  --color-surface:   oklch(0.98 0.005 130);
  --color-border:    oklch(0.88 0.02 130);
}

La capa de semantic tokens es la clave. Los componentes usan var(--color-accent), no oklch(0.75 0.20 130). Cuando cambies la marca, cambiás un valor y se actualiza todo.

Errores comunes.

• Negro puro (#000000) y blanco puro (#ffffff) nunca aparecen en diseño profesional. Siempre tintá los neutros hacia tu color de marca.
• Más de 3 colores de acento en una interfaz crea ruido. Elegí uno principal y usalo con disciplina.
• No verificar contraste: diseñar en pantalla calibrada y no testar en condiciones reales (sol directo, pantallas viejas) es un error crítico.