概要
在网页中，通过选取一个主色来计算获取按钮、边框、背景等近似色
实现原理
1.获取颜色后将其转化为hsv格式，通过调整色相、饱和度、亮度生成一个新的hsv，然后转为rgb格式梯度色板。（颜色格式转换工具是网上找的现成的，具体算法感兴趣的可以研究研究）
HSV格式
-
色相（h） 是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
-
饱和度（s） 是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
-
亮度（v） 也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。
2.通过:root伪类预设相应样式变量，使用 setProperty() 方法动态更改元素样式
css：
:root {
/* 标题背景色 */
--title-background: rgba(24, 143, 190);
/* 边框颜色 */
--border-color: rgba(24, 143, 190);
/* 文字颜色 */
--text-color: #666;
/* 文字加重色 */
--text-bold-color: #000;
}
js:
/**
* @method: 设置主题
* @param: { Array } list 主题色板
* @param: { Object } color 主题色
*/
setTheme = (list, color) => {
/**标题栏背景*/
document.documentElement.style.setProperty(
"--title-background",
`rgb(${color})`
);
/**边框颜色*/
document.documentElement.style.setProperty(
"--border-color",
`rgb(${list[2]})`
);
/**加粗字体颜色*/
document.documentElement.style.setProperty(
"--text-bold-color",
`rgb(${list[6]})`
);
};
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
/* width: 1200px; */
margin: 0 auto;
}
:root {
/* 标题背景色 */
--title-background: rgba(24, 143, 190);
/* 边框颜色 */
--border-color: rgba(24, 143, 190);
/* 文字颜色 */
--text-color: #666;
/* 文字加重色 */
--text-bold-color: #000;
}
.content-box {
width: 1200px;
margin: 0 auto;
display: flex;
min-height: 900px;
}
.left,
.right {
width: 50%;
display: flex;
flex-direction: column;
}
.top {
height: 50px;
line-height: 50px;
padding: 0 30px;
background-color: var(--title-background);
color: #fff;
font-weight: 700;
}
.color-box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.box {
width: 150px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(226, 226, 226);
margin-top: 6px;
}
.box2 {
width: 150px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(226, 226, 226);
margin-top: 6px;
font-size: 12px;
}
.basic-input-box {
margin-top: 30px;
}
.article {
margin-top: 10px;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 5px;
}
.article p {
margin: 0;
text-indent: 2em;
line-height: 1.5em;
color: #666;
}
.article p .bold-text {
color: var(--text-bold-color);
}
</style>
</head>
<body>
<div class="top"><span>获取主题色</span></div>
<div class="content-box">
<!-- 获取色板 -->
<div class="left">
<div class="basic-input-box">
<span>主色：</span>
<input type="color" name="color" id="color" onchange="changeColor()" />
<span id="colorInfo"></span>
</div>
<div class="color-box" id="color-box"></div>
</div>
<div class="right">
<div class="article">
<p>
我说道：<span class="bold-text">“爸爸，你走吧。”</span>
他往车外看了看， 说：
<span class="bold-text">“我买几个橘子去。你就在此地，不要走动。”</span>
我看那边月台的栅栏外有几个卖东西的等着顾客。
走到那边月台，须穿过铁道，须跳下去又爬上去。
父亲是一个胖子，走过去自然要费事些。
我本来要去的，他不肯，只好让他去。
我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，
蹒跚地走到铁道边，慢慢探身下去，尚不大难。
可是他穿过铁道，要爬上那边月台，就不容易了。
他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。
这时我看见他的背影，我的泪很快地流下来了。 我赶紧拭干了泪。
怕他看见，也怕别人看见。 我再向外看时，他已抱了朱红的橘子往回走了。
过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。
到这边时，我赶紧去搀他。
他和我走到车上，将橘子一股脑儿放在我的皮大衣上。
于是扑扑衣上的泥土，心里很轻松似的。 过一会儿说：<span class="bold-text">“我走了，到那边来信！”</span>
我望着他走出去。 他走了几步，回过头看见我， 说：<span class="bold-text">“进去吧，里边没人。”</span>
等他的背影混入来来往往的人里，再找不着了，
我便进来坐下，我的眼泪又来了。
</p>
<p style="text-align: right">
——朱自清<span class="bold-text">《背影》</span>(节选)
</p>
</div>
</div>
</div>
</body>
</html>
<script>
/**颜色转换工具*/
//rgb 转 hsv
// r,g,b范围为[0,255],转换成h范围为[0,360]
// s,v为百分比形式，范围是[0,100],可根据需求做相应调整
function rgbtohsv(r, g, b) {
r = r / 255;
g = g / 255;
b = b / 255;
var h, s, v;
var min = Math.min(r, g, b);
var max = (v = Math.max(r, g, b));
var l = (min + max) / 2;
var difference = max - min;
if (max == min) {
h = 0;
} else {
switch (max) {
case r:
h = (g - b) / difference + (g < b ? 6 : 0);
break;
case g:
h = 2.0 + (b - r) / difference;
break;
case b:
h = 4.0 + (r - g) / difference;
break;
}
h = Math.round(h * 60);
}
if (max == 0) {
s = 0;
} else {
s = 1 - min / max;
}
// s=Math.round(s*100);
// v=Math.round(v*100);
s = Number(s.toFixed(2));
v = Number(v.toFixed(2));
return { h, s, v };
}
//hsv转rgb
//输入的h范围为[0,360],s,l为百分比形式的数值,范围是[0,100]
//输出r,g,b范围为[0,255],可根据需求做相应调整
function hsvtorgb(h, s, v) {
// var s=s/100;
// var v=v/100;
var h1 = Math.floor(h / 60) % 6;
var f = h / 60 - h1;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
var r, g, b;
switch (h1) {
case 0:
r = v;
g = t;
b = p;
break;
case 1:
r = q;
g = v;
b = p;
break;
case 2:
r = p;
g = v;
b = t;
break;
case 3:
r = p;
g = q;
b = v;
break;
case 4:
r = t;
g = p;
b = v;
break;
case 5:
r = v;
g = p;
b = q;
break;
}
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
//hex转RGB
function foramgeRGB(color) {
// 16进制颜色值的正则
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 把颜色值变成小写
color = color.toLowerCase();
if (reg.test(color)) {
// 如果只有三位的值，需变成六位，如：#fff => #ffffff
if (color.length === 4) {
var colorNew = "#";
for (var i = 1; i < 4; i += 1) {
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}
color = colorNew;
}
// 处理六位的颜色值，转为RGB
var colorList = [];
for (var i = 1; i < 7; i += 2) {
colorList.push(parseInt("0x" + color.slice(i, i + 2)));
}
return colorList.join(",");
} else {
return color;
}
}
</script>
<script>
/**获取色板*/
const hueStep = 2; // 色相阶梯
const saturationStep = 0.16; // 饱和度阶梯，浅色部分
const saturationStep2 = 0.05; // 饱和度阶梯，深色部分
const brightnessStep1 = 0.05; // 亮度阶梯，浅色部分
const brightnessStep2 = 0.15; // 亮度阶梯，深色部分
const lightColorCount = 5; // 浅色数量，主色上
const darkColorCount = 4; // 深色数量，主色下
/**
* @method: 获取H值 色相
* @param: { Object } hsv 颜色对象
* @param: { Number } i 色板下标
* @param: { boolean } light 是否是亮色
* @returns: 色相
*/
const getHue = (hsv, i, light) => {
let hue;
// 根据色相不同，色相转向不同 60度-240度为冷色调 操作时冷色调的h随着色板依次增加，而暖色调则相反。
if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
hue = light
? Math.round(hsv.h) - hueStep * i
: Math.round(hsv.h) + hueStep * i;
} else {
hue = light
? Math.round(hsv.h) + hueStep * i
: Math.round(hsv.h) - hueStep * i;
}
if (hue < 0) {
hue += 360;
} else if (hue >= 360) {
hue -= 360;
}
return hue;
};
/**
* @method: 获取S值 饱和度 饱和度随着色板依次增加
* @param: { Object } hsv 颜色对象
* @param: { Number } i 色板下标
* @param: { boolean } light 是否是亮色
* @returns: 饱和度
*/
const getSaturation = (hsv, i, light) => {
//过滤黑色
if (hsv.h === 0 && hsv.s === 0) {
return hsv.s;
}
let saturation;
if (light) {
//亮色减少饱和度
saturation = hsv.s - saturationStep * i;
} else if (i === darkColorCount) {
saturation = hsv.s + saturationStep;
} else {
saturation = hsv.s + saturationStep2 * i;
}
// 边界值修正
if (saturation > 1) {
saturation = 1;
}
// 第一格的 s 限制在 0.06-0.1 之间
if (light && i === lightColorCount && saturation > 0.1) {
saturation = 0.1;
}
if (saturation < 0.06) {
saturation = 0.06;
}
return Number(saturation.toFixed(2));
};
/**
* @method: 获取V值 明度 明度随着颜色的加深而减淡
* @param: { Object } hsv 颜色对象
* @param: { Number } i 色板下标
* @param: { boolean } light 是否是亮色
* @returns: 亮度
*/
const getValue = (hsv, i, light) => {
let value;
if (light) {
value = hsv.v + brightnessStep1 * i;
} else {
value = hsv.v - brightnessStep2 * i;
}
if (value > 1) {
value = 1;
}
return Number(value.toFixed(2));
};
/**
* @method: 生成色板
* @param: { Array } list 颜色数组
*/
const setColor = (list) => {
var colorBox = document.getElementById("color-box");
let html = ``;
list.forEach((obj) => {
let item = `<div class="box" style="background-color: rgb(${obj.toString()});">rgb(${obj.toString()})</div>`;
html += item;
});
colorBox.innerHTML = html;
};
var color = document.getElementById("color"); //通过使用 getElementById() 来访问 <color> 元素
var colorInfo = document.getElementById("colorInfo");
colorInfo.style.color = color.value; //给<span>的字体加颜色
colorInfo.innerHTML = color.value; //给<span>加内容(<color>的值)
/**
* @method: 颜色选择器改变事件
*/
const changeColor = () => {
//改变颜色的事件
var colorText = document.getElementById("colorText");
let colorRGB = foramgeRGB(color.value);
colorInfo.style.color = colorRGB;
colorInfo.innerHTML = `rgb(${colorRGB})`;
let hsvList = colorPalette(color.value);
//设置色板
setColor(hsvList);
//设置主题色
setTheme(hsvList, colorRGB);
};
/**
* @method: 设置主题
* @param: { Array } list 主题色板
* @param: { Object } color 主题色
*/
setTheme = (list, color) => {
/**标题栏背景*/
document.documentElement.style.setProperty(
"--title-background",
`rgb(${color})`
);
/**边框颜色*/
document.documentElement.style.setProperty(
"--border-color",
`rgb(${list[2]})`
);
/**加粗字体颜色*/
document.documentElement.style.setProperty(
"--text-bold-color",
`rgb(${list[6]})`
);
};
/**
* @method: 生成色板数组
* @param: { Object } color 主题色
* @returns: 色板数组
*/
const colorPalette = (color) => {
//十六进制转rgb
let colorRGB = foramgeRGB(color);
var arr = colorRGB.split(",");
//rgb转hsv
var hsv = rgbtohsv(...arr);
const patterns = [];
//亮色系
for (let i = lightColorCount; i > 0; i -= 1) {
//rgb转hsv
const hsv = rgbtohsv(...arr);
let newhsv = {
h: getHue(hsv, i, true),
s: getSaturation(hsv, i, true),
v: getValue(hsv, i, true),
};
patterns.push(hsvtorgb(newhsv.h, newhsv.s, newhsv.v));
}
//将所选颜色推入数组
patterns.push(arr);
//暗色系
for (let i = 1; i <= darkColorCount; i += 1) {
//rgb转hsv
const hsv = rgbtohsv(...arr);
let newhsv = {
h: getHue(hsv, i),
s: getSaturation(hsv, i),
v: getValue(hsv, i),
};
patterns.push(hsvtorgb(newhsv.h, newhsv.s, newhsv.v));
}
return patterns;
};
</script>
1452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
