html - Find percentage of color with respect to another color in agularjs -
i need change color of div element based on color of div element.
ex.
<div style="background-color:{{color_primary}};"> in div, color should 70% (light shade) of color_primary
<div style="background-color:{{this color 70% of color_primary}};"> how can achieve it? in advance.
you can applying percentage every rgb component, similar how sass , less helpers do. then, can use modify color property inside angularjs application.
the following example demonstrate usage of simple api i've created issue exposed service in colorized module.
disclaimer, it's simple module demonstrate how can done, means i'm not catching errors , exceptions thrown. regardless, it's beautiful module , i'm proud of :{d
usage
angular.module('myapp', ['colorized']) .controller('mycontroller', function ($colors) { var $ctrl = this; $ctrl.mylightencolor = $colors.lighten('#000000', 50); // 50% gray }); the colorized module plus simple example:
// module (function() { angular.module('colorized', []) .service('$colors', function() { this.lighten = function(src, percent) { var src = normalizecolor(src); if (!percent) return src; var srcrgb = colorasarray(src), // may want change keep different // range, example, range between actual // collor , full white collor, it's lightfactor = (255 * percent) / 100, newrgb = { r: limited(srcrgb.r + lightfactor, 255), g: limited(srcrgb.g + lightfactor, 255), b: limited(srcrgb.b + lightfactor, 255), }; return [ padrgbdigit(newrgb.r.tostring(16)), padrgbdigit(newrgb.g.tostring(16)), padrgbdigit(newrgb.b.tostring(16)) ].join(''); } function normalizecolor(color) { if (color == undefined) color = '000000'; if (color[0] == '#') color = color.substring(1); return color; } function colorasarray(color) { return { r: parseint(color.substring(0, 2), 16), g: parseint(color.substring(2, 4), 16), b: parseint(color.substring(4, 8), 16), }; } function limited(value, limit) { return math.ceil(value > limit ? limit : value); } function padrgbdigit(str) { return ('00' + str).slice(-2); } }); })(); // app (function() { angular.module('myapp', ['colorized']) .controller('mycontroller', function($scope, $colors) { $scope.mysourcecolor = '#000000'; $scope.mypercentage = 50; $scope.mylightcolor = function() { return '#' + $colors.lighten($scope.mysourcecolor, $scope.mypercentage); }; }); angular.element(document).ready(function() { angular.bootstrap(document, ['myapp']); }); })();<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <div ng-controller="mycontroller"> <input type="color" ng-model="mysourcecolor"> <input ng-style="{'background-color': mylightcolor()}" type="range" ng-model="mypercentage" min="0" max="100"> <span> {{ mylightcolor() }} </span> </div>