Une petite fonction javascript permettant de retourner la valeur hexadécimale sous la forme #xxxxxx d’une couleur mélangée de deux autres couleurs avec un pourcentage représentant la part de chaque couleur. Ce pourcentage est un nombre entre 0 et 1. Par exemple, un pourcentage de 40%, soit 0.4, donnera une couleur ayant 40% de la première couleur et 60% de la seconde.
Démo
Arguments
Les couleurs entrées en arguments doivent être données en hexadécimale sous la forme #xxxxxx, le pourcentage est un nombre compris entre 0 et 1, la couleur mélangée est donnée en hexadécimale.
Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/** * Blend two colors with percentage * @param string hex color1 => the first color, hex (default: #000000) * @param string hex color2 => the second color, hex (default: #ffffff) * @param decimal percent => percentage between 0 and 1 (default: 0.5) * @returns string hex color, the blended color */ function blend_colors(color1, color2, percent) { var color = []; color[0] = color1 || '#000000'; color[1] = color2 || '#ffffff'; percent = percent || 0.5; // Validates input, make sure for valid percentage and hex colors if (percent > 1 || percent < 0) throw new Error('Percentage must be between 0 and 1'); color.forEach((hue, index) => { if (hue[0] != '#' || hue.length != 7) throw new Error(hue + 'is not valid hex, ex: #123456'); // Input is valid, convert color to rgb color[index] = [parseInt(hue[1] + hue[2], 16), parseInt(hue[3] + hue[4], 16), parseInt(hue[5] + hue[6], 16)]; }); // Blends to color[2] color[2] = []; for (let i = 0; i < 3; i++ ) { color[2][i] = percent * color[0][i] + (1 - percent) * color[1][i]; } // Converts to hex const int2hex = num => { let hex = Math.round(num).toString(16); if (hex.length == 1) hex = '0' + hex; return hex; } return '#' + int2hex(color[2][0]) + int2hex(color[2][1]) + int2hex(color[2][2]); } |
Et hop, une jolie couleur mélangée. J’avais besoin d’une telle fonction pour faire varier les couleur d’étoiles lors de la notation d’un article à l’aide d’un système d’évaluation affichant 5 étoiles.
