16进制和rgba颜色的相互转换 js
时间: 2024-03-31 16:25:19 浏览: 37
可以使用以下方法将十六进制颜色值转换为RGBA颜色值:
```javascript
function hexToRGBA(hex, opacity) {
var r = parseInt(hex.slice(1, 3), 16);
var g = parseInt(hex.slice(3, 5), 16);
var b = parseInt(hex.slice(5, 7), 16);
return "rgba(" + r + ", " + g + ", " + b + ", " + opacity + ")";
}
var rgbaColor = hexToRGBA("#f5faf3", 0.4);
console.log(rgbaColor); // "rgba(245, 250, 243, 0.4)"
```
同样地,可以使用以下方法将RGBA颜色值转换为十六进制颜色值:
```javascript
function RGBAToHex(rgba) {
var values = rgba.match(/rgba?\((\d+), (\d+), (\d+)(, [\d.]+)?\)/i);
var r = parseInt(values
相关问题
typescript实现16进制和rgba互转
可以通过以下代码实现 TypeScript 中的 16 进制和 RGBA 互转:
```ts
/**
* 将 16 进制颜色转为 RGBA
* @param hex 16 进制颜色字符串
* @param alpha 透明度,默认为 1
* @returns RGBA 颜色字符串
*/
function hexToRGBA(hex: string, alpha: number = 1): string {
hex = hex.replace('#', '');
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
/**
* 将 RGBA 颜色转为 16 进制颜色
* @param rgba RGBA 颜色字符串
* @returns 16 进制颜色字符串
*/
function RGBAToHex(rgba: string): string {
const match = rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.\d+|\d+))?\)$/);
if (!match) {
throw new Error('Invalid input, expected RGBA color string');
}
const r = (+match[1]).toString(16).padStart(2, '0');
const g = (+match[2]).toString(16).padStart(2, '0');
const b = (+match[3]).toString(16).padStart(2, '0');
return `#${r}${g}${b}`;
}
```
使用示例:
```ts
const hexColor = '#ff0000';
const rgbaColor = hexToRGBA(hexColor, 0.5);
console.log(rgbaColor); // 输出:rgba(255, 0, 0, 0.5)
const rgbColor = 'rgba(255, 0, 0, 1)';
const hexColor2 = RGBAToHex(rgbColor);
console.log(hexColor2); // 输出:#ff0000
```
js rgba颜色转化成16进制
要将 JavaScript 中的 RGBA 颜色值转换为十六进制颜色值,可以使用以下代码:
```javascript
function rgbaToHex(r, g, b, a) {
r = Math.round(r * 255);
g = Math.round(g * 255);
b = Math.round(b * 255);
var alpha = ((a * 255) | (1 << 8)).toString(16).slice(1);
var hex = "#" + ((r << 16) | (g << 8) | b).toString(16).toUpperCase();
return hex + alpha;
}
// 示例使用:
var rgbaColor = "rgba(255, 127, 0, 0.5)";
var matches = rgbaColor.match(/\d+/g);
if (matches.length === 4) {
var r = parseInt(matches[0]) / 255;
var g = parseInt(matches[1]) / 255;
var b = parseInt(matches[2]) / 255;
var a = parseFloat(matches[3]);
var hexColor = rgbaToHex(r, g, b, a);
console.log(hexColor); // 输出 "#FF7F0080"
}
```
你可以将 `rgbaToHex` 函数用于将接收到的 RGBA 颜色转换为十六进制值。使用 `match` 方法从 RGBA 字符串中提取颜色的红、绿、蓝和透明度值,并将其传递给 `rgbaToHex` 函数。最后,将转换后的十六进制颜色值打印到控制台上。
希望这对你有帮助!如果你有任何其他问题,请随时问我。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)