当前位置：网站首页 > 热门文章 > 正文

【JS 色值转换】HEX和RGB色值转换小技巧

bigegpt 2025-01-09 10:42 6 浏览

业务开发中经常会遇见色值转换的场景，如场景替换时的色值的实时展示或者用Canvas生成纯色背景等等，基于这些场景，封装了两个方法，便于调用：

rgb转hex代码如下

// 将 RGB 颜色转换为十六进制表示
    function rgbToHex(red, green, blue) {
      const toHex = (colorValue) => {
        const hex = colorValue.toString(16);
        return hex.length == 1 ? "0" + hex : hex;
      };
      return "#" + toHex(red) + toHex(green) + toHex(blue);
    }
    
rgbToHex(40,40,4) //'#282804'
rgbToHex(255,0,255) //'#ff00ff'

hex转rgb代码如下

function hexToRgb(hex) {
  // 移除前缀#符号
  hex = hex.replace(/^\s*#|\s*$/g, '');
  // 如果是三位十六进制数，将其转换为六位十六进制数
  if(hex.length=== 3) {
    const [r,g,a] = hex.split('')
    hex = [r,r,g,g,a,a].join('')
  }

  // 将十六进制数转换为十进制数值
  let red = parseInt(hex.substr(0, 2), 16);
  let green = parseInt(hex.substr(2, 2), 16);
  let blue = parseInt(hex.substr(4, 2), 16);

  return { red, green, blue };
}

canvas设置背景色

上一篇：html2canvas踩过的坑问题汇总及解决办法
下一篇：Python程序开发之简单小程序实例(9)利用Canvas绘制图形和文字

相关推荐

5分钟搭建公网https网页文件服务器，免费权威TLS证书: 请关注本头条号，每天坚持更新原创干货技术文章。如需学习视频，请在微信搜索公众号“智传网优”直接开始自助视频学习前言本文主要讲解如何快速搭建一个https网页文件服务器，并免费申请权威机构颁发的tls证...

nginx负载均衡配置（nginx负载均衡配置两个程序副本）: Nginx是什么没有听过Nginx？那么一定听过它的“同行”Apache吧！Nginx同Apache一样都是一种WEB服务器。基于REST架构风格，以统一资源描述符(UniformResources...

19《Nginx 入门教程》Nginx综合实践: 今天我们将基于Nginx完成两个比较有用的场景，但是用到的Nginx的配置非常简单。内部Yum源搭建内部Pip源搭建1.实验环境ceph1centos7.6内网ip：172.16....

Nginx性能调优与优化指南（nginx优化配置大全）: Nginx性能调优需要结合服务器硬件资源、业务场景和负载特征进行针对性优化。以下是一些关键优化方向和具体配置示例：一、Nginx配置优化1.进程与连接数优化nginxworker_process...

C++后端开发必须彻底搞懂Nginx，从原理到实战(高级篇): 本文为Nginx实操高级篇。通过配置Nginx配置文件，实现正向代理、反向代理、负载均衡、Nginx缓存、动静分离和高可用Nginx6种功能，并对Nginx的原理作进一步的解析。当需...

【Nginx】史上最全的Nginx配置详解: Nginx服务器配置中最频繁的部分，代理、缓存和日志定义等绝大多数功能和第三方模块的配置都在这里，http块又包括http全局块和server块。Nginx是非常重要的负载均衡中间件，被广泛应用于大型...

【Nginx】Nginx 4种常见配置实例（nginx基本配置与参数说明）: 本文主要介绍nginx4种常见的配置实例。Nginx实现反向代理；Nginx实现负载均衡；Nginx实现动静分离；Nginx实现高可用集群；Nginx4种常见配置实例如下：一、Nginx反向代理配...

使用nginx+allure管理自动化测试报告: allure在自动化测试中经常用来生成漂亮的报告，但是网上及官网上给出的例子都仅仅是针对单个测试用例文件的形式介绍的，实际使用中，自动化测试往往需要包含不止一个产品或项目，本文介绍如何使用nginx+...

nginx配置文件详解（nginx配置文件详解高清版）: Nginx是一个强大的免费开源的HTTP服务器和反向代理服务器。在Web开发项目中，nginx常用作为静态文件服务器处理静态文件，并负责将动态请求转发至应用服务器(如Django,Flask,et...

SpringCloud Eureka-服务注册与发现: 1.Eureka介绍1.1学习Eureka前的说明目前主流的服务注册&发现的组件是Nacos，但是Eureka作为老牌经典的服务注册&发现技术还是有必要学习一下，原因：（1）一些早期的分布式微服...

微服务 Spring Cloud 实战 Eureka+Gateway+Feign+Hystrix: 前言我所在项目组刚接到一个微服务改造需求，技术选型为SpringCloud，具体需求是把部分项目使用SpringCloud技术进行重构。本篇文章中介绍了Eureka、Gateway、Fe...

深度剖析 Spring Cloud Eureka 底层实现原理: 你作为一名互联网大厂后端技术开发人员，在构建分布式系统时，是不是常常为服务的注册与发现而头疼？你是否好奇，像SpringCloudEureka这样被广泛使用的组件，它的底层实现原理到底是怎样的...

热爱生活，喜欢折腾。（很热爱生活）: 原文是stackoverflow的一则高票回答，原文链接可能之前也有人翻译过，但是刚好自己也有疑惑，所以搬运一下，个人水平有限所以可能翻译存在误差，欢迎指正（如侵删）。尽管classmethod和st...

GDB调试的高级技巧（详细描述gdb调试程序的全过程）: GDB是我们平时调试c/c++程序的利器,查起复杂的bug问题,比打印大法要好得多,但是也不得不说,gdb在默认情况下用起来并不是很好用,最近学习到几个高级点的技巧,分享下:一美化打印先上个例子...

Arduino 实例(二十三)Arduino 给Python 编译器发送信息: 1首先Python需要安装Pyserial库,在命令提示符中输入pipintallpyserial若是遇到提示‘pip‘不是内部或外部命令，也不是可运行的程序或批处理文件，则需要设置环境变...

一周热门

最近发表

首页
收录
顶部