Escoge los colores precisos para tu sitio web o aplicación con Material Palette, Colores basados en Material Design.

Share on Pinterest
Comparte con tus amigos










Enviar

¿Quieres que tu sitio web tenga un diseño actual basado en material design? Pues esta web www.materialpalette.com te puede ayudar elegir los colores adecuados.

Antes de comenzar con dicha web, es necesario saber qué es material design.

¿Qué es material design?

Es un lenguaje de diseño desarrollado por google y anunciado a mediados de 2014.  El objetivo es obtener un diseño limpio, sin sobresaturarlo, con sombras e iluminación, transiciones, rellenos.

Para los amantes de Android, este concepto es familiar, ya que el principal exponente de este nuevo diseño es este sistema operativo propietario de Google. Es una recomendación y se ha establecido a partir de la versión 5 más conocida como Android Lollipop. De hecho actualmente muchas aplicaciones están adoptando progresivamente este nuevo diseño.

Material design abarca multitud de cosas a considerar, desde los colores, iconos hasta la disposición de los botones, su forma. El tema que nos importa es el del color, se buscan colores yuxtapuestos, apagados, con sombras y reflejos brillantes

Desde mi punto de vista, este diseño se puede trasladar a las páginas web dándoles un toque más actual y novedoso, y por ello os presento esta interesante web. De este modo, si tenemos un diseño responsive, podemos dar la apariencia de nuestra web como si se tratara de una aplicación nativa para Android cuando navegamos a través del móvil.

¿Qué colores nos ofrece materialpalette.com?

El objetivo de esta web es facilitarnos la elección de colores inspirados en material design, proporcionándonos una paleta de colores que combinan entre ellos.

El funcionamiento es simple: tenemos que elegir dos colores, por ejemplo el principal que queremos para nuestra web y otro secundario para otro tipo de funcionalidad. Por ejemplo el verde lima y marrón.

Material Palette colores basados en Google Material Design

Una vez elegidos, automáticamente se genera una paleta personalizada según los colores elegidos.

Material Palette colores para sitios web y aplicaciones

En la paleta aparecen distintos colores con una breve descripción: tenemos siempre un color más oscuro, otro más claro, el principal, otros para distintos tipos de texto según su importancia, otro de división y para acentuar algún aspecto importante como puede ser un botón.

En la imagen anterior podemos ver como tenemos varias opciones de descarga: svg, xml, sass, less, png e incluso en código css, ya preparado para ponerlo en nuestro sitio web.

Os dejo una web con toda la información de material design:

www.google.com/design/spec/material-design/introduction.html

Share on Pinterest
Comparte con tus amigos










Enviar

Enrique de la Torre

Twitter Google + Linkedin Acerca de

11 respuestas a “Material Palette colores basados en Google Material Design”

  1. Muy útil! Gracias por compartirlo!

  2. Jhonattan Pulido dice:

    Dice que la pagina no existe

  3. Snoopy diaz dice:

    Genial! Es muy atractiva y moderna esa interfaz.

  4. Pedro Mejia dice:

    Dios te bendiga mi hermano estoy buscando una herramienta para hacer un logo para mi sitio web ayudame por favor sipuedes

    • Emilio González dice:

      Hola. Falconmasters ya tiene un tutorial sobre como hacer un logo en Photoshop CS6, le puedes echar un vistazo y puedes hacer el tuyo guiandote con las técnicas que el utiliza. Saludos.

  5. Juan Henriquez dice:

    Hola, que videos y tutoriales tan buenos tienes, contigo he aprendido mucho.
    Una pregunta, ¿Que tema utilizas para Sublime Text y que Plugins me recomiendas aparte de Emmet?.

  6. Smaylin Hernandez H. dice:

    Soy Principiante Pueden Ayudarme A Usar Material Palette

  7. Karen Mossetto dice:

    Muy bueno !!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso