当前位置:首页 > 前端技术 > CSS颜色值的转换

CSS颜色值的转换

2022年09月17日 15:17:00前端技术6

  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 }

作者:linjingyg
来源链接:https://www.cnblogs.com/linjingyg/p/15753296.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42723.html

标签: css
分享给朋友:

“CSS颜色值的转换” 的相关文章

如何使用纯 CSS 创建翻牌动画

如何使用纯 CSS 创建翻牌动画

下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。 作者:坚果 公众号:“大前端之旅” 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括F...

用HTML5/CSS3/JS开发Android/IOS应用

用HTML5/CSS3/JS开发Android/IOS应用

现在人人都想成为安卓/IOS应用开发工程师。其实,安卓/IOS应用可以用很多种语言来实现。由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了。所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具。  在...

html和css的属性大全

一、HTML属性 1、字体属性(font) 1、大小 {font-size: x-large;}(特大) xx-small;(极小) 一般只要用数值就可以,单位:PX、PD 2、样式 {font-style: oblique...

html标签属性大全(囊括CSS、CSS3、H5、XML等)

转载:https://www.w3school.com.cn/tags/tag_html.asp 作者:zhzhsgg 来源链接:https://blog.csdn.net/zhzhsgg/article/details/1130...

CSS

CSS

文章目录 1. CSS 的概念 2. CSS 的作用 3. CSS 与 HTML 的结合方式 4. CSS 格式 5. 选择器 5.1 选择器的作用...

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用span标签设置div内放一段文字中的部分文字字体颜色方法。 一段文字放在DIV内或P内,当我们设置div或p...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

  【实验题目】HTML&CSS实验(5) 【实验目的】学习颜色、字体、文本格式化和盒模型的样式定义。                  ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给大家介绍使用javascript是如果设置css样式的。 1、直接设置样式(内联样式) 使...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。