CSS中颜色设置

221 阅读8分钟

1711093871796.jpg

关键词颜色值

关键词颜色值有什么独特的特点和适用场景。

  1. 易记和易读性强:使用单词表示颜色,如"red"、"blue"、"green"等,更容易记忆和理解,尤其适合那些不熟悉颜色编码的人使用。
  2. 语义化:与颜色的实际含义相关联,如"red"表示红色、"green"表示绿色,这种语义化的表示方式使得代码更具可读性和可维护性。
  3. 适用于快速原型设计:在快速原型设计阶段,可以更快速地指定颜色,而无需记住复杂的颜色编码。
  4. 适用于主题定制:在需要频繁更改颜色主题的场景下,可以更方便地调整颜色,而无需修改大量的代码。

CSS2 标准,一共包含了 17 个基本颜色

分别是:

  • black(黑)#000000
  • silver(银)#c0c0c0
  • gray(灰)#808080
  • white(白)#ffffff
  • maroon(褐)#800000
  • red(红)#ff0000
  • purple(紫)#800080
  • fuchsia(紫红)#ff00ff
  • green(绿)#008000
  • lime(绿黄)#00ff00
  • olive(橄榄绿)#808000
  • yellow(黄)#ffff00
  • navy(藏青)#000080
  • blue(蓝)#0000ff
  • teal(青)#008080
  • aqua(水绿)#00ffff
  • orange(橙)#ffa500

CSS3 标准,颜色种类进行了扩充 一共是147 个:

