当前位置：网站首页 > 技术文章 > 正文

CSS颜色值的转换

myzbx 2024-12-04 13:55 48 浏览

CSS的颜色值有3种表示方式，为十六进制、RGB、颜色名称，用代码表示分别为：

color : #345456;

color : rgb(255,152,10);

color : red;

平时在编写CSS代码时，在设置颜色值时使用的最多的方式是十六进制。如果要对颜色值进行计算，就必须将十六进制的颜色值转换成RGB模式。那么如何进行转换呢？

别急，先来看看十六进制的颜色值和RGB颜色值之间的对应关系。比如上面的十六进制的颜色值：#345456，其中的前2位“34”对应R，中间2位“54”对应G，最后2位“56”对应B，有了这个对应关系那么剩下的就是进制转换的事了。

javascript中使用parseInt()方法可以将将第二个参数设置成16就可以将十六进制转换成十进制。需要注意的是，CSS中的十六进制颜色值支持简写，在转换的过程中要考虑到简写的处理办法。

下面是我写的一个将十六进制的颜色值转换成RGB的函数，该函数接受一个十六进制或RGB的CSS颜色值，返回的是一个包含了r、g、b三个颜色值的对象，这样就可以很方便的对颜色值进行计算了。

view sourceprint?

var parseColor = function( val ){

var r, g, b;

// 参数为RGB模式时不做进制转换，直接截取字符串即可

if( /rgb/.test(val) ){

var arr = val.match( /\d+/g );

r = parseInt( arr[0] );

g = parseInt( arr[1] );

b = parseInt( arr[2] );

}

// 参数为十六进制时需要做进制转换

else if( /#/.test(val) ){

var len = val.length;

// 非简写模式 #0066cc

if( len === 7 ){

r = parseInt( val.slice(1, 3), 16 );

g = parseInt( val.slice(3, 5), 16 );

b = parseInt( val.slice(5), 16 );

}

// 简写模式 #06c

else if( len === 4 ){

r = parseInt( val.charAt(1) + val.charAt(1), 16 );

g = parseInt( val.charAt(2) + val.charAt(2), 16 );

b = parseInt( val.charAt(3) + val.charAt(3), 16 );

}

else{

return val;

}

return {

r : r,

g : g,

b : b

}

};

下面是调用结果：

parseColor( '#009652' ); // { r = 0, g = 150, b = 82 }

parseColor( '#06c' ); // { r = 0, g = 102, b = 204 }

parseColor( 'rgb(255,10,102)' ); // { r = 255, g = 10, b = 102 }

文章地址：peixun.qietu.com

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com

HTML 颜色

CSS颜色值的转换

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