主要代码

<div class="btn">
	<i class="fas fa-cog">输入色值</i>
</div>

<div class="box">
	<h2>输入颜色值</h2>
	<div class="box-c">
		<div class="txtb">
			<input type="text" placeholder="#000000" id="hex">
			<div class="prev"></div>
			<button class="apply">应用</button>
		</div>
		
	</div>
</div>

<script type="text/javascript">
	$(function () {
		//显示和隐藏输入框
		$(".btn").click(function () {
			$(".box").toggleClass("box-show");
		});
		//输入颜色能够显示出颜色
		$("#hex").keyup(function () {
			$(".prev").css("background",$("#hex").val());
		});
		//改变body的背景色
		$(".apply").click(function () {
			$("body").css("background",$("#hex").val());
		});
	});
</script>