首页 > 其他分享 >十六进制转RGB ---颜色-color

十六进制转RGB ---颜色-color

时间:2024-09-04 17:47:39浏览次数:3  
标签:十六进制 color rgbaColor depth --- RGB result rgba 255

```

// 十六进制转RGB
function hexToRgb(hex: string) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16),
]
: null;
}

function adjustColor(color: string, depth: number, alpha: number) {
// 判断颜色格式
const isRgb = color.length === 3 || color.length === 4;
const isHex = /^#[0-9a-fA-F]{6}$/.test(color);

if (!isRgb && !isHex) {
throw new Error(
"Invalid color format. Accepted formats: RGB (e.g., [255, 0, 0]) or Hex (e.g., #ff0000)"
);
}

// 将RGB或十六进制颜色转为RGBA格式
let rgbaColor: any;
if (isRgb) {
rgbaColor = [...color, alpha];
} else if (isHex) {
const rgbColor = hexToRgb(color) as number[];
rgbaColor = [...rgbColor, alpha];
}

// 根据深浅值调整RGBA值
rgbaColor = adjustColorValue(rgbaColor, depth);

return rgba(${rgbaColor[0]},${rgbaColor[1]},${rgbaColor[2]},${rgbaColor[3]});
}

// 十六进制转RGB
function hexToRgb(hex: string) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16),
]
: null;
}

// 调整颜色深浅值和透明度
function adjustColorValue(rgba: number[], depth: number) {
return [
Math.round(rgba[0] + depth) > 255 ? 255 : Math.round(rgba[0] + depth),
Math.round(rgba[1] + depth) > 255 ? 255 : Math.round(rgba[1] + depth),
Math.round(rgba[2] + depth) > 255 ? 255 : Math.round(rgba[2] + depth),
rgba[3], // 保持透明度不变
];
}

标签:十六进制,color,rgbaColor,depth,---,RGB,result,rgba,255
From: https://www.cnblogs.com/baozhengrui/p/18397039

相关文章

  • 2024.7.5-2024.7.20 HA省学会集训游记(焦作一中)
    这是一篇长篇小说DAY1除了DAY4-DAY5个别内容以外,这些都是补的,但是全写完有太多了qwq,挑题写了树状数组和线段树基础很多都是一些模板题,太模板的题不再做太多解释题目:P4062P6619P3688P3157P10497P3374P3368P4223P10589P10688CF1667BP10463SP1716CF718CCF446C......
  • AI-Talk开发板之LED
    一、说明AI-Talk开发板上有一颗用户LED,连接在CH32PA2管脚,低电平亮,高电平灭。相关电路图如下:二、工程 1、创建项目进入snap/examples/目录,执行创建项目的命令:lisazepcreate?选择sample.(`左右键/空格键`展开文件夹,`回车键`确定选择)→display......
  • Python基础 5 - 类、对象、注解
    文章目录一、初识对象1、什么是面向对象?2、成员方法1)类的定义和使用2)成员方法的定义3、类和方法面向对象编程4、属性(成员变量)的赋值5、其他类内置方法1)__str__字符串方法2)__lt__小于符号比较方法3)__le__小于等于符号比较方法4)__eq__等于符号比较方法......
  • 基于ABC-BP人工蚁群优化BP神经网络实现数据预测Python实现
    在数据预测领域,传统的统计方法和时间序列分析在面对复杂、非线性的数据时往往力不从心。随着人工智能技术的快速发展,神经网络特别是BP(BackPropagation)神经网络因其强大的非线性映射能力,在预测领域得到了广泛应用。然而,BP神经网络也存在易陷入局部最优、收敛速度慢等问题。为了......
  • 数据结构--链表
    单向链表链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的。相较于数组,链表有以下优点:逻辑结构(1)链表采用动态内存分配的方式,在内存中不连续(2)支持动态增加或者删除元素(3)需要时可以使用malloc或者new来申请内存,不用......
  • vue路由传参接收以及传参对象为对象时的问题及解决--router
    场景:<div@click='toDetail'>查看详情</div>路由传参不能直接传一个对象,需要使用JSON.stringify()方法将其转换成一个字符串,然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象constrouter=useRouter()consttoDetail=()=>{   //我使用的是Vue3,rout......
  • (5-4-05)基于Stable Diffusion的文生图系统:(5)概率分布+编码和嵌入
    5.概率分布文件distributions.py定义了与概率分布相关的抽象类和具体实现,包括抽象分布类AbstractDistribution、狄拉克分布DiracDistribution和对角高斯分布DiagonalGaussianDistribution。这些类提供了样本生成、模式计算和KL散度等功能,支持概率模型中的采样和分布计......
  • 电路基础 ---- 旁路电容与去耦电容的区别
    1.旁路电容(BypassCapacitor)功能:旁路电容主要用于为电路中的高频噪声提供一个低阻抗路径,以防止这些高频噪声进入电源线。它通过旁路高频信号(如电源中的噪声或电路切换产生的尖峰信号)来稳定电压。换句话说,旁路电容将交流分量从电路中“旁路”掉,保留直流分量。用途:旁路电容......
  • django空巢老人志愿服务系统-计算机毕业设计源码58726
    摘 要随着社会老龄化问题日益突出,空巢老人群体的关注和关怀日益重要。本研究设计并实现了基于Python的空巢老人志愿服务系统,旨在利用技术手段提供更多关爱和支持给空巢老人群体。该系统结合Python编程语言的灵活性和易用性,实现了慈善捐赠、医院信息查询、志愿活动发布、志......
  • springboot博客交流平台-计算机毕业设计源码56406
    摘要博客交流平台作为一种重要的网络平台,为用户提供了展示自我、分享经验和与他人互动的空间。在国内外,研究者们关注博客交流平台的各个方面,并取得了显著的进展。研究内容主要包括用户体验和界面设计、社交化和互动性、多媒体内容支持、移动设备适配和跨平台体验、数据分......