R语言中的渐变色

Posted 2023-05-05

参考技术A 如何使用R语言画出漂亮的图，颜色很重要，既要协调，又有有一定的分辨力。

可以拿到任意多个颜色，当然颜色越多，分辨力越低。

barplot(rep(1,8), col=rainbow(8),border=NA)

rainbow(8)

[1] "#FF0000FF" "#FFBF00FF" "#80FF00FF" "#00FF40FF" "#00FFFFFF" "#0040FFFF"

[7] "#8000FFFF" "#FF00BFFF"

barplot(rep(1,20), col=rainbow(20),border=NA) #分辨力降低

par(mfrow=c(4,1), mar=c(0,2,2,0) )

n=10

#heat.colors()从红色渐变到黄色，再变到白色

barplot(rep(1,n), col= heat.colors(n), border=NA, main="heat.colors") 

#terrain.colors() 从绿色渐变到黄色，再到棕色，最后到白色 

barplot(rep(1,n),col=terrain.colors(n), border=NA, main="terrain.colors")

#topo.colors() 从蓝色渐变到青色，再到黄色，最后到棕色 

barplot(rep(1,n),col=topo.colors(n), border=NA, main="topo.colors")

#cm.colors() 从青色渐变到白色，再到粉红色

barplot(rep(1,n),col=cm.colors(n), border=NA, main="cm.colors")

(1)

library(RColorBrewer)

display.brewer.all() #显示全部颜色集合

# 挑选某一个集合

#barplot(rep(1,8),col=brewer.pal(8,"Dark2")[1:8]) #基础语法

myColors=brewer.pal(8,"Dark2")[1:8] #Dark2主题有8种颜色

par(mfrow=c(4,1), mar=c(0,2,2,0) )

barplot(rep(1,8),col= myColors, main="Dark2"  )

#

n=15 #nrow(df);

barplot(rep(1, n ),col= colorRampPalette(colors = myColors)( n ),main="Default:linear") #则由8种生成15种颜色

barplot(rep(1, n ),col= colorRampPalette(colors = myColors, interpolate ="linear")( n ),main="linear" ) #插值方式

barplot(rep(1, n ),col= colorRampPalette(colors = myColors, interpolate ="spline")( n ),main="spline") #插值方式

colSet2 # 获取颜色16进制表示

# [1] "#1B9E77" "#D95F02" "#7570B3" "#E7298A" "#66A61E" "#E6AB02" "#A6761D" "#666666"

解释:

n=5;barplot(rep(1,n), col= colorRampPalette (colors = c('red', 'white'))( n ))

colorRampPalette 函数可以混合任意两种及更多颜色，通过插值，生成更多色彩。

(2) 目测其他几个预制颜色集合

n=8;barplot(rep(1,n),col= brewer.pal(n,"Set2")[1:n] ) # set2 共8种颜色

ref:

biomooc.com

<img> 标签的渐变色

【中文标题】<img> 标签的渐变色

【英文标题】：gradient color to <img> tag

【发布时间】：2021-11-20 01:26:07

【问题描述】：

如何为图像标签添加渐变色？这就是我目前所拥有的

<img style=height:'100vh', width:'100%', backgroundColor:"linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%)" src=data.image />

但是渐变在图像后面，我想要的是渐变应用到图像上

【参考方案1】：

您可以简单地将 img 添加到带有 background-image: linear-gradient 的 div 中，然后使用 z-index: -1 来添加 img。 我在 codepen 上为您创建了一些示例：

https://codepen.io/orsisi/pen/PojXWBW

 <div style="background-image: linear-gradient(to bottom, rgba(127, 255, 212, 0.52), rgba(9, 121, 10, 0.75)); width:100%; height: 600px"><img style="z-index:-1; position: relative;" src="https://i.postimg.cc/Kzc934rp/photo-1526336024174-e58f5cdd8e13.jpg"/></div>

或者您可以考虑在具有background-image: linear-gradient 属性的同一div 中使用一个div 和用url 引用的图像。 https://codepen.io/orsisi/pen/JjJwEKw

请注意，如果您在 div 上使用此样式，则需要具有 alpha 0-1 值的 rgba 颜色，因为它定义了透明度。否则渐变将覆盖图像而不会被透视。 底线：简单的 rgb 是行不通的。

<div style="background-image: linear-gradient(to bottom, rgba(127, 255, 212, 0.52), rgba(9, 121, 10, 0.75)), url(https://i.postimg.cc/Kzc934rp/photo-1526336024174-e58f5cdd8e13.jpg); width:100%; height: 600px"></div>

您还可以在 CSS 中使用混合混合模式。

这个使用multiply-blend-mode: multiply 您可以尝试不同的混合模式，as listed here.

https://codepen.io/orsisi/pen/xxLKbeW

【参考方案2】：

我有办法实现你所需要的，但要向 DOM 添加一些元素。

<div style= height: "200px", width: "200px", position: "relative" >
        <div
          style=
            position: "absolute",
            height: "100%",
            width: "100%",
            top: "0",
            left: "0",
            opacity: "0.73",
            background: "linear-gradient(to right, #16a085, #f4d03f)",
            zIndex: "2",
          
        />
        <img
          style=
            position: "absolute",
            width: "100%",
            height: "100%",
            top: "0",
            left: "0",
            zIndex: "1",
          
          src="https://assets.diarioconcepcion.cl/2020/11/Gas-natural.jpg"
        />
      </div>

我不知道另一种方法可以做到这一点，尽管我认为使用 css 的 :: after 属性可以做得更好，并且可以按照您在同一张图片中的要求完成。