Interpolador de Pasos

Genera colores intermedios entre dos colores con diferentes métodos de interpolación

Genera una serie de pasos intermedios precisos entre dos colores.

Color Inicial

rgb(30, 64, 175)

Color Final

rgb(249, 115, 22)

Espacio de Color

Número de Pasos: 7

25101520

Curva de Easing

Controla la distribución de colores. Lineal = espaciado uniforme. Ease In = concentrados al inicio. Ease Out = concentrados al final.

Vista Previa del Gradiente

Comparar espacios:

RGB

HSL

LAB

Pasos Interpolados (7)

#1E40AFrgb(30, 64, 175)

hsl(226°, 71%, 40%)

#69469Argb(105, 70, 154)

hsl(265°, 37%, 44%)

17%

#8F4D84rgb(143, 77, 132)

hsl(310°, 30%, 43%)

33%

#AE556Ergb(174, 85, 110)

hsl(343°, 35%, 51%)

50%

#C85F57rgb(200, 95, 87)

hsl(4°, 51%, 56%)

67%

#E1693Drgb(225, 105, 61)

hsl(16°, 73%, 56%)

83%

#F97316rgb(249, 115, 22)

hsl(25°, 95%, 53%)

100%

Uniformidad Perceptual (ΔE)

Muestra la distancia perceptual entre pasos consecutivos. Menor varianza = gradiente más uniforme.

22.5

ΔE Prom.

22.3

Min

22.6

Max

100%

Uniforme

Exportar

CSS Gradient

background: linear-gradient(to right, #1e40af, #69469a, #8f4d84, #ae556e, #c85f57, #e1693d, #f97316);

💡 Guía de Espacios de Color

RGB: Mezcla directa de canales. Puede producir tonos apagados entre colores complementarios.

HSL: Interpola a través de la rueda de matiz. Ideal para transiciones tipo arcoíris.

LAB: Perceptualmente uniforme (CIE LAB). Produce las transiciones más equilibradas visualmente. Recomendado.

Cómo funciona

La interpolación de colores genera pasos intermedios entre dos colores, útil para gradientes, escalas de diseño y tokens de color.

Métodos de interpolación

RGB: Interpolación lineal en espacio RGB. Simple pero puede producir tonos apagados entre colores complementarios (ej: rojo→cian pasa por gris).
HSL: Interpola por la rueda de matiz. Ideal para transiciones tipo arcoíris, pero puede crear picos de saturación inesperados.
LAB (CIE L*a*b*): Perceptualmente uniforme — los pasos se ven equidistantes al ojo humano. Recomendado para la mayoría de casos.

🎯 Curvas de easing

Las curvas de easing controlan cómo se distribuyen los colores entre los extremos:

Lineal: Pasos equidistantes. Ideal para escalas de diseño (Tailwind 50-950).
Ease In: Los colores se concentran cerca del color inicial. Útil para transiciones suaves desde un fondo.
Ease Out: Los colores se concentran cerca del color final. Perfecto para "aterrizar" en un acento.
Ease In-Out: Concentración en ambos extremos con transición rápida en el centro. Simula cómo CSS anima colores.

📊 Uniformidad perceptual (ΔE)

El indicador ΔE mide la distancia perceptual entre pasos consecutivos usando CIE LAB. Un gradiente con barras verdes y uniformes (≥80%) es visualmente equilibrado. Barras rojas indican "saltos" perceptuales.

💡 Ejemplos de uso prácticos

Caso 1: Escala Tailwind completa

Genera una escala 50→950 desde #3B82F6 (azul) a #1E3A5F (oscuro).

→ 11 pasos en modo LAB + easing lineal
→ Exporta con botón "Tailwind" para pegar directo en tu config

Caso 2: Hero section con gradiente suave

Transición de #6366F1 a #EC4899.

→ LAB con 15-20 pasos para transición imperceptible
→ Usa "Ease In-Out" para suavizar los extremos

Caso 3: Mapa de calor accesible

Escala de color para data visualization (bajo → medio → alto).

→ 5-7 pasos discretos en modo LAB
→ Usa azul→naranja en vez de verde→rojo (accesible para daltonismo)
→ Verifica que el ΔE entre pasos sea ≥ 10 para distinguibilidad

Caso 4: Animación CSS con keyframes

Genera los valores intermedios para una animación de color entre dos estados.

→ HSL para transiciones de tono circulares
→ "Ease In-Out" simula la curva cubic-bezier de CSS
→ Exporta como Array JS para usar en keyframes

⚡ Consejo pro

Si el indicador ΔE muestra baja uniformidad, prueba cambiar de espacio de color. LAB suele dar la mejor uniformidad, pero HSL puede ser mejor para transiciones de tono puro (ej: rojo→azul).

Preguntas Frecuentes

¿Qué método de interpolación debo usar?

LAB produce los gradientes más naturales y equilibrados. HSL es mejor para transiciones de tono (ej: arcoíris). RGB es el más simple pero puede producir colores "sucios" entre complementarios. En caso de duda, usa LAB.

¿Cuántos pasos necesito?

Depende del uso: 5-9 para escalas de diseño (botones, badges), 11 para escalas tipo Tailwind (50-950), 15-20 para gradientes suaves de fondo, y 3-5 para categorías de data viz.

¿Para qué sirven las curvas de easing?

Las curvas controlan la distribución de los pasos. "Lineal" da pasos iguales. "Ease In" concentra más colores cerca del inicio (útil para fondos que se desvanecen). "Ease Out" concentra al final. "Ease In-Out" suaviza ambos extremos, similar a cómo CSS anima transiciones.

¿Qué significa el indicador ΔE?

ΔE (Delta E) mide la distancia perceptual entre colores usando CIE LAB. Un ΔE < 1 es imperceptible, 1-3 es apenas visible, >10 es claramente diferente. Un gradiente uniforme tiene ΔE similar entre todos los pasos. El % de uniformidad indica qué tan parejos son los saltos.

¿Puedo usar esto para generar escalas Tailwind?

Sí. Pon 11 pasos (para los niveles 50-950), usa modo LAB con easing lineal, y haz clic en "Tailwind" en la sección de exportación. Obtendrás un objeto listo para pegar en tu tailwind.config.js.

¿Cuándo es mejor RGB que LAB?

RGB es útil cuando necesitas mezclas simples de canales (ej: para LEDs, pantallas, o cuando trabajas directamente con valores de píxel). También es más rápido computacionalmente, aunque la diferencia es insignificante en esta herramienta.