mix.html

	<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>

style.css

.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; }

style.scss

$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%); }
}