css颜色值设置方式有哪些？以及如何随机一个颜色?

最新推荐文章于 2024-10-13 13:13:02 发布

weixin_30329623

最新推荐文章于 2024-10-13 13:13:02 发布

阅读量4.5k

点赞数 2

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/chengduxiaoc/p/6545607.html

版权

本文介绍了网页设计中颜色的四种表示方法：颜色名称、十六进制颜色、rgba颜色及hsla颜色，并提供了生成随机颜色的JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页中颜色的使用方式有一下几种

1、颜色名称 ，如red black white

2、十六进制颜色，网页中常用，每两位代表红绿蓝的值的比例，如 #ffffff白色 #000000黑色

3、rgba颜色，如 rgba(255,255,255,0.5) 半透明白色，此方式ie8及以下不兼容

RGBA(R,G,B,A)

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数 | 百分数

A：Alpha透明度。取值0~1之间。

4、hsla颜色值，如 hsla(360, 50%, 50%, .5) 半透明红色，此方式ie8及以下不兼容

HSLA(H,S,L,A)

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

S：Saturation(饱和度)。取值为：0.0% - 100.0%

L：Lightness(亮度)。取值为：0.0% - 100.0%

A：Alpha透明度。取值0~1之间。

那么怎么随机一个颜色值呢？

一般我们可以在使用rgba 或者 hsla模式的时候随机里面的值

1、随机rgba颜色

1）随机一个0~255的值，2）将这些值拼接成rgba的字符串即可

代码如下：（创建一个透明度为0.8的随机的颜色对象，获取对象的color属性及为需要的rgba颜色值）

//颜色对象
  function Color(){
    this.r = Math.floor(Math.random()*255);
    this.g = Math.floor(Math.random()*255);
    this.b = Math.floor(Math.random()*255);
    this.color = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)';
  }

2、随机hsla颜色

1）随机一个0~360的颜色值范围，2）拼装hsla的颜色值字符串（后面的饱和度、亮度、透明度按自己需求给值即可）

//颜色对象
  function Color(){
    this.colorAngle = Math.floor(Math.random()*360);
    this.color = 'hsla('+ this.colorAngle +',100%,50%,1)';
  }

转载于:https://www.cnblogs.com/chengduxiaoc/p/6545607.html