¿Cómo crear una paleta personalizada con color personalizado para la aplicación Material Design?

¿Cómo podría generar una paleta de diseño de materiales personalizada como la siguiente?

Color del pallete

¿Hay una herramienta alrededor o algo?

Parece que alguien pidió esto en Diseño Gráfico: enlace aquí .

La respuesta aceptada le llevará al sitio de autor que es lo que estaba buscando ( una herramienta que genera su paleta para usted , GG a él!).

Además, la respuesta con el voto más alto explica muy bien cómo se hacen las paleta, IMHO.

Ambos satisfacían mi curiosidad.

ACTUALIZACIÓN 22/06/2016

Hay una nueva opción disponible ahora en este enlace .

ACTUALIZACIÓN 03/08/2016

Creo que esta respuesta y relativa app merecen una mención también.

UPDATE 07/04/17

Después de 2 años, Big G lanzó esta herramienta: https://material.io/ .

He analizado de cerca la paleta de colores de diseño de materiales y he sacado algunas conclusiones.

No hay programa-lógica en la paleta de colores recomendada por Google, es absolutamente hecho a mano. Muestras fueron escogidas manualmente por el diseñador, pero tienen algún patrón. Hablaré brevemente de esta magia.

Tenemos un color de base primario personalizado (índice 500). Para generar una paleta personalizada, mezcle el color base con blanco (#FFFFFF) en las tasas de color base: 12%, 30%, 50%, 70%, 85% (índices 50-400). A continuación mezcle el color base con algunos "color oscuro profundo" en las tasas de color base cerca de: 87%, 70%, 54%, 25%. En la paleta de colores de material, este "color oscuro profundo" es elegido manualmente por el diseñador, pero calculo este color multiplicando el color base a sí mismo siempre y cuando el resultado tenga una diferencia de contraste aceptable.

Para los colores de base de acento (índice A200) debe utilizar el color en una armonía tríada de color con el color base (índice 500). Otros colores de acento tienen una saturación alta (0.75 <S <= 1) y se seleccionan individualmente en variaciones de luminosidad.

Implementé esta lógica en el generador de paleta de materiales de aplicación gratuita de Android, que puede crear y demostrar una paleta de colores personalizada de diseño de materiales en la interfaz de usuario de aplicación real.

Capturas de pantalla

Hay un sitio web que puede utilizar para generar una paleta de diseño de materiales.

Para usarlo primero seleccione dos colores:

Paleta de materiales

A continuación, echa un vistazo a su paleta sugerida:

Su paleta

He encontrado que aquí se puede generar un pallete de color con todo el color de acento (falta en la respuesta original)

Paleta de colores

Debe comprobar la API de la paleta , proporcionada por Google. Está incluido en la biblioteca de soporte . De lo que entendí de tu pregunta, esta biblioteca hace exactamente lo que estás buscando.

Si desea un ejemplo de código para eso, puede utilizar este código:

public int[] GetMaterialColors(String color){ int[] result = new int[14]; result[0] = shadeColor(color, 0.9 ); //----> 50 result[1] = shadeColor(color, 0.7 ); //----> 100 result[2] = shadeColor(color, 0.5 ); //----> 200 result[3] = shadeColor(color, 0.333 ); //----> 300 result[4] = shadeColor(color, 0.166 ); //----> 400 result[5] = shadeColor(color, 0 ); //----> 500 result[6] = shadeColor(color, -0.125); //----> 600 result[7] = shadeColor(color, -0.25 ); //----> 700 result[8] = shadeColor(color, -0.375); //----> 800 result[9] = shadeColor(color, -0.5 ); //----> 900 result[10] = shadeColor(color, 0.7 ); //----> A100 result[11] = shadeColor(color, 0.5 ); //----> A200 result[12] = shadeColor(color, 0.166); //----> A400 result[13] = shadeColor(color, -0.25); //----> A700 return result; } private static int shadeColor(String color, double percent) { long f = Long.parseLong(color.substring(1), 16); double t = percent < 0 ? 0 : 255; double p = percent < 0 ? percent * -1 : percent; long R = f >> 16; long G = f >> 8 & 0x00FF; long B = f & 0x0000FF; int red = (int) (Math.round((t - R) * p) + R); int green = (int) (Math.round((t - G) * p) + G); int blue = (int) (Math.round((t - B) * p) + B); return Color.rgb(red, green, blue); } 

Si está utilizando android studio entonces usted puede encontrar el color material más cercano de su color dado.

Introduzca aquí la descripción de la imagen

  • Fondo degradado en la barra de herramientas temática material
  • Lista de materiales de Android Divisores
  • Deslizar hacia abajo para actualizar el diseño del material
  • ¿Cómo hacer que el menú emergente de desbordamiento evite obstruir la barra de acción?
  • Creación de un botón de acción flotante con menús de subacción animados
  • ¿Cuál es la diferencia entre la barra de acción y la recién introducida barra de herramientas?
  • Vista de Scrollview anidada + Recycler
  • Estilo de la barra de herramientas de Android Spinner
  • ¿Cómo puedo eliminar el relleno superior innecesario de la vista de navegación?
  • ¿Cómo hacer transparente la barra de herramientas?
  • ¿Cómo puedo añadir elevación (sombra) a mi BottomNavigationView. No viene por defecto
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.