首页 > 其他分享 >matplotlib中渐变颜色条转CSS样式(hex格式)——同mapbox中cog的颜色条拉伸显示

matplotlib中渐变颜色条转CSS样式(hex格式)——同mapbox中cog的颜色条拉伸显示

时间:2024-04-12 18:13:26浏览次数:28  
标签:颜色 colormap hex 条转 matplotlib colors cmap name

matplotlib中渐变颜色条转CSS样式(hex格式)——同mapbox中cog的颜色条拉伸显示

应用场景:

1.适用于mapbox中显示cog影像时,colormap_name拉伸颜色条转换
2.适用于Python可视化matplotlib内置颜色条转换

以colormap_name=Blues为例

转换代码如下:

使用python,需要安装matplotlib和numpy模块,输出结果可直接在CSS文件中使用

import matplotlib.cm as cm
import matplotlib.colors as colors
import numpy as np

def colormap_to_css(colormap_name, n_colors=256):
    cmap = cm.get_cmap(colormap_name)
    hex_colors = [colors.rgb2hex(cmap(i)[:3]) for i in range(n_colors)]
    return  f""".{colormap_name.lower()}{{background: linear-gradient(to right
    {''.join([f',{color}' for color in hex_colors])})}}
    """
 
# 使用示例
cmap_name = "Blues"
css = colormap_to_css(cmap_name)
print(css)
#输出结果:.blues{background: linear-gradient(to right
,#f7fbff,#f6faff,#f5fafe,#f5f9fe,#f4f9fe,#f3f8fe,#f2f8fd,#f2f7fd,#f1f7fd,#f0f6fd,#eff6fc,#eef5fc,#eef5fc,#edf4fc,#ecf4fb,#ebf3fb,#eaf3fb,#eaf2fb,#e9f2fa,#e8f1fa,#e7f1fa,#e7f0fa,#e6f0f9,#e5eff9,#e4eff9,#e3eef9,#e3eef8,#e2edf8,#e1edf8,#e0ecf8,#dfecf7,#dfebf7,#deebf7,#ddeaf7,#dceaf6,#dce9f6,#dbe9f6,#dae8f6,#d9e8f5,#d9e7f5,#d8e7f5,#d7e6f5,#d6e6f4,#d6e5f4,#d5e5f4,#d4e4f4,#d3e4f3,#d3e3f3,#d2e3f3,#d1e2f3,#d0e2f2,#d0e1f2,#cfe1f2,#cee0f2,#cde0f1,#cddff1,#ccdff1,#cbdef1,#cadef0,#caddf0,#c9ddf0,#c8dcf0,#c7dcef,#c7dbef,#c6dbef,#c4daee,#c3daee,#c2d9ee,#c1d9ed,#bfd8ed,#bed8ec,#bdd7ec,#bcd7eb,#bad6eb,#b9d6ea,#b8d5ea,#b7d4ea,#b5d4e9,#b4d3e9,#b3d3e8,#b2d2e8,#b0d2e7,#afd1e7,#aed1e7,#add0e6,#abd0e6,#aacfe5,#a9cfe5,#a8cee4,#a6cee4,#a5cde3,#a4cce3,#a3cce3,#a1cbe2,#a0cbe2,#9fcae1,#9dcae1,#9cc9e1,#9ac8e0,#99c7e0,#97c6df,#95c5df,#94c4df,#92c4de,#91c3de,#8fc2de,#8dc1dd,#8cc0dd,#8abfdd,#89bedc,#87bddc,#85bcdc,#84bcdb,#82bbdb,#81badb,#7fb9da,#7db8da,#7cb7da,#7ab6d9,#79b5d9,#77b5d9,#75b4d8,#74b3d8,#72b2d8,#71b1d7,#6fb0d7,#6dafd7,#6caed6,#6aaed6,#69add5,#68acd5,#66abd4,#65aad4,#64a9d3,#63a8d3,#61a7d2,#60a7d2,#5fa6d1,#5da5d1,#5ca4d0,#5ba3d0,#5aa2cf,#58a1cf,#57a0ce,#56a0ce,#549fcd,#539ecd,#529dcc,#519ccc,#4f9bcb,#4e9acb,#4d99ca,#4b98ca,#4a98c9,#4997c9,#4896c8,#4695c8,#4594c7,#4493c7,#4292c6,#4191c6,#4090c5,#3f8fc5,#3e8ec4,#3d8dc4,#3c8cc3,#3b8bc2,#3a8ac2,#3989c1,#3888c1,#3787c0,#3686c0,#3585bf,#3484bf,#3383be,#3282be,#3181bd,#3080bd,#2f7fbc,#2e7ebc,#2d7dbb,#2c7cba,#2b7bba,#2a7ab9,#2979b9,#2777b8,#2676b8,#2575b7,#2474b7,#2373b6,#2272b6,#2171b5,#2070b4,#206fb4,#1f6eb3,#1e6db2,#1d6cb1,#1c6bb0,#1c6ab0,#1b69af,#1a68ae,#1967ad,#1966ad,#1865ac,#1764ab,#1663aa,#1562a9,#1561a9,#1460a8,#135fa7,#125ea6,#125da6,#115ca5,#105ba4,#0f5aa3,#0e59a2,#0e58a2,#0d57a1,#0c56a0,#0b559f,#0a549e,#0a539e,#09529d,#08519c,#08509b,#084f99,#084e98,#084d96,#084c95,#084b93,#084a91,#084990,#08488e,#08478d,#08468b,#08458a,#084488,#084387,#084285,#084184,#084082,#083e81,#083d7f,#083c7d,#083b7c,#083a7a,#083979,#083877,#083776,#083674,#083573,#083471,#083370,#08326e,#08316d,#08306b)}

