Creador de Paleta de Degradado | CSS y colores intermedios en un solo paso
Elige de 2 a 5 colores y genera a la vez un degradado suave y una paleta de colores por pasos. Alterna entre lineal y radial, ajusta el ángulo de 0 a 360 grados, define de 3 a 24 pasos y copia tanto el CSS linear-gradient() como una lista de códigos HEX.
💡 Sobre esta herramienta
Calcular a mano qué color queda justo entre dos tonos es lento y suele dar resultados turbios. Aquí, un mismo conjunto de colores produce dos salidas: la cadena CSS lista para pegar en una hoja de estilos, y una rejilla de muestras intermedias que puedes copiar de una en una. Al hacer clic en cualquier muestra, su valor HEX pasa al portapapeles, lo que evita reescribir #A952A4 a mano en un panel de diseño.
Conviene entender la teoría detrás del control de pasos. Un degradado es una interpolación: la herramienta divide la distancia entre tus colores en partes iguales y calcula cada punto intermedio. Con 3 pasos obtienes inicio, medio y fin; con 24 obtienes una rampa tonal fina. Los modos lineal y radial comparten los mismos puntos de color, así que puedes fijar una paleta y comparar un barrido tipo banner con un brillo radial sin volver a elegir nada.
🧐 Preguntas Frecuentes
¿El CSS sirve tal cual?
Sí. Sale como background: linear-gradient(90deg, #ec1380 0%, #00f0ff 100%);, así que se pega directamente en una propiedad background. Al elegir radial, genera radial-gradient(circle, ...).
¿Qué cambia exactamente el deslizador de pasos? Define cuántas muestras aparecen en la paleta y en la lista HEX. En 3 obtienes inicio, medio y fin; en 24, una rampa tonal detallada. No altera el degradado CSS, que siempre usa como puntos los 2 a 5 colores que introdujiste.
¿Por qué los tonos intermedios a veces se ven apagados? Es el resultado típico de interpolar en el espacio RGB: mezclar un rosa y un cian saturados pasa por un centro de baja saturación. Para medios más vivos, añade un tercer color en el medio en lugar de confiar en una mezcla de dos.
¿Puedo usarlo para escalas de color de Tailwind o SCSS?
La lista HEX te da los valores en bruto; pégalos en tu theme.extend.colors o en un mapa SCSS. La herramienta entrega valores, no sintaxis de un framework concreto.
📚 Datos Curiosos
La interpolación lineal es un concepto matemático que va mucho más allá del color: es el mismo principio con el que se calcula un punto a medio camino entre dos valores conocidos. Aplicado al espacio RGB, traza una recta a través de un cubo de color, y esa recta cruza cerca del centro de baja saturación, lo que explica el "gris" del medio. Los espacios perceptuales como OKLCH se diseñaron justamente para mantener constante la luminosidad y el croma mientras gira el tono. Para un fondo CSS o una escala de matices de interfaz, el paso RGB es predecible y suficiente; en visualización de datos, donde cada paso debe leerse como igualmente distinto, ese hundimiento gris es el problema que la ciencia del color intenta eliminar.