¿Odias los anuncios? Ir Sin publicidad Hoy 

Generación de paleta de colores Crear una paleta completa a partir de un único hexagonal

Publicado el 12 de mayo de 2026

Aprende a crear una paleta de colores completa, semántica y lista para modo oscuro a partir de un único hex de marca usando la teoría de colores HSL y JavaScript.

Generación de paleta de colores: construir una paleta completa a partir de un único hexágono 1

ANUNCIO · ¿ELIMINAR?

Tienes un hexágono de marca. Quizás proviene de un logotipo, una guía de estilo o simplemente un color que te gusta. Ahora necesitas una paleta completa — tonos, sombras, colores complementarios, tokens semánticos, variantes para modo oscuro. Este guía explica exactamente cómo construirlo de forma programática y correcta.

La teoría de colores que realmente importa

La mayoría de la teoría de colores que encontrarás en la escuela de diseño no se traduce directamente al trabajo de interfaz. Aquí tienes lo que sí lo hace:

Tipo de Armonía	Cómo generar	Mejor para	Ejemplo
Complementario	Rotar el tono 180°	Acentos de alto contraste, llamadas a la acción (CTAs)	Primario azul + acento naranja
Análogo	±30° de rotación de tono	Fondos, gradientes sutiles	Azul + verde menta + indigo
Tríadico	Tres tonos a 120°	Dashboards coloridos, visualización de datos	Rojo + amarillo + azul
Complementario dividido	180° ± 30°	Contraste más suave que el complementario	Azul + naranja amarilla + rojo-amarillo

Para la mayoría de las bibliotecas de UI, usarás tu color de marca como primario, un vecino análogo como secundario, y un tono complementario o dividido para acentos e interacciones.

Por qué HSL supera a Hex para el trabajo de paletas

Hex y RGB codifican el color como canales de hardware, no como lo perciben los humanos. HSL (Tono, Saturación, Brillo) se alinea con la percepción humana:

Tono — el color en sí (0–360°, donde 0 = rojo, 120 = verde, 240 = azul)
Saturación — cuán vívido o gris (0% = gris, 100% = color completo)
Brillo — cuán claro o oscuro (0% = negro, 100% = blanco)

Esto importa porque para generar un tono de tu color de marca, no lo mezclas con blanco — simplemente aumentas el brillo en HSL. El tono se mantiene exactamente igual. Esto no se garantiza al mezclar valores hexadecimales matemáticamente.

Generación correcta de tonos y sombras

La forma incorrecta es común: interpolas el hex hacia #ffffff para tonos, hacia #000000 para sombras. Esto introduce desviaciones de tono y desaturación — tu “azul claro” se convierte en un gris tenue.

La forma correcta: analiza tu hex a HSL, luego varía solo el brillo:

/**
 * Generate a 10-step shade scale from a base HSL color.
 * Returns shades from 50 (lightest) to 950 (darkest), like Tailwind.
 * @param {number} h - Hue (0–360)
 * @param {number} s - Saturation (0–100)
 * @param {number} l - Base lightness (0–100)
 * @returns {Object} - Scale object: { 50, 100, 200, ..., 900, 950 }
 */
function generateShadeScale(h, s, l) {
  // Lightness stops mapped to Tailwind-style scale keys
  const stops = [
    [50,  95],
    [100, 90],
    [200, 80],
    [300, 70],
    [400, 60],
    [500, l],   // 500 = your base color
    [600, 40],
    [700, 30],
    [800, 20],
    [900, 12],
    [950, 7],
  ];

  const scale = {};
  for (const [key, lightness] of stops) {
    scale[key] = `hsl(${h}, ${s}%, ${lightness}%)`;
  }
  return scale;
}

// Example: brand color #3b82f6 (Tailwind blue-500)
// HSL ≈ hsl(217, 91%, 60%)
const palette = generateShadeScale(217, 91, 60);
// palette[50]  → "hsl(217, 91%, 95%)" — near-white blue tint
// palette[500] → "hsl(217, 91%, 60%)" — brand color
// palette[900] → "hsl(217, 91%, 12%)" — near-black blue shade

La clave: el tono y la saturación se mantienen constantes en toda la escala. Solo cambia el brillo. Esto produce una escala visualmente coherente que se siente como la misma familia de colores en cada peso.

