<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