分别是:

  • aliceblue(浅灰蓝)#f0f8ff
  • antiquewhite(古董白)#faebd7
  • aquamarine(海蓝)#7fffd4
  • azure(蔚蓝)#f0ffff
  • beige(浅褐)#f5f5dc
  • bisque(橘黄)#ffe4c4
  • blanchedalmond(杏仁白)#ffe4c4
  • blueviolet(蓝紫)#8a2be2
  • brown(褐)#a52a2a
  • burlywood(原木色)#deb887
  • cadetblue(灰蓝)#5f9ea0
  • chartreuse(黄绿)#7fff00
  • chocolate(巧克力色)#d2691e
  • coral(珊瑚红)#ff7f50
  • cornflowerblue(矢车菊蓝)#6495ed
  • cornsilk(玉米穗黄)#fff8dc
  • crimson(深红)#dc143c
  • darkblue(深蓝)#00008b
  • darkcyan(深青)#008b8b
  • darkgoldenrod(暗金)#b8860b
  • darkgray(深灰)#a9a9a9
  • darkgreen(深绿)#006400
  • darkgrey(深灰)#a9a9a9
  • darkkhaki(暗黄褐)#bdb76b
  • darkmagenta(深紫)#8b008b
  • darkolivegreen(深橄榄绿)#556b2f
  • darkorange(深橙)#ff8c00
  • darkorchid(深兰花紫)#9932cc
  • darkred(深红)#8b0000
  • darksalmon(深橙红)#e9967a
  • darkseagreen(深海绿)#8fbc8f
  • darkslateblue(暗灰蓝)#483d8b
  • darkslategray(墨绿)#2f4f4f
  • darkslategrey(墨绿)#2f4f4f
  • darkturquoise(暗宝石绿)#00ced1
  • darkviolet(深紫罗兰)#9400d3
  • deeppink(深粉红)#ff1493
  • deepskyblue(深天蓝)#00bfff
  • dimgray(暗灰)#696969
  • dimgrey(暗灰)#696969
  • dodgerblue(遮板蓝)#1e90ff
  • firebrick(砖红)#b22222
  • floralwhite(花白)#fffaf0
  • forestgreen(丛林绿)#228b22
  • gainsboro(浅灰)#dcdcdc
  • ghostwhite(幽灵白)#f8f8ff
  • gold(金)#ffd700
  • goldenrod(橘黄)#daa520
  • greenyellow(黄绿)#adff2f
  • grey(灰)#808080
  • honeydew(蜜瓜色)#f0fff0
  • hotpink(亮粉)#ff69b4
  • indianred(印第安红)#cd5c5c
  • indigo(靛蓝)#4b0082
  • ivory(象牙白)#fffff0
  • khaki(卡其色)#f0e68c
  • lavender(淡紫)#e6e6fa
  • lavenderblush(淡紫红)#fff0f5
  • lawngreen(草绿)#7cfc00
  • lemonchiffon(粉黄)#fffacd
  • lightblue(淡蓝)#add8e6
  • lightcoral(浅珊瑚色)#f08080
  • lightcyan(淡青)#e0ffff
  • lightgoldenrodyellow(浅金黄)#fafad2
  • lightgray(浅灰)#d3d3d3
  • lightgreen(浅绿)#90ee90
  • lightgrey(浅灰)#d3d3d3
  • lightpink(淡粉)#ffb6c1
  • lightsalmon(浅肉色)#ffa07a
  • lightseagreen(浅海绿)#20b2aa
  • lightskyblue(浅天蓝)#87cefa
  • lightslategray(浅青灰)#778899
  • lightslategrey(浅青灰)#778899
  • lightsteelblue(浅钢蓝)#b0c4de
  • lightyellow(浅黄)#ffffe0
  • limegreen(酸橙绿)#32cd32
  • linen(亚麻色)#faf0e6
  • mediumaquamarine(中绿)#66cdaa
  • mediumblue(中蓝)#0000cd
  • mediumorchid(间兰花紫)#ba55d3
  • mediumpurple(中紫)#9370db
  • mediumseagreen(间海绿)#3cb371
  • mediumslateblue(中暗蓝)#7b68ee
  • mediumspringgreen(中春绿)#00fa9a
  • mediumturquoise(中海湖蓝)#48d1cc
  • mediumvioletred(中紫罗兰)#c71585
  • midnightblue(午夜蓝)#191970
  • mintcream(薄荷乳白)#f5fffa
  • mistyrose(粉玫瑰红)#ffe4e1
  • moccasin(鹿皮色)#ffe4b5
  • navajowhite(纳瓦白)#ffdead
  • oldlace(浅米色)#fdf5e6
  • olivedrab(橄榄褐)#6b8e23
  • orangered(橙红)#ff4500
  • orchid(兰花紫)#da70d6
  • palegoldenrod(灰菊黄)#eee8aa
  • palegreen(苍绿)#98fb98
  • paleturquoise(苍宝石绿)#afeeee
  • palevioletred(苍紫罗兰)#db7093
  • papayawhip(木瓜色)#ffefd5
  • peachpuff(桃色)#ffdab9
  • peru(秘鲁色)#cd853f
  • pink(粉)#ffc0cb
  • plum(李子色)#dda0dd
  • powderblue(粉蓝)#b0e0e6
  • rosybrown(玫瑰粽)#bc8f8f
  • royalblue(宝蓝)#4169e1
  • saddlebrown(马鞍棕)#8b4513
  • salmon(鲑肉色)#fa8072
  • sandybrown(沙褐色)#f4a460
  • seagreen(海绿)#2e8b57
  • seashell(贝壳白)#fff5ee
  • sienna(赭)#a0522d
  • skyblue(天蓝)#87ceeb
  • slateblue(青蓝)#6a5acd
  • slategray(青灰)#708090
  • slategrey(青灰)#708090
  • snow(雪白)#fffafa
  • springgreen(春绿)#00ff7f
  • steelblue(铁青)#4682b4
  • tan(棕褐)#d2b48c
  • thistle(苍紫)#d8bfd8
  • tomato(番茄红)#ff6347
  • turquoise(蓝绿)#40e0d0
  • violet(紫罗兰色)#ee82ee
  • wheat(麦色)#f5deb3
  • whitesmoke(烟白)#f5f5f5
  • yellowgreen(黄绿)#9acd32
  • rebeccapurple(利百加紫)#663399

