Skip to content

Instantly share code, notes, and snippets.

@epelc
Last active August 29, 2015 14:11
Show Gist options
  • Save epelc/57a0f42fbc0b7d916ac5 to your computer and use it in GitHub Desktop.
Save epelc/57a0f42fbc0b7d916ac5 to your computer and use it in GitHub Desktop.
Generate material design color palette from a base color
var bases = [{
alpha: 0.13,
name: "50"
}, {
alpha: 0.31,
name: "100"
}, {
alpha: 0.50,
name: "200"
}, {
alpha: 0.7,
name: "300"
}, {
alpha: 0.85,
name: "400"
}, {
alpha: 1,
name: "500"
}, {
alpha: 0.91,
name: "600"
}, {
alpha: 0.81,
name: "700"
}, {
alpha: 0.71,
name: "800"
}, {
alpha: 0.52,
name: "900"
}]
function generateMaterialColors(r, g, b) {
var colors = {}
for (var i = 0; i < bases.length; i++) {
colors[bases[i].name] = 'rgba(' + r + ',' + g + ',' + b + ',' + bases[i].alpha + ')'
}
return colors
}
// Note this doesnt generate accent colors currently
// Also the darker colors a bit off from the material design color templates
var brandColors = $mdThemingProvider.extendPalette('green', generateMaterialColors(21, 120, 80))
// make a palette
$mdThemingProvider.definePalette('brand', brandColors)
// make a theme
$mdThemingProvider.theme('myTheme')
.primaryColor('brand')
.accentColor('brand')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment