css实现色相饱和度调色板代码-html代码-BFW代码库

css实现色相饱和度调色板代码

代码语言：html

代码描述：css实现色相饱和度调色板代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");

:root {
	--hue: 134;

	--bg-blur: 10px;

	--tile-sz: 11vw;
	--input-bg: hsla(var(--hue), 65%, 90%, 0.4);
	--output-bg: var(--input-bg);
	--input-bs: 0 8px 32px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 -1px 0 rgba(255, 255, 255, 0.1),
		inset 0 0 10px 10px rgba(255, 255, 255, 0.5);
	--output-bs: var(--input-bs);
	--input-border: 1px solid rgba(255, 255, 255, 0.3);
	--output-border: var(--input-border);

	--slider-thumb-bg: #f5f5f5;
	--slider-thumb-bs: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

	--slider-track-bg: #666666;
	--slider-track-bs: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

	--output-tile-bs: 0px 8px 16px rgba(0, 0, 0, 0.35),
		0 0px 12px rgba(255, 255, 255, 0.1);
	--output-tile-border: 1px solid rgba(255, 255, 255, 0.5);
	--output-tile-border-hover: 1px solid rgba(255, 255, 255, 1);
}

body {
	font-family: "Lexend", sans-serif;
	margin: 0;
	height: 100vh;
	/* 	overflow: clip; */
	background: radial-gradient(
		hsl(var(--hue), 65%, 90%),
		hsl(var(--hue), 65%, 50%),
		hsl(var(--hue), 65%, 20%)
	);
	display: grid;
	gap: 6px;
	place-content: center;
}

/* Input Section */
.hue-input {
	width: 100%;
	display: grid;
	padding: 0.5rem 1rem;
	gap: 0;
	background-color: var(-.........完整代码请登录后点击上方下载按钮下载查看