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)}

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

  1. Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer

    问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...

  2. CSS样式写在JSP代码中的几种方法

    1.行内样式. 可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=" "双引号中才可以, 如: <p style=" ...

  3. 后端数据中含有html标签和css样式,前端如何转译展示样式效果。

    后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...

  4. css样式表 格式与布局

    1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器  以.开头 ID选择器 以#开 ...

  5. vue.cli 中使用 less 来写css样式

    vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...

  6. js中如何去获取外部css样式

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. asp.net通过后台代码给前台设置css样式,下拉列表在js中的取值

    后台根据不同的用户登陆隐藏或显示前台div标签 前台: 将div声明成服务器端控件 <div id="div1" runat="server">.. ...

  8. vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题

    最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...

  9. 开发中经常遇到的一些css样式问题

    1.经常会遇到子元素浮动了,父元素就会探索到一个合适的值现在值是0,就要清除浮动操 <div class="search clearfix"> <div clas ...

  10. CSS样式表——格式与选择器

    1.分类 1)内联(写在标签内部) style="样式" 控制精确,代码重用性差 2)内嵌(在<head></head>中) <style type= ...

随机推荐

  1. Mysql 使用 group by 不对 null 做分组

    在项目开发查询数据需要将相同的数据做合并处理,但是字段为null,不做合并. 创建表以及添加数据 create table t_student( `id` int not null primary k ...

  2. 找不到 .NETFramework,Version=v5.0 的引用程序集。要解决此问题,请为此框架版本安装开发人员工具包(SDK/目标包)或者重新定向应用程序。

    找不到 .NETFramework,Version=v5.0 的引用程序集.要解决此问题,请为此框架版本安装开发人员工具包(SDK/目标包)或者重新定向应用程序. visual studio 2019 ...

  3. CM 停用 Parcel 异常

    在将Doris集成到CM时,第一次打的包存在问题,想更新下,停用.删除Parcel时出现了问题卡住了,一直显示75%.无奈换了名称和版本,分配.激活,然后又卡在了75%,点开后,发现是同一台机器.其a ...

  4. com.netflix.hystrix.exception.HystrixBadRequestException: null

    com.netflix.hystrix.exception.HystrixBadRequestException: null 排查方法:如果有多个feign接口的调用,可以在每个调用的方法加上try- ...

  5. .htaccess伪静态规则

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` .htaccess伪静态规则 日期:2017-12-4 阿 ...

  6. UniRx-unirx中的对象池

    UniRx-unirx中的对象池 对象池Unirxunity 对象池 一.对象池模式 <游戏设计模式-对象池模式> 1.概念 定义一个池对象,其包含了一组可重用对象. 其中每个可重用对象都 ...

  7. 麒麟操作系统V10安装mysql8.0.26

    今年mysql装得有点多,大概有4次了,快变系统工程师了! 本文重点说下如何识别版本和配置服务! 首先两点: 1)麒麟本质是linux内核,所以基本上centos的操作在这里可以通用 2)虽然通用,但 ...

  8. PPP协议简介

    转载出处:https://blog.csdn.net/csucxcc/article/details/1684416 PPP(Point-to-Point Protocol)协议是在SLIP的基础上发 ...

  9. Windows查看电源使用情况

    这里使用Windows自带的东西查看电源使用情况. 1.按Win键+R,输入cmd,回车. 2.输入Powercfg /batteryreport回车. 3.根据提示找到电池报告文件,双击打开即可.

  10. Nginx+Fail2ban 实现同一ip在一分钟内连续三次请求同一接口并响应成功时进行封禁

    1. 安装 Fail2Ban 和 Nginx 如果尚未安装 Fail2Ban 和 Nginx,可以使用以下命令进行安装: # CentOS默认的仓库中可能不包含Nginx,所以需要添加EPEL(Ext ...