Calculadora de pasos de degradado CSS: colores intermedios entre dos HEX
Genera colores intermedios espaciados de forma pareja entre dos colores HEX, ideales para degradados CSS sin bandas, escalas de gráficas y rampas de tonos.
Cómo funciona
canalᵢ = inicio + (fin − inicio) × i ÷ (n − 1), para i = 0 … n − 1 (en cada canal R, G y B)
Cada parada intermedia es una mezcla lineal de los dos colores extremos, canal por canal, en fracciones iguales de 0 a 1. Es justo lo que hace un linear-gradient de CSS entre dos paradas, pero tener los colores sueltos sirve para escalas de visualización de datos, rampas de tonos ajustadas a mano o SVG, donde necesitas paradas con nombre. Interpolar en RGB es simple y predecible; cuando mezclas tonos muy distintos, el centro puede verse grisáceo o lodoso, y ahí conviene interpolar en HSL o LCH.
Ejemplo resuelto
De azul #0000ff a blanco #ffffff en 5 paradas (0%, 25%, 50%, 75% y 100%): los canales rojo y verde suben 0 → 64 → 128 → 191 → 255, mientras el azul se queda en 255. La secuencia queda #0000ff, #4040ff, #8080ff, #bfbfff y #ffffff, y el color del punto medio es #8080ff.
Preguntas frecuentes
¿Cuántas paradas necesito en un degradado CSS?
Para un linear-gradient suave bastan dos: el navegador interpola el resto. Genera más paradas cuando necesites muestras separadas (una leyenda, una paleta) o un degradado no lineal colocando paradas extra fuera del centro.
¿Por qué el color del medio se ve lodoso?
Mezclar en RGB promedia los canales, así que dos tonos saturados y opuestos se encuentran en un centro desaturado, casi gris. Interpolar en HSL, HCL o LCH mantiene la saturación a lo largo de la mezcla y evita ese centro apagado.
¿Sirve para un mapa de calor?
Una rampa de dos colores funciona, pero para datos son mejores las escalas perceptualmente uniformes (como viridis), en las que pasos iguales de valor se ven igual de distintos. Usa estas paradas para degradados decorativos y escalas sencillas de dos tonos.
Calculadoras relacionadas
Esta calculadora tiene fines informativos. Verifica los resultados importantes antes de tomar decisiones.