标签:颜色,colormap,hex,条转,matplotlib,colors,cmap,name
From: https://www.cnblogs.com/gby-web/p/18131845

相关文章

  • 【Azure Power BI】在Power BI中获取十进制随机数后,转换十六进制作为颜色值示例
    问题描述在使用PowerBIDesktop做报表,用到了其中一个图标组件(CardBrowser),可以做出比较漂亮的图片和带颜色的卡片效果:但是,在自己的数据源中,并没有颜色值。所以颜色值为0-255的十进制转换为00-FF的十六进制数据,想到了生成随机数,然后转换为颜色值。数据源格式示例:Title Coun......
  • iPad 10哪个颜色好看?iPad 10处理器是什么型号?
    苹果iPad10将会搭载A14Bionic处理器。A14芯片采用台积电5nm工艺,集成了118亿晶体管,Geekbench平台上3.1GHz主频下达到了单核1658分、多核4612分。它采用6核心设计,4个节能核心及2个效能核心,性能方面与上一代iPadAir的A12处理器相比提升了40% iPad10更多使用感受......
  • Qt中显示hex数据的控件
    效果类似QTextEdit,但是显示十六进制的数据,比如用于显示抓取串口或者bin文件的数据等等chunks.h#ifndefCHUNKS_H#defineCHUNKS_H/**\conddocNever*//*!TheChunksclassisthestoragebackendforQHexEdit.**WhenQHexEditloadsdata,Chunksaccessthe......
  • [SVG]修改固定颜色为填充颜色
    主要思路是把fill和stroke改成currentColor,具体以后补充。 修改之前:<svgxmlns="http://www.w3.org/2000/svg"viewBox="003636"><gtransform="translate(11)"fill="none"fill-rule="evenodd"><rect......
  • opencv基础操作:读取图片时使用灰度方式、转换颜色空间、使用opencv展示图片、使用open
    包含的操作有:读取图片时使用灰度方式转换颜色空间使用opencv展示图片使用opencv对BGR通道进行划分并展示,需要注意的是直接使用cv2.split()得到的B,G,R分别是单通道的,因此最终展示出来为灰度图像。    如果想保留彩色图像,可以直接对img切片来实现。使用opencv在一个窗口......
  • C113 带修莫队 P1903 [国家集训队] 数颜色/维护队列
    视频链接:   LuoguP1903[国家集训队]数颜色/维护队列//带修莫队O(n^(5/3))#include<iostream>#include<cstring>#include<algorithm>#include<cmath>usingnamespacestd;constintN=1000005;intn,m,B,mq,mr,a[N];intsum,cnt[N],ans[N];st......
  • CSS设置网页颜色
    前言:我们在电脑显示器,手机屏幕,电视上面看到的颜色都是通用三种颜色混合而成的:红(red),绿(green),蓝(blue)简称为三原色,按照不同的比例就可以配出其他的颜色。在CSS中提供了一些属性可以用来设置颜色如color,可以用来设置文字的颜色,下列是描述颜色的6中方式:值说明例颜色名字......
  • three.js基础之几何体颜色、纹理贴图、外部模型
    几何体颜色<body><canvasid="mainCanvas"width="400px"height="300px"></canvas></body><scripttype="importmap">{"imports":{"three":"./js/build/......
  • 第三个OpenGL程序,shaders _ 后续 之 moreAttribute (设置顶点位置属性 颜色位置属性),从
    效果: 代码main.cpp#include<iostream>#include<glad/glad.h>#include<glfw3.h>#include<math.h>usingnamespacestd;//回调函数,每当窗口改变大小,视口大小也跟随改变voidframebuffer_size_callback(GLFWwindow*window,intwidth,intheight){glV......
  • 定义一棵松弛红黑树及其根结点颜色转换后的影响
    定义一棵松弛红黑树及其根结点颜色转换后的影响1.红黑树的性质2.松弛红黑树的定义3.根节点颜色变化的影响4.伪代码实现5.C语言代码实现6.结论在计算机科学中,红黑树是一种自平衡的二叉搜索树,它在许多数据结构和算法问题中都有着广泛的应用。红黑树通过一系列精心......