<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
h1{
text-align: center;
}
.wrap{
width: 1000px;
height: 300px;
display: flex;
justify-content: space-between;
margin: 10px auto;
}
.item{
width: 190px;
height: 100%;
position: relative;
border-radius: 3px;
}
.item>div{
position: resolute;
width: 100%;
height: 100px;
text-align: center;
background: #41464C;
color: white;
padding-top: 20px;
box-sizing: border-box;
margin-top: 200px;
}
.item>div span{
display:block
}
</style>
</head>
<body>
<h1>调色板</h1>
<div class="wrap">
<div class="item" style="background:linear-gradient(to right,#DB334A 50%,#c22e42 51%);">
<div>
<span>RUBY</span>
<span>#DB334A</span>
<span>#c22e42</span>
</div>
</div>
<div class="item" style="background:linear-gradient(to right,#ED5565 50%,#d54c5b 51%);">
<div>
<span>GRAPEFRUIT</span>
<span>#ED5565</span>
<span>#d54c5b</span>
</div>
</div>
<div class="item" style="background:linear-gradient(to right,#FC6E51 50%,#e26349 51%);">
<div>
<span>BITTERSWEET</span>
<span>#FC6E51</span>
<span>#e26349</span>
</div>
</div>
<div class="item" style="background:linear-gradient(to right,#FFCE54 50%,#e5b94b 51%);">
<div>
<span>SUNFLOWER</span>
<span>#FFCE54</span>
<span>#e5b94b</span>
</div>
</div>
<div class="item" style="background:linear-gradient(to right,#EBCE4D 50%,#d0b945 51%);">
<div>
<span>STRAW</span>
<span>#EBCE4D</span>
<span>#d0b945</span>
</div>
</div>
</div>
<div class="wrap">
<div class="item" style="background:linear-gradient(to right,#9FD574 50%,#90be5d 51%);">
<div>
<span>GRASS</span>
<span>#9FD574</span>
<span>#90be5d</span>
</div>
</div>
<div class="item" style="background:linear-gradient(to right,#48CFAD 50%,#41ba9b 51%);">
<div>
<span>MINT</span>
<span>#48CFAD</span>
<span>#41ba9b</span>
</div>
</div>
<div class="item" style="background:linear-gradient(to right,#A0CECB 50%,#90b9b6 51%);">
<div>
<span>TEAL</span>
<span>#A0CECB</span>
<span>#90b9b6</span>
</div>
</div>
<div class="item" style="background:linear-gradient(to right,#4FC1E9 50%,#47add1 51%);">
<div>
<span>AQUA</span>
<span>#4FC1E9</span>
<span>#47add1</span>
</div>
</div>
<div class="item" style="background:linear-gradient(to right,#5D9CEC 50%,#548cd4 51%);">
<div>
<span>BLUE JEANS</span>
<span>#5D9CEC</span>
<span>#548cd4</span>
</div>
</div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/21doctor-sun/p/14046059.html