极客教程CSS 颜色转换器
在网页设计中，颜色是一个非常重要的元素，能够影响用户的视觉体验和情绪。在CSS中，我们可以使用各种方式来表示颜色，比如十六进制、RGB、HSL等。有时候我们需要在不同表示方式之间进行转换，这就需要用到颜色转换器。
十六进制转RGB
在CSS中，我们经常使用十六进制表示颜色，比如#ff0000表示红色。有时候我们需要将十六进制颜色转换为RGB格式，可以使用下面的JavaScript代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hex to RGB</title>
</head>
<body>
<script>
function hexToRgb(hex) {
hex = hex.replace('#', '');
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 `rgb({r},{g}, ${b})`;
}
var hexColor = '#ff0000';
var rgbColor = hexToRgb(hexColor);
console.log(rgbColor);
</script>
</body>
</html>
运行结果：rgb(255, 0, 0)
RGB转十六进制
与上面相反，有时候我们需要将RGB颜色转换为十六进制格式。下面是一个简单的JavaScript函数来实现RGB转十六进制：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGB to Hex</title>
</head>
<body>
<script>
function rgbToHex(r, g, b) {
var hexR = r.toString(16).padStart(2, '0');
var hexG = g.toString(16).padStart(2, '0');
var hexB = b.toString(16).padStart(2, '0');
return `#{hexR}{hexG}${hexB}`;
}
var rgbColor = 'rgb(255, 0, 0)';
var match = rgbColor.match(/\d+/g);
var hexColor = rgbToHex(parseInt(match[0]), parseInt(match[1]), parseInt(match[2]));
console.log(hexColor);
</script>
</body>
</html>
运行结果：#ff0000
RGB转HSL
除了RGB和十六进制，HSL也是一种常用的颜色表示方式。下面是一个JavaScript函数来实现RGB转HSL：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGB to HSL</title>
</head>
<body>
<script>
function rgbToHsl(r, g, b) {
r /= 255;
g /= 255;
b /= 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} 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;
}
h = Math.round(h * 360);
s = Math.round(s * 100);
l = Math.round(l * 100);
return `hsl({h},{s}%, ${l}%)`;
}
var rgbColor = 'rgb(255, 0, 0)';
var match = rgbColor.match(/\d+/g);
var hslColor = rgbToHsl(parseInt(match[0]), parseInt(match[1]), parseInt(match[2]));
console.log(hslColor);
</script>
</body>
</html>
运行结果：hsl(0, 100%, 50%)
HSL转RGB
同样地，我们也可以将HSL颜色转换为RGB格式。下面是一个JavaScript函数来实现HSL转RGB：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HSL to RGB</title>
</head>
<body>
<script>
function hslToRgb(h, s, l) {
h /= 360;
s /= 100;
l /= 100;
var r, g, b;
if (s === 0) {
r = g = b = l;
} else {
var hue2rgb = 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);
}
r = Math.round(r * 255);
g = Math.round(g * 255);
b = Math.round(b * 255);
return `rgb({r},{g}, ${b})`;
}
var hslColor = 'hsl(0, 100%, 50%)';
var match = hslColor.match(/\d+/g);
var rgbColor = hslToRgb(parseInt(match[0]), parseInt(match[1]), parseInt(match[2]));
console.log(rgbColor);
</script>
</body>
</html>
运行结果：rgb(255, 0, 0)
颜色互转
除了单向的转换，有时候我们也需要实现颜色的互相转换，比如RGB转HSL再转回RGB。下面是一个完整的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Converter</title>
</head>
<body>
<script>
function rgbToHsl(r, g, b) {
r /= 255;
g /= 255;
b /= 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} 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;
}
h = Math.round(h * 360);
s = Math.round(s * 100);
l = Math.round(l * 100);
return `hsl({h},{s}%, {l}%)`;
}
function hslToRgb(h, s, l) {
h /= 360;
s /= 100;
l /= 100;
var r, g, b;
if (s === 0) {
r = g = b = l;
} else {
var hue2rgb = 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);
}
r = Math.round(r * 255);
g = Math.round(g * 255);
b = Math.round(b * 255);
return `rgb({r}, {g},{b})`;
}
var rgbColor = 'rgb(255, 0, 0)';
var match = rgbColor.match(/\d+/g);
var hslColor = rgbToHsl(parseInt(match[0]), parseInt(match[1]), parseInt(match[2]));
console.log(hslColor);
var newMatch = hslColor.match(/\d+/g);
var newRgbColor = hslToRgb(parseInt(newMatch[0]), parseInt(newMatch[1]), parseInt(newMatch[2]));
console.log(newRgbColor);
</script>
</body>
</html>
运行结果：
hsl(0, 100%, 50%)
rgb(255, 0, 0)
通过以上示例代码，我们可以实现颜色在RGB、十六进制和HSL之间的相互转换。这些转换器可以帮助我们在网页设计中更灵活地使用颜色，提升用户体验。