Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<h1>Colors</h1>
<h2>Lightening</h2>
<div class="color-strips">
<div class="color-strip color1 lighten">
<div class="color-sample original">#f3ac9f</div>
<div class="color-sample c10">10%</div>
<div class="color-sample c20">20%</div>
<div class="color-sample c30">30%</div>
<div class="color-sample c40">40%</div>
<div class="color-sample c50">50%</div>
<div class="color-sample c60">60%</div>
<div class="color-sample c70">70%</div>
<div class="color-sample c80">80%</div>
<div class="color-sample c90">90%</div>
<div class="color-sample c100">100%</div>
</div>
<div class="color-strip color2 lighten">
<div class="color-sample original">#5E2F46</div>
<div class="color-sample c10">10%</div>
<div class="color-sample c20">20%</div>
<div class="color-sample c30">30%</div>
<div class="color-sample c40">40%</div>
<div class="color-sample c50">50%</div>
<div class="color-sample c60">60%</div>
<div class="color-sample c70">70%</div>
<div class="color-sample c80">80%</div>
<div class="color-sample c90">90%</div>
<div class="color-sample c100">100%</div>
</div>
</div>
<h2>Mix with White</h2>
<div class="color-strips">
<div class="color-strip color1 mixwhite">
<div class="color-sample original">#f3ac9f</div>
<div class="color-sample c10">10%</div>
<div class="color-sample c20">20%</div>
<div class="color-sample c30">30%</div>
<div class="color-sample c40">40%</div>
<div class="color-sample c50">50%</div>
<div class="color-sample c60">60%</div>
<div class="color-sample c70">70%</div>
<div class="color-sample c80">80%</div>
<div class="color-sample c90">90%</div>
<div class="color-sample c100">100%</div>
</div>
<div class="color-strip color2 mixwhite">
<div class="color-sample original">#5E2F46</div>
<div class="color-sample c10">10%</div>
<div class="color-sample c20">20%</div>
<div class="color-sample c30">30%</div>
<div class="color-sample c40">40%</div>
<div class="color-sample c50">50%</div>
<div class="color-sample c60">60%</div>
<div class="color-sample c70">70%</div>
<div class="color-sample c80">80%</div>
<div class="color-sample c90">90%</div>
<div class="color-sample c100">100%</div>
</div>
</div>
<h2>Darkening</h2>
<div class="color-strips">
<div class="color-strip color1 darken">
<div class="color-sample original">#f3ac9f</div>
<div class="color-sample c10">10%</div>
<div class="color-sample c20">20%</div>
<div class="color-sample c30">30%</div>
<div class="color-sample c40">40%</div>
<div class="color-sample c50">50%</div>
<div class="color-sample c60">60%</div>
<div class="color-sample c70">70%</div>
<div class="color-sample c80">80%</div>
<div class="color-sample c90">90%</div>
<div class="color-sample c100">100%</div>
</div>
<div class="color-strip color2 darken">
<div class="color-sample original">#c75233</div>
<div class="color-sample c10">10%</div>
<div class="color-sample c20">20%</div>
<div class="color-sample c30">30%</div>
<div class="color-sample c40">40%</div>
<div class="color-sample c50">50%</div>
<div class="color-sample c60">60%</div>
<div class="color-sample c70">70%</div>
<div class="color-sample c80">80%</div>
<div class="color-sample c90">90%</div>
<div class="color-sample c100">100%</div>
</div>
</div>
<h2>Mix with Black</h2>
<div class="color-strips">
<div class="color-strip color1 mixblack">
<div class="color-sample original">#f3ac9f</div>
<div class="color-sample c10">10%</div>
<div class="color-sample c20">20%</div>
<div class="color-sample c30">30%</div>
<div class="color-sample c40">40%</div>
<div class="color-sample c50">50%</div>
<div class="color-sample c60">60%</div>
<div class="color-sample c70">70%</div>
<div class="color-sample c80">80%</div>
<div class="color-sample c90">90%</div>
<div class="color-sample c100">100%</div>
</div>
<div class="color-strip color2 mixblack">
<div class="color-sample original">#5E2F46</div>
<div class="color-sample c10">10%</div>
<div class="color-sample c20">20%</div>
<div class="color-sample c30">30%</div>
<div class="color-sample c40">40%</div>
<div class="color-sample c50">50%</div>
<div class="color-sample c60">60%</div>
<div class="color-sample c70">70%</div>
<div class="color-sample c80">80%</div>
<div class="color-sample c90">90%</div>
<div class="color-sample c100">100%</div>
</div>
</div>
<h2>Blendy blendy</h2>
<div class="color-strips">
<div class="color-strip blendy">
<div class="color-sample c0">0%</div>
<div class="color-sample c10">10%</div>
<div class="color-sample c20">20%</div>
<div class="color-sample c30">30%</div>
<div class="color-sample c40">40%</div>
<div class="color-sample c50">50%</div>
<div class="color-sample c60">60%</div>
<div class="color-sample c70">70%</div>
<div class="color-sample c80">80%</div>
<div class="color-sample c90">90%</div>
<div class="color-sample c100">100%</div>
</div>
</div>
.color-strips {
display: table;
font-size: 0.9rem;
table-layout: fixed;
width: 100%; }
.color-strip {
display: table-row; }
.color-sample {
display: table-cell;
padding: 1rem 0.5rem;
text-align: center;
vertical-align: middle; }
.color1.lighten .original {
background-color: #f3ac9f; }
.color1.lighten .c10 {
background-color: #f9d3cc; }
.color1.lighten .c20 {
background-color: #fefafa; }
.color1.lighten .c30 {
background-color: white; }
.color1.lighten .c40 {
background-color: white; }
.color1.lighten .c50 {
background-color: white; }
.color1.lighten .c60 {
background-color: white; }
.color1.lighten .c70 {
background-color: white; }
.color1.lighten .c80 {
background-color: white; }
.color1.lighten .c90 {
background-color: white; }
.color1.lighten .c100 {
background-color: white; }
.color1.mixwhite .original {
background-color: #f3ac9f; }
.color1.mixwhite .c10 {
background-color: #f4b4a9; }
.color1.mixwhite .c20 {
background-color: #f5bdb2; }
.color1.mixwhite .c30 {
background-color: #f7c5bc; }
.color1.mixwhite .c40 {
background-color: #f8cdc5; }
.color1.mixwhite .c50 {
background-color: #f9d6cf; }
.color1.mixwhite .c60 {
background-color: #faded9; }
.color1.mixwhite .c70 {
background-color: #fbe6e2; }
.color1.mixwhite .c80 {
background-color: #fdeeec; }
.color1.mixwhite .c90 {
background-color: #fef7f5; }
.color1.mixwhite .c100 {
background-color: white; }
.color1.darken {
color: white; }
.color1.darken .original {
background-color: #f3ac9f; }
.color1.darken .c10 {
background-color: #ed8572; }
.color1.darken .c20 {
background-color: #e85e44; }
.color1.darken .c30 {
background-color: #dd3a1c; }
.color1.darken .c40 {
background-color: #b02e16; }
.color1.darken .c50 {
background-color: #832210; }
.color1.darken .c60 {
background-color: #55160b; }
.color1.darken .c70 {
background-color: #280a05; }
.color1.darken .c80 {
background-color: black; }
.color1.darken .c90 {
background-color: black; }
.color1.darken .c100 {
background-color: black; }
.color1.mixblack {
color: white; }
.color1.mixblack .original {
background-color: #f3ac9f; }
.color1.mixblack .c10 {
background-color: #db9b8f; }
.color1.mixblack .c20 {
background-color: #c28a7f; }
.color1.mixblack .c30 {
background-color: #aa786f; }
.color1.mixblack .c40 {
background-color: #92675f; }
.color1.mixblack .c50 {
background-color: #7a5650; }
.color1.mixblack .c60 {
background-color: #614540; }
.color1.mixblack .c70 {
background-color: #493430; }
.color1.mixblack .c80 {
background-color: #312220; }
.color1.mixblack .c90 {
background-color: #181110; }
.color1.mixblack .c100 {
background-color: black; }
.color2.lighten .original {
background-color: #5E2F46; }
.color2.lighten .c10 {
background-color: #80405f; }
.color2.lighten .c20 {
background-color: #a25179; }
.color2.lighten .c30 {
background-color: #b76f92; }
.color2.lighten .c40 {
background-color: #c891ac; }
.color2.lighten .c50 {
background-color: #d9b3c6; }
.color2.lighten .c60 {
background-color: #ead5df; }
.color2.lighten .c70 {
background-color: #fbf7f9; }
.color2.lighten .c80 {
background-color: white; }
.color2.lighten .c90 {
background-color: white; }
.color2.lighten .c100 {
background-color: white; }
.color2.mixwhite .original {
background-color: #5E2F46; }
.color2.mixwhite .c10 {
background-color: #6e4459; }
.color2.mixwhite .c20 {
background-color: #7e596b; }
.color2.mixwhite .c30 {
background-color: #8e6d7e; }
.color2.mixwhite .c40 {
background-color: #9e8290; }
.color2.mixwhite .c50 {
background-color: #af97a3; }
.color2.mixwhite .c60 {
background-color: #bfacb5; }
.color2.mixwhite .c70 {
background-color: #cfc1c8; }
.color2.mixwhite .c80 {
background-color: #dfd5da; }
.color2.mixwhite .c90 {
background-color: #efeaed; }
.color2.mixwhite .c100 {
background-color: white; }
.color2.darken {
color: white; }
.color2.darken .original {
background-color: #5E2F46; }
.color2.darken .c10 {
background-color: #3c1e2d; }
.color2.darken .c20 {
background-color: #1a0d13; }
.color2.darken .c30 {
background-color: black; }
.color2.darken .c40 {
background-color: black; }
.color2.darken .c50 {
background-color: black; }
.color2.darken .c60 {
background-color: black; }
.color2.darken .c70 {
background-color: black; }
.color2.darken .c80 {
background-color: black; }
.color2.darken .c90 {
background-color: black; }
.color2.darken .c100 {
background-color: black; }
.color2.mixblack {
color: white; }
.color2.mixblack .original {
background-color: #5E2F46; }
.color2.mixblack .c10 {
background-color: #552a3f; }
.color2.mixblack .c20 {
background-color: #4b2638; }
.color2.mixblack .c30 {
background-color: #422131; }
.color2.mixblack .c40 {
background-color: #381c2a; }
.color2.mixblack .c50 {
background-color: #2f1823; }
.color2.mixblack .c60 {
background-color: #26131c; }
.color2.mixblack .c70 {
background-color: #1c0e15; }
.color2.mixblack .c80 {
background-color: #13090e; }
.color2.mixblack .c90 {
background-color: #090507; }
.color2.mixblack .c100 {
background-color: black; }
.blendy {
color: white; }
.blendy .c0 {
background-color: #5e2f46; }
.blendy .c10 {
background-color: #6d3c4f; }
.blendy .c20 {
background-color: #7c4858; }
.blendy .c30 {
background-color: #8b5561; }
.blendy .c40 {
background-color: #9a616a; }
.blendy .c50 {
background-color: #a96e73; }
.blendy .c60 {
background-color: #b77a7b; }
.blendy .c70 {
background-color: #c68784; }
.blendy .c80 {
background-color: #d5938d; }
.blendy .c90 {
background-color: #e4a096; }
.blendy .c100 {
background-color: #f3ac9f; }
$color1: #f3ac9f;
$color2: #5E2F46;
.color-strips {
display: table;
font-size: 0.9rem;
table-layout: fixed;
width: 100%;
}
.color-strip {
display: table-row;
}
.color-sample {
display: table-cell;
padding: 1rem 0.5rem;
text-align: center;
vertical-align: middle;
}
.color1 {
&.lighten {
.original { background-color: $color1; }
.c10 { background-color: lighten($color1,10%); }
.c20 { background-color: lighten($color1,20%); }
.c30 { background-color: lighten($color1,30%); }
.c40 { background-color: lighten($color1,40%); }
.c50 { background-color: lighten($color1,50%); }
.c60 { background-color: lighten($color1,60%); }
.c70 { background-color: lighten($color1,70%); }
.c80 { background-color: lighten($color1,80%); }
.c90 { background-color: lighten($color1,90%); }
.c100 { background-color: lighten($color1,100%); }
}
&.mixwhite {
.original { background-color: $color1; }
.c10 { background-color: mix(white, $color1, 10%); }
.c20 { background-color: mix(white, $color1, 20%); }
.c30 { background-color: mix(white, $color1, 30%); }
.c40 { background-color: mix(white, $color1, 40%); }
.c50 { background-color: mix(white, $color1, 50%); }
.c60 { background-color: mix(white, $color1, 60%); }
.c70 { background-color: mix(white, $color1, 70%); }
.c80 { background-color: mix(white, $color1, 80%); }
.c90 { background-color: mix(white, $color1, 90%); }
.c100 { background-color: mix(white, $color1, 100%); }
}
&.darken {
color: white;
.original { background-color: $color1; }
.c10 { background-color: darken($color1,10%); }
.c20 { background-color: darken($color1,20%); }
.c30 { background-color: darken($color1,30%); }
.c40 { background-color: darken($color1,40%); }
.c50 { background-color: darken($color1,50%); }
.c60 { background-color: darken($color1,60%); }
.c70 { background-color: darken($color1,70%); }
.c80 { background-color: darken($color1,80%); }
.c90 { background-color: darken($color1,90%); }
.c100 { background-color: darken($color1,100%); }
}
&.mixblack {
color: white;
.original { background-color: $color1; }
.c10 { background-color: mix(black, $color1, 10%); }
.c20 { background-color: mix(black, $color1, 20%); }
.c30 { background-color: mix(black, $color1, 30%); }
.c40 { background-color: mix(black, $color1, 40%); }
.c50 { background-color: mix(black, $color1, 50%); }
.c60 { background-color: mix(black, $color1, 60%); }
.c70 { background-color: mix(black, $color1, 70%); }
.c80 { background-color: mix(black, $color1, 80%); }
.c90 { background-color: mix(black, $color1, 90%); }
.c100 { background-color: mix(black, $color1, 100%); }
}
}
.color2 {
&.lighten {
.original { background-color: $color2; }
.c10 { background-color: lighten($color2,10%); }
.c20 { background-color: lighten($color2,20%); }
.c30 { background-color: lighten($color2,30%); }
.c40 { background-color: lighten($color2,40%); }
.c50 { background-color: lighten($color2,50%); }
.c60 { background-color: lighten($color2,60%); }
.c70 { background-color: lighten($color2,70%); }
.c80 { background-color: lighten($color2,80%); }
.c90 { background-color: lighten($color2,90%); }
.c100 { background-color: lighten($color2,100%); }
}
&.mixwhite {
.original { background-color: $color2; }
.c10 { background-color: mix(white, $color2, 10%); }
.c20 { background-color: mix(white, $color2, 20%); }
.c30 { background-color: mix(white, $color2, 30%); }
.c40 { background-color: mix(white, $color2, 40%); }
.c50 { background-color: mix(white, $color2, 50%); }
.c60 { background-color: mix(white, $color2, 60%); }
.c70 { background-color: mix(white, $color2, 70%); }
.c80 { background-color: mix(white, $color2, 80%); }
.c90 { background-color: mix(white, $color2, 90%); }
.c100 { background-color: mix(white, $color2, 100%); }
}
&.darken {
color: white;
.original { background-color: $color2; }
.c10 { background-color: darken($color2,10%); }
.c20 { background-color: darken($color2,20%); }
.c30 { background-color: darken($color2,30%); }
.c40 { background-color: darken($color2,40%); }
.c50 { background-color: darken($color2,50%); }
.c60 { background-color: darken($color2,60%); }
.c70 { background-color: darken($color2,70%); }
.c80 { background-color: darken($color2,80%); }
.c90 { background-color: darken($color2,90%); }
.c100 { background-color: darken($color2,100%); }
}
&.mixblack {
color: white;
.original { background-color: $color2; }
.c10 { background-color: mix(black, $color2, 10%); }
.c20 { background-color: mix(black, $color2, 20%); }
.c30 { background-color: mix(black, $color2, 30%); }
.c40 { background-color: mix(black, $color2, 40%); }
.c50 { background-color: mix(black, $color2, 50%); }
.c60 { background-color: mix(black, $color2, 60%); }
.c70 { background-color: mix(black, $color2, 70%); }
.c80 { background-color: mix(black, $color2, 80%); }
.c90 { background-color: mix(black, $color2, 90%); }
.c100 { background-color: mix(black, $color2, 100%); }
}
}
.blendy {
color: white;
.c0 { background-color: mix($color1, $color2, 0%); }
.c10 { background-color: mix($color1, $color2, 10%); }
.c20 { background-color: mix($color1, $color2, 20%); }
.c30 { background-color: mix($color1, $color2, 30%); }
.c40 { background-color: mix($color1, $color2, 40%); }
.c50 { background-color: mix($color1, $color2, 50%); }
.c60 { background-color: mix($color1, $color2, 60%); }
.c70 { background-color: mix($color1, $color2, 70%); }
.c80 { background-color: mix($color1, $color2, 80%); }
.c90 { background-color: mix($color1, $color2, 90%); }
.c100 { background-color: mix($color1, $color2, 100%); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment