Degradado de colores frios
Contenidos
Degradado de 3 colores
Los degradados regresaron con fuerza y no hay quien los detenga. Esta tendencia de diseño web 2019 es popularizada por apps como Spotify e Instagram, que utilizaron en sus campañas y logotipos como elemento único. Puedes utilizar los degradados de muchas maneras, y la versión actual es sutil o extremadamente vibrante. En cualquier caso, los degradados son una forma nueva y divertida de revivir tus diseños.
Si estás planeando subirte al carro y estás buscando el mejor y más fresco degradado para tus gráficos, UI o diseño web, entonces no busques más. Hemos hecho una lista de 25 bonitas combinaciones de degradados con códigos de color que seguramente darán sabor a tu próximo proyecto. También puedes encontrar la paleta de colores perfecta para tu marca utilizando la herramienta de generación de degradados de Color Space.
Si nunca has sido un fan de los degradados, es hora de reconsiderarlo. Además de añadir interés visual y diseñar algo que merezca la pena mirar, también crean compromiso con el usuario. Puedes profundizar en el tema en nuestro artículo Uso de degradados en el diseño web. ¿Qué opinas de esta nueva tendencia? Háganoslo saber compartiendo su opinión a continuación.
Comentarios
Parecía una idea simple – escribir una secuencia de comandos para generar un gradiente de color (caliente a frío, es decir, Violeta -> Rojo -> Naranja -> Amarillo -> Verde -> Azul) que podría simplemente ‘plugin’ y utilizar. Después de pasar algún tiempo con esto la solución es simple una opción personalizada. Encontré que algunos gradientes ‘funcionan’ al contar ‘hacia abajo’ y otros funcionan al ‘contar hacia arriba’… Si asumimos eso:
Entonces, se podría pensar que sería fácil localizar un gráfico de este tipo – no encontré ninguno en 2012 – así que creé uno… (y ten en cuenta que esto es realmente una cuestión de elección/preferencia – lo que tiene sentido para ti es lo que debes usar…) Este gradiente de color se combinó con los comandos de gráficos de RRDTool para crear gráficos como este:
Ver posts relacionados para más ejemplos de RRDTool. Antes de llegar a la tabla de gradiente de temperatura que se muestra a continuación, realicé una serie de “pruebas” utilizando simples bucles de cuenta atrás/arriba incrementando los valores para RGB (Rojo, Verde, Azul.)
Código de color del gradiente azul
Generador de degradadoBroma de Schopenhauer#D7816A #BD4F6CCopy CSS2La bombilla rota de Edison#FFA69E #861657Copy CSS2La dimisión de Obama#5F0A87#A4508BCopy CSS4El calentamiento global#20BF55#01BAEFCopy CSS5El éxito Inmigrante#74F2CE#7CFFCBCopy CSS6La cámara rota de Casey#A40606#D98324Copy CSS7Las acciones de Jack Dorsey#380036#0CBABACopy CSS8La alegría del indigente#E58C8A#EEC0C6Copy CSS9Las funciones gratuitas de Spotify#80FF72#7EE8FACopy CSS10La frase de Hodor#7EE8FA#EEC0C6Copy CSS11La conquista de Marte#EC9F05#FF4E00Copy CSS12El corazón roto de Wozniak#9FA4C4#B3CDD1Copy CSS13Los ingresos por publicidad del ama de casa#9E768F#9FA4C4Copy CSS14Las mentiras del empresario Mentiras#8693AB#BDD4E7Copia CSS15País en desarrollo#B279A7#D387ABCopia CSS16Verdades abstractas#D387AB#E899DCCopia CSS17Elecciones fraudulentas#0D324D#7F5A83Copia CSS18La inspiración de Pollock#B91372#6B0F1ACopia CSS20Siguiente
Paleta de colores degradados
A este artículo le falta información sobre las técnicas para evitar el mach banding, incluyendo el dithering tal y como se practica habitualmente y se permite en CSS. Por favor, amplíe el artículo para incluir esta información. Pueden existir más detalles en la página de discusión. (Febrero 2021)
En los gráficos por ordenador, un gradiente de color especifica una gama de colores dependientes de la posición, normalmente utilizados para rellenar una región[1] Por ejemplo, muchos gestores de ventanas permiten especificar el fondo de la pantalla como un gradiente. Los colores producidos por un gradiente varían continuamente con la posición, produciendo transiciones de color suaves.
Un gradiente de color axial (a veces también llamado gradiente de color lineal) está especificado por dos puntos, y un color en cada punto. Los colores a lo largo de la línea que pasa por esos puntos se calculan utilizando la interpolación lineal, y luego se extienden perpendicularmente a esa línea. En los sistemas de imágenes digitales, los colores suelen interpolarse en un espacio de color RGB, a menudo utilizando valores de color RGB comprimidos por la gamma, en lugar de lineales. Tanto CSS como SVG admiten gradientes lineales[8][9].