2.十六进制颜色值

十六进制颜色值有什么独特的特点和适用场景。

  1. 精确表示颜色:可以精确表示颜色,每种颜色都有唯一的代码,可以确保在不同浏览器和设备上显示一致。
  2. 适用于细节调整:如果需要精确控制颜色的细微变化,比如微调亮度、饱和度等
  3. 适用于图形和设计工作:在图形设计领域,设计师通常更习惯使用十六进制颜色值,因为可以直接输入具体的颜色代码来实现设计效果。
  4. 适用于动态生成颜色:在一些动态生成颜色的场景下,比如通过JavaScript生成随机颜色、渐变色等
  5. 适用于跨平台开发:在跨平台开发中,可以确保颜色在不同平台上的显示效果一致。

使用规则#符号加上六位十六进制数来表示颜色。这六位数分为三组,每组代表红、绿、蓝三种颜色通道。每一种颜色通道的取值范围是00(最小值)到FF(最大值),共256个不同的取值。

示例:

  1. 三位十六进制颜色值:如果每个颜色通道的两位数字相同,可以缩写为三位十六进制颜色值。例如,#F00表示红色,#0F0表示绿色,#00F表示蓝色。
  2. 六位十六进制颜色值:每个颜色通道都使用两位数字表示。例如,#FF0000表示红色,#00FF00表示绿色,#0000FF表示蓝色。
  3. 透明度设置:在六位十六进制颜色值后面可以添加两位十六进制数字来表示透明度。其中,00表示完全透明,FF表示完全不透明。例如,#FF0000AA表示半透明的红色。

3.RGB 和 RGBA

  1. RGB:RGB是一种表示颜色的方法,使用红色(Red)、绿色(Green)、蓝色(Blue)三种颜色通道的组合来创建颜色。RGB的取值范围是0到255,每种颜色通道可以取256个不同的值,共同组成了16,777,216种颜色。在CSS中,可以使用rgb()函数来表示RGB颜色,例如rgb(255, 0, 0)表示红色。
  2. RGBA:RGBA是在RGB的基础上增加了一个表示透明度的通道(Alpha)。透明度通道的取值范围也是0到1,0表示完全透明(即不可见),1表示完全不透明。在CSS中,可以使用rgba()函数来表示RGBA颜色,例如rgba(255, 0, 0, 0.5)表示半透明的红色。

RGB 和 RGBA有什么区别

区别在于透明度的设置。 RGB和RGBA的主要区别在于RGBA可以设置颜色的透明度,使得元素可以呈现半透明或者完全透明的效果。在实际应用中,RGBA常用于需要半透明效果的元素,如弹出框、阴影效果等。而RGB则用于普通的颜色设置,不涉及透明度。

4.HSL 和 HSLA

  1. HSL:HSL是一种表示颜色的方法,使用色相(Hue)、饱和度(Saturation)、亮度(Lightness)三个参数来定义颜色。色相表示颜色的类型,取值范围是0到360度;饱和度表示颜色的纯度,取值范围是0%到100%;亮度表示颜色的亮度,取值范围也是0%到100%。在CSS中,可以使用hsl()函数来表示HSL颜色,例如hsl(120, 100%, 50%)表示纯绿色。
  2. HSLA:HSLA是在HSL的基础上增加了一个表示透明度的通道(Alpha)。透明度通道的取值范围也是0到1,0表示完全透明(即不可见),1表示完全不透明。在CSS中,可以使用hsla()函数来表示HSLA颜色,例如hsla(120, 100%, 50%, 0.5)表示半透明的纯绿色。

HSL 和 HSLA有什么区别

HSL和HSLA的区别和RGB和RGBA类似,HSLA可以设置颜色的透明度,使得元素可以呈现半透明或者完全透明的效果。