jquery写一个函数,传入一个rgb值,功能返回临近色,互补色,同色系搭配色,中差色,对比色
时间: 2024-06-14 17:06:11 浏览: 4
可以使用jQuery编写一个函数来实现你所描述的功能。以下是一个示例函数:
```javascript
function getColorVariations(rgb) {
// 将RGB值转换为十六进制颜色表示
function rgbToHex(rgb) {
var hex = Number(rgb).toString(16);
if (hex.length < 2) {
hex = "0" + hex; }
return hex;
}
// 将十六进制颜色表示转换为RGB值
function hexToRgb(hex) {
var r = parseInt(hex.substring(0, 2), 16);
var g = parseInt(hex.substring(2, 4), 16);
var b = parseInt(hex.substring(4, 6), 16);
return [r, g, b];
}
// 计算临近色
function getAdjacentColor(rgb) {
var adjacentColor = [];
for (var i = 0; i < rgb.length; i++) {
adjacentColor.push(rgb[i] + 10); // 增加10来获取临近色
}
return adjacentColor;
}
// 计算互补色
function getComplementaryColor(rgb) {
var complementaryColor = [];
for (var i = 0; i < rgb.length; i++) {
complementaryColor.push(255 - rgb[i]); // 取255减去原始颜色来获取互补色
}
return complementaryColor;
}
// 计算同色系搭配色
function getAnalogousColors(rgb) {
var analogousColors = [];
for (var i = -30; i <= 30; i += 10) {
var color = [];
for (var j = 0; j < rgb.length; j++) {
var value = rgb[j] + i;
if (value < 0) {
value = 0;
} else if (value > 255) {
value = 255;
}
color.push(value);
}
analogousColors.push(color); }
return analogousColors;
}
// 计算中差色
function getMidToneColor(rgb) {
var midToneColor = [];
for (var i = 0; i < rgb.length; i++) {
midToneColor.push(Math.round(rgb[i] * 0.5)); // 将原始颜色乘以0.5来获取中差色
}
return midToneColor;
}
// 计算对比色
function getContrastColor(rgb) {
var contrastColor = [];
for (var i = 0; i < rgb.length; i++) {
contrastColor.push(255 - rgb[i]); // 取255减去原始颜色来获取对比色
}
return contrastColor;
}
// 将RGB值转换为十六进制颜色表示
var hex = "#" + rgb.map(function (value) {
return rgbToHex(value);
}).join("");
// 将十六进制颜色表示转换为RGB值
var rgbValue = hexToRgb(hex);
// 返回包含各种颜色变化的对象
return {
adjacentColor: getAdjacentColor(rgbValue),
complementaryColor: getComplementaryColor(rgbValue),
analogousColors: getAnalogousColors(rgbValue),
midToneColor: getMidToneColor(rgbValue),
contrastColor: getContrastColor(rgbValue)
};
}
// 示例用法
var rgb = [255, 0, 0]; // 输入RGB值
var colorVariations = getColorVariations(rgb); // 调用函数获取颜色变化
console.log(colorVariations);
```
这个函数接受一个RGB值作为参数,并返回一个包含临近色、互补色、同色系搭配色、中差色和对比色的对象。你可以根据需要使用这些颜色变化。