Skip to content

Instantly share code, notes, and snippets.

@rodu

rodu/palette-generator.scss

Last active August 17, 2018 14:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rodu/8cbacd5a6355b5a93f2691ad2807e012 to your computer and use it in GitHub Desktop.
Save rodu/8cbacd5a6355b5a93f2691ad2807e012 to your computer and use it in GitHub Desktop.
Download ZIP
Given a base color, Generates a color palette with SASS based on the idea of Material Design.
Raw
palette-generator.scss
.palette-container {
display: flex;
margin: 20px;
}
.color-name {
font-size: 12pt;
font-weight: bold;
margin: 20px;
}
.color-item {
width: 100px;
height: 100px;
color: #fff;
text-align: center;
span {
display: inline-block;
margin-top: 50%;
}
}
@mixin create-palette($color-class, $base-color, $variation) {
.#{$color-class}-500 {
background-color: $base-color;
}
@for $i from 1 through 4 {
.#{$color-class}-#{(5 - $i) * 100} {
background-color: lighten($base-color, $variation * $i);
}
.#{$color-class}-#{(5 + $i) * 100} {
background-color: darken($base-color, $variation * $i);
}
}
}
$brand-primary: #475c99;
$brand-secondary: #f24337;
$palette-variation: 7.5;
@include create-palette('brand-primary', $brand-primary, $palette-variation);
@include create-palette('brand-secondary', $brand-secondary, $palette-variation);
Raw
palette.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="color-name">brand-primary</div>
<div class="palette-container">
<div class="color-item brand-primary-900"><span>900</span></div>
<div class="color-item brand-primary-800"><span>800</span></div>
<div class="color-item brand-primary-700"><span>700</span></div>
<div class="color-item brand-primary-600"><span>600</span></div>
<div class="color-item brand-primary-500"><span>500</span></div>
<div class="color-item brand-primary-400"><span>400</span></div>
<div class="color-item brand-primary-300"><span>300</span></div>
<div class="color-item brand-primary-200"><span>200</span></div>
<div class="color-item brand-primary-100"><span>100</span></div>
</div>
<div class="color-name">brand-secondary</div>
<div class="palette-container">
<div class="color-item brand-secondary-900"><span>900</span></div>
<div class="color-item brand-secondary-800"><span>800</span></div>
<div class="color-item brand-secondary-700"><span>700</span></div>
<div class="color-item brand-secondary-600"><span>600</span></div>
<div class="color-item brand-secondary-500"><span>500</span></div>
<div class="color-item brand-secondary-400"><span>400</span></div>
<div class="color-item brand-secondary-300"><span>300</span></div>
<div class="color-item brand-secondary-200"><span>200</span></div>
<div class="color-item brand-secondary-100"><span>100</span></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment