Comment générer une palette similaire à celle de la conception matérielle de Google?

Les spécifications de conception des matériaux de Google comprennent des palettes de couleurs :

Commençant par une couleur primaire de base, qu’ils désignent par "500", ils disposent alors d’une gamme d’étapes incrémentielles d’ombre, plus brillantes et plus sombres, pour créer une gamme d’environ 10 couleurs. Le plus clair est désigné "50" et est presque blanc, et le plus sombre, "900" est presque noir, mais les deux conservent une partie de la couleur de base.

Je n'arrive pas à déterminer comment les incréments sont calculés. J'ai essayé ce générateur d'échantillons en ligne , mais je n'arrive pas à composer le numéro.

Je pense que c'est juste une question de réglage de la luminosité de haut en bas à partir de la couleur de base "500", et je suppose qu'une valeur de "0" serait blanc pur et "1000" serait noir pur, mais les gammes de Google La palette semble avoir plus de saturation qu'une simple plage de luminosité.

Est-ce que quelqu'un sait quel algorithme ou processus je peux utiliser pour prendre une couleur de base et générer une palette en ligne avec les palettes de Google?

J'ai créé ce petit outil CSS3 / AngularJS pour un projet de génération de palettes de couleurs de matériau. Vous pouvez entrer votre couleur 500 hex et utiliser un outil externe tel que ColorZilla pour obtenir les valeurs de couleur à partir de cet emplacement. De plus, les plus légers sont exactement ceux utilisés par Google, mais les plus sombres sont un peu décalés.

mcg.mbitson.com

Les palettes Google sont monochromes . Qui conserve le même rapport RVB en décalant la luminosité et la saturation vers le haut ou le bas. Pour ce faire, vous devez convertir la valeur RVB en représentation HSL (Teinte, Saturation, Luminosité), modifier la luminosité et la saturation, puis reconvertir si nécessaire. Il est possible de le conserver dans l'espace RVB lors du calcul, mais les calculs sont trop compliqués (pour que je puisse les comprendre ou les expliquer). HSL a été créé pour le mélange de couleurs traditionnel (il est plus facile pour nous d'y penser).

Si votre objectif est de créer des palettes CSS, vous pouvez conserver la couleur dans HSL background-color: hsl(0,100%, 50%);.

Vous pouvez le faire manuellement dans Photoshop à l'aide du sélecteur de couleurs. Le HSB est pour Hue Saturation Brightness (synonyme de HSL, même chose). Choisissez une teinte que vous aimez et modifiez la saturation et la luminosité d'une valeur constante. Dans l'image ci-dessous, S = 54 et B = 77, augmentez de 5% avec 54 + 54 * 0.05et 77 + 77 * 0.05. Ou pour descendreS - S * 0.05

Note latérale pour clarifier entre Hex et RGB. Le code HEX # FFEB3B à 6 chiffres correspond en réalité à 3 chiffres distincts, représentant le format RVB.

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3Bvous donne la conversion des valeurs HEX en valeurs décimales red:255 green:235 blue:59 OR rgb(255,235,59).

Il existe des algorithmes pour convertir RVB en HSL si vous les voulez vraiment sur Wikipedia, mais le moyen le plus simple consiste à utiliser une bibliothèque de couleurs. Cet exemple crée une palette monochromatique avec please.js. Il comporte également d'autres algorithmes permettant de créer des palettes complémentaires ou agréables. Un peu comme kuler.adobe, qui bouge aussi.

Please.make_scheme(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]

Avez-vous essayé de travailler avec Color Wheel d'Adobe? Je pense que c'est un peu plus flexible que l'outil SlayerOffice que vous utilisez.

https://color.adobe.com/

Pour votre cas exact, choisissez "Shades" et essayez de vous amuser à partir de là. Cela ne générera pas une conception matérielle semblable à celle des échantillons, mais c'est un début.

Vous pouvez simplement télécharger les palettes vers lesquelles Google donne un lien sur le site? Puisqu'il te donne toutes les couleurs?

Google Color Swatches Zip

Pour générer un dégradé de couleurs / palette à partir d'une couleur donnée, vous pouvez utiliser essentiellement l'algorithme suivant.

1. Décidez de la nuance minimum et maximum que vous voulez dans votre palette
2. Diviser "l'espace de couleur" entre ces couleurs en partition égale (voir ci-dessous)
3. Couleurs de sortie sur ces étapes

Pour diviser l’espace colorimétrique, commencez par convertir les couleurs de votre HEX en RVB. Sélectionnez des valeurs dans chaque canal. Disons que vous avez color1 (r1, g1, b1) et color2 (r2, g2, b2). Et vous voulez 3 couleurs entre color1 et color2 , alors vous pouvez faire quelque chose comme suit

all_colors = []
steps = no_of_colors + 1
rdelta, gdelta, bdelta = (r2 - r1) / steps, (g2 - g1) / steps, (b2 - b1) / steps
for step in range(steps - 1):
    r1 += rdelta
        g1 += gdelta
        b1 += bdelta
all_colors.append((r1, g1, b1)) 

N'oubliez pas de convertir les valeurs RVB entre (0 et 1).

Dans votre cas, vous pouvez prendre la couleur de base et diviser l’espace colorimétrique entre white to basecoloret basecolor to black. Vous pouvez ajuster vos pas en fonction de vos besoins.

Enfin, je vais faire une promotion sans vergogne de la bibliothèque python que j'ai créée, simplement parce que cela concerne la question de la génération de palette de couleurs. Cela s'appelle SecretColors . Vous pouvez générer vos propres palettes de couleurs, dégradés ou utiliser des palettes de couleurs standard telles que IBM, Material Design, ColorBrewer ou Clarity.