¿Necesitas generar esto a partir de un hex? Usa el gratuito Extractor de Paleta de Colores para extraer valores de HSL de cualquier color de forma inmediata.

La escala de diseño 50–950

Tailwind popularizó la escala de 11 niveles (50, 100–900, 950). Ahora es un estándar de facto en los sistemas de diseño porque se alinea perfectamente con casos de uso:

50–100: Fondos de página, estados de hover en superficies claras
200–300: Bordes, divisores sutiles, estados desactivados
400–500: Elementos interactivos — botones, enlaces, anillos de foco
600–700: Estados de hover/activo para elementos interactivos
800–900: Texto sobre fondos claros
950: Cercano al negro para títulos de alto contraste

Cuando generas esta escala para tu color de marca, obtienes automáticamente todos los tonos necesarios para cualquier estado de componente — sin tener que tomar decisiones de color por componente.

De hex de marca a paleta completa y funcional

Aquí está el flujo práctico cuando tienes un único hex de marca:

Analiza a HSL. Convertir #1d4ed8 → hsl(221, 74%, 48%)
Genera la escala primaria. Aplica la función de sombra anterior para la escala completa de 11 niveles.
Deriva el secundario. Rotar el tono ±30° para un secundario análogo: hsl(251, 74%, 48%) (azul-紫色).
Deriva el acento. Rotar el tono 180° para un complementario: hsl(41, 74%, 48%) (amarillo).
Genera escalas para los tres. Misma función de sombra, diferentes entradas de tono.

Puedes ver el resultado completo — incluyendo tipos de armonía — con el Generador de Paletas de Colores antes de escribir una línea de código.

Tokens de color semánticos

Los valores de escala brutos son para tus elementos de paleta. Los tokens semánticos son los que realmente usan tus componentes:

const tokens = {
  // Map scale values to semantic names
  'color-primary':         palette[500],  // brand color
  'color-primary-hover':   palette[600],
  'color-primary-subtle':  palette[50],
  'color-text':            palette[900],
  'color-text-muted':      palette[600],
  'color-border':          palette[200],
  'color-bg':              palette[50],

  // Status colors — separate scales per semantic group
  'color-success':         'hsl(142, 71%, 45%)',
  'color-warning':         'hsl(38, 92%, 50%)',
  'color-danger':          'hsl(0, 84%, 60%)',
};

Esta separación es lo que hace que el modo oscuro sea manejable. Tus componentes hacen referencia a color-text, no palette[900]. En modo oscuro, solo remapeas el token — no cada componente.

Modo oscuro: inversión de la escala

Una paleta bien construida en HSL se invierte casi automáticamente. La regla: intercambia los extremos claro y oscuro de la escala, y ajusta los puntos medios ligeramente para un equilibrio perceptual.

// Light mode
const lightTokens = {
  'color-bg':    palette[50],   // near-white background
  'color-text':  palette[900],  // near-black text
  'color-border': palette[200],
};

// Dark mode — same scale, inverted stops
const darkTokens = {
  'color-bg':    palette[950],  // near-black background
  'color-text':  palette[50],   // near-white text
  'color-border': palette[800],
};

Dado que el tono y la saturación se mantienen constantes en toda la escala, tu identidad de marca sobrevive a la inversión. Un primario azul en modo claro se lee como el mismo azul en modo oscuro — simplemente más brillante contra la superficie oscura. Ese es el beneficio compuesto de construir tu paleta en HSL desde el inicio.

Reunir todo lo anterior

Partiendo de un único hex, ahora puedes generar una paleta completa, con nombres semánticos y lista para modo oscuro, en menos de 50 líneas de JavaScript. Los pasos clave son:

Analiza hex → HSL
Genera una escala de 11 niveles de brillo, manteniendo el tono y la saturación fijos
Deriva los tonos secundarios y de acento mediante rotación
Asigna valores de escala a tokens semánticos
Remapea los tokens para el modo oscuro

Para prototipar rápidamente sin escribir el código, el Generador de Paletas de Colores y Extractor de Paleta de Colores maneja todo esto visualmente — exporta el resultado como variables CSS o un archivo JSON de tokens y úsalo directamente en tu sistema de diseño.