好的，我知道了。对于这个问题，我们可以先将 RGB 或 RGBA 颜色转换成 HSL 颜色，然后对 HSL 颜色的亮度进行调整，得到深色颜色和浅色颜色。具体实现可以参考以下代码：
```javascript
function shadeColor(color, percent) {
var num = parseInt(color.slice(1), 16),
amt = Math.round(2.55 * percent),
R = (num >> 16) + amt,
G = (num >> 8 & 0x00FF) + amt,
B = (num & 0x0000FF) + amt,
newColor = (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (G<255?G<1?0:G:255)*0x100 + (B<255?B<1?0:B:255)).toString(16).slice(1);
return '#' + newColor;
}
function lightenDarkenColor(color, percent) {
var num = parseInt(color.slice(1), 16),
amt = Math.round(2.55 * percent),
R = (num >> 16) + amt,
G = (num >> 8 & 0x00FF) + amt,
B = (num & 0x0000FF) + amt;
R = R < 255 ? (R < 1 ? 0 : R) : 255;
G = G < 255 ? (G < 1 ? 0 : G) : 255;
B = B < 255 ? (B < 1 ? 0 : B) : 255;
var newColor = "#" + (0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1);
return newColor;
}
function RGBtoHSL(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // grayscale
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
}
function HSLtoRGB(h, s, l) {
var r, g, b;
if (s == 0) {
r = g = b = l; // achromatic
} else {
function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return [r * 255, g * 255, b * 255];
}
function lightenDarkenColor(color, percent) {
var hsl = RGBtoHSL(parseInt(color.substr(1, 2), 16), parseInt(color.substr(3, 2), 16), parseInt(color.substr(5, 2), 16));
hsl[2] += (percent / 100);
hsl[2] = Math.max(0, Math.min(1, hsl[2]));
var rgb = HSLtoRGB(hsl[0], hsl[1], hsl[2]);
return "#" + ((1 << 24) + (Math.round(rgb[0]) << 16) + (Math.round(rgb[1]) << 8) + Math.round(rgb[2])).toString(16).slice(1);
}
function generateColors(color) {
var lightColor = lightenDarkenColor(color, 20);
var darkColor = lightenDarkenColor(color, -20);
return {
light: lightColor,
dark: darkColor
};
}
var color = '#FF0000';
console.log(generateColors(color)); // { light: "#ffb3b3", dark: "#cc0000" }
```
在这个代码中，我们先定义了两个函数 `RGBtoHSL` 和 `HSLtoRGB` 来实现 RGB 和 HSL 颜色之间的转换。然后我们定义了一个 `lightenDarkenColor` 函数来实现调整颜色亮度的功能，其中 `percent` 参数是一个表示要调整的亮度百分比的数字，例如 `20` 表示调亮 `20%`，`-20` 表示调暗 `20%`。
最后，我们实现了一个 `generateColors` 函数来生成深色和浅色颜色。该函数接受一个 RGB 或 RGBA 颜色字符串作为输入，并通过调用 `lightenDarkenColor` 函数来生成深色和浅色颜色。函数返回一个包含两个属性的对象，分别对应深色和浅色颜色的字符串表示。
希望这个代码对你有所帮助！
